Die meisten Bilder, die für eine Website „zu groß“ erscheinen, sind nicht stark komprimiert. Sie sind einfach breiter und höher als nötig. Ein direkt von einem Telefon aufgenommenes Foto kann eine Breite von 4.000 Pixeln haben und dennoch in einer Box mit einer Breite von 700 Pixeln landen. Die Größenänderung dieses Bildes hat weitaus mehr Einfluss auf die Dateigröße, als es das Verschieben eines Qualitätsreglers jemals tun wird.

Die beiden Jobs hängen zusammen, sind aber nicht gleich. Bei einer Größenänderung ändert sich die Anzahl der Pixel. Durch die Komprimierung ändert sich, wie viele Daten zur Beschreibung jedes Pixels verwendet werden. Stellen Sie zuerst die richtigen Abmessungen ein und komprimieren Sie sie dann – und Ihre Bilder sehen bei gleicher Dateigröße besser aus.

Beginnen Sie mit den Abmessungen, nicht mit dem Qualitätsregler

Entscheiden Sie, wie breit das Bild tatsächlich erscheinen soll, und berücksichtigen Sie dann Bildschirme mit hoher Dichte. Eine praktische Regel besteht darin, mit der doppelten CSS-Breite zu exportieren, wenn Sie möchten, dass es auf Telefonen und Laptops mit dichten Displays scharf bleibt. Eine 600 Pixel breite Karte profitiert beispielsweise von einem 1200 Pixel großen Bild.

Wo es erscheint Längste Seite Notizen
Heldenbild in voller Breite 1600–2000 px 1600 Pixel reichen für die meisten Websites aus; größer hilft nur bei sehr breiten Bildschirmen.
Bild des Artikelkörpers 1200 px Bei 2-facher Dichte deckt dies eine Inhaltsspalte mit 600 Pixeln ab.
Karte oder Miniaturansicht 600 px Kleinere Objekte wirken bei Vergrößerung weicher.
Inline-Bild per E-Mail versenden 800 px Streben Sie deutlich unter 200 KB an; Viele Clients blockieren ohnehin große Bilder.
Bild zum Teilen in sozialen Netzwerken 1200 × 630 px Ein übliches Landschaftsverhältnis, das auf den meisten Plattformen vorhersehbar zugeschnitten wird.

Sie müssen dies nicht perfekt berechnen. Wenn das Original 6000 Pixel breit ist und das größte jemals angezeigte Bild etwa 1600 Pixel beträgt, hat die Beibehaltung der zusätzlichen Pixel keinen visuellen Vorteil. Die Reduzierung der langen Seite ist die größte verfügbare Einsparung.

Was sich durch die Qualitätseinstellung tatsächlich ändert

Bei JPEG steuert der Qualitätswert, wie aggressiv der Encoder Details wegwirft, die das Auge weniger wahrscheinlich wahrnimmt. Dabei handelt es sich nicht um einen Prozentsatz der Originalqualität, und 80 bedeutet nicht „80 % so gut“. Es handelt sich lediglich um einen Punkt auf einer Skala, an dem niedrigere Werte zu kleineren Dateien und sichtbareren Artefakten führen.

  • Etwa 80–85 ist ein komfortabler Bereich für Fotos, die sauber aussehen müssen. Der Unterschied zum Original ist bei normaler Betrachtungsgröße meist kaum zu erkennen.
  • Etwa 70–78 Funktioniert gut für Webbilder, die sich in einem Layout befinden und nie genau untersucht werden. Die Dateigrößen sinken merklich.
  • Unten etwa 60werden Artefakte leichter erkannt: blockige Flecken in einem glatten Himmel, Lichthöfe an Kanten und unscharfer Text. Bei Screenshots oder Grafiken mit Text sollten Sie diesen Wert vermeiden.

Die JPEG-Komprimierung verstärkt ebenfalls. Wenn Sie ein bereits gespeichertes JPEG in einer geringeren Qualität speichern, werden die ursprünglichen Details nicht wieder sichtbar; es fügt eine zweite Verlustschicht hinzu. Beginnen Sie mit der besten Kopie, die Sie haben, und exportieren Sie sie einmal in der von Ihnen benötigten Größe.

PNG ist verlustfrei, daher gibt es keinen Qualitätsregler. Bei fotografischen Inhalten ist eine PNG-Datei im Allgemeinen größer als eine JPEG-Datei, die scharfen Kanten und die Transparenz bleiben jedoch erhalten. WebP kann entweder im verlustbehafteten oder verlustfreien Modus verwendet werden; Bei ähnlicher Qualität ist verlustbehaftetes WebP oft kleiner als JPEG, obwohl die Kompatibilität mit älterer Software etwas geringer ist.

Wählen Sie das Format aus, bevor Sie es verfeinern

Die Wahl des Formats bewirkt mehr als nur Komprimierungseinstellungen. Verwenden Sie JPEG oder verlustbehaftetes WebP für Fotos, Screenshots mit fotografischem Inhalt und alle Bilder, bei denen kontinuierliche Töne wichtig sind. Verwenden Sie PNG für flache Farbgrafiken, Logos, Screenshots der Benutzeroberfläche und alles, was einen transparenten Hintergrund benötigt. JPEG hat keine Transparenz; Wenn ein Bild mit ausgeschnittenem Hintergrund als JPEG gespeichert wird, werden diese Bereiche gefüllt – normalerweise mit Weiß.

Ein häufiger Fehler besteht darin, einen gestochen scharfen Screenshot des Textes als JPEG zu speichern. Durch die Komprimierung entstehen schwache Lichthöfe und Flecken um die Buchstaben herum, wodurch die Bildqualität selbst bei moderater Einstellung minderwertig wirkt. PNG oder WebP halten den Typ sauber und erzeugen für diese Art von Inhalten oft ohnehin eine kleinere Datei. Einen genaueren Vergleich gibt es in JPG, PNG oder WebP?

Ein sinnvoller Workflow

  1. Behalten Sie das Original. Arbeiten Sie mit einer Kopie und überschreiben Sie niemals die einzige Version eines Fotos, die Ihnen wichtig ist.
  2. Ändern Sie die Größe auf die größte angezeigte Größe. Verwenden Sie die doppelte Layoutbreite, wenn Sie möchten, dass Bildschirme mit hoher Dichte scharf bleiben. Beschneiden oder dehnen Sie nicht, nur um eine Zahl zu treffen; Behalten Sie das Seitenverhältnis bei, es sei denn, die Komposition muss geändert werden.
  3. Wählen Sie das Format basierend auf dem Inhalt aus. Foto: JPEG oder WebP. Flache Grafik oder Transparenz: PNG oder WebP.
  4. Beginnen Sie mit Qualität 80. Wenn Sie sich nicht sicher sind, vergleichen Sie es mit 75 und 85. Bewegen Sie sich nur nach unten, solange das Bild noch die Größe hat, die die Leute sehen können.
  5. Betrachten Sie es in 100 % und in der Layoutgröße. Verkleinert sieht fast alles gut aus. Wenn Sie hineinzoomen, können Sie Artefakte an Kanten und Flächen erkennen. Überprüfen Sie beides.

Mit dem Bildkompressor, die Obergrenze für die längste Seite und der Qualitätswert werden zusammen angezeigt, sodass Sie vor dem Herunterladen eine Kombination testen und die Vorher-Nachher-Größe vergleichen können. Der Resizer ist die bessere Wahl, wenn die Abmessungen genau sein müssen, einschließlich prozentualer Skalierung und fester Seitenverhältnisse.

Häufige Fehler und was man stattdessen tun kann

Komprimieren vor der Größenänderung

Das Speichern eines 6000-Pixel-Fotos mit Qualität 50 führt zu einer immer noch großen Datei mit sichtbaren Schäden. Zuerst die Größe ändern, dann komprimieren. Das gleiche Foto sieht bei 1600 Pixel und Qualität 80 normalerweise besser aus und wiegt weniger.

Auf der Suche nach der kleinstmöglichen Datei

„Kleiner“ ist nicht das Ziel an sich. Ein Produktfoto, das bei Qualität 40 matschig aussieht, ist möglicherweise kleiner als eines bei Qualität 78, sieht aber auf der Seite auch schlechter aus. Ziel ist es, klein genug zu sein: klar in der angezeigten Größe, ohne Pixel oder Megabyte zu verschwenden.

Konvertieren von Transparenz in JPEG

Wenn ein Logo einen transparenten Hintergrund hat, füllt JPEG ihn mit Weiß. Auf einer farbigen Seite wird dies als offensichtliches Kästchen angezeigt. Behalten Sie PNG oder WebP bei oder bereiten Sie eine Version für eine bestimmte Hintergrundfarbe vor.

Wiederholtes erneutes Speichern desselben JPEG

Bei jedem verlustbehafteten Speichern werden Artefakte hinzugefügt. Stapelbearbeitungen sollten bei der Originaldatei beginnen, nicht bei der letzten exportierten Version. Behalten Sie einen hochwertigen Master und generieren Sie daraus die Webversion.

Metadaten vergessen

Fotos können Kameradetails und Standortdaten in ihren Metadaten enthalten. Die Neukodierung durch eine Leinwand, wie es Lovely Tools tut, erzeugt ein neues Bild ohne die angehängten Metadaten. Das ist oft gut für den Datenschutz, bedeutet aber auch, dass Sie das Original behalten sollten, wenn Sie die Metadaten aus archivarischen oder beruflichen Gründen benötigen. Moderne Browser berücksichtigen beim Zeichnen die Ausrichtung eines Fotos, sodass Porträtfotos nicht seitlich ankommen sollten.

Wo die Komprimierung stattfindet

In Lovely Tools wird das Bild von Ihrem Browser dekodiert, in den gewählten Abmessungen auf eine Leinwand gezeichnet und erneut als neue Datei kodiert. Es wird nichts hochgeladen. Das Original bleibt unberührt und die komprimierte Kopie ist nur im Browser-Tab vorhanden, bis Sie sie herunterladen.

Das erklärt auch die Grenzen. Die gesamte Arbeit findet im Speicher Ihres Geräts statt, sodass extrem große Bilder oder große Stapel auf einem Telefon langsam sein können. Auch die Canvas-Engine des Browsers hat eine maximale Größe. Wenn ein Bild zu groß ist, fordert das Tool eine kleinere Größe an, anstatt stillschweigend ein schlechteres Ergebnis zu erzielen.

Bereit, es auszuprobieren? Komprimieren Sie ein Bild oder lesen was es eigentlich bedeutet, lokal zu laufen.