Fotos für die Webseite optimieren und komprimieren

Fotos komprimieren

Auf Foto-Webseiten können Bilder mehr als 75% der gesamten Last der Webseite ausmachen. Fotos für das Internet müssen auf jeden Fall komprimiert werden, um die Ladezeit der Seite so kurz wie möglich zu halten.

Die Komprimierung ist immer ein Balanceakt zwischen Dateigröße und Qualität des Fotos und funktioniert nur gut mit einem Schuß Pragmatismus.

JPG Komprimierung 70% JPG Komrpimierung 20%

Links: JPG-Komprimierung 70% (180 KB), rechts JPG-Komprimierung 20% (34 KB). In der großen Version sind die Folgen der starke Komprimierung nur ein Hauch.

JPG für Fotos

Das Dateiformat für das Internet ist heute noch JPG, obwohl ein neues Dateiformat für Fotos auf der Schwelle steht: AVIF. Dazu später etwas mehr. PNG und GIF hingegen sind Dateiformate für Grafiken.

Lieber ein großes Bild mit starker Komprimierung als eine kleinere Bildgröße mit weniger Komprimierung wählen.

Eine Komprimierung auf 40 bis 60% ist fast immer gut genug. Ein Qualitätsgewinn tritt kaum noch ein, selbst wenn 100% eingestellt würde.

Programme wie Adobe Photoshop sorgen mit der Funktion Für das Web speichern für die minimale Speichergröße bei bester Qualität, indem sie wie oben im Vergleich das Original neben die komprimierte Version setzen.

Photoshop für Web speichern Speichern… Abbrechen Fertig Weichzeichnen: Qualität: Hintergrund: Vorgabe JPEG Hoch [Unbenannt] 60 0 In sRGB konvertieren JPEG 187,8 KB 8 Sek. bei 256 Kbit/s Progressiv Farbprofil einbetten

60% Qualität spart gut 30% Bildgröße gegenüber 80% Qualität.

Photoshop für Web speichern Speichern… Abbrechen Fertig Weichzeichnen: Qualität: Hintergrund: Vorgabe JPEG Hoch [Unbenannt] 80 0 In sRGB konvertieren JPEG 312 KB 8 Sek. bei 256 Kbit/s Progressiv Farbprofil einbetten

Die Qualitätsstufen über 75% bringen keine Verbesserung der Schärfe oder Farben.

Wir gewinnen ein paar Kilobytes, weil wir neben der Komprimierung den Ballast des Bildes entsorgen. Zu diesem Ballast zählen

  • die Exif-Informationen,
  • der IPTC-Header,
  • das eingebettete Vorschaubild.

Ausschnitt wählen

Die Größe oder Auflösung des Fotos trägt nicht alleine zur Speichergröße bei gleicher Qualität bei. Ein JPG ist bei gleicher Größe / Auflösung um so größer bei gleicher Qualität oder Komprimierung, je detailreicher das Bild ist.

Ein Ausschnitt auf das wichtigste Motiv des Fotos erreicht eine um 5 bis 20% geringere Dateigröße.

ausschnitt-2-720
ausschnitt-1-720

Natürlich liegt es im Ermessen des Fotografen und in der Intension des Fotos, wie wichtig der Bereich um das Motiv herum ist und ob ein Foto beschnitten werden kann. Aber denken wir auch an die kleinen Monitore unserer Handys, auf denen wichtige Details des Fotos erst erkennbar werden, wenn der Bildausschnitt gewählt wird!

ausschnitt-2-720
ausschnitt-1-720

Baseline oder Progressiv?

Beim Speichern von Fotos als JPG bieten die Bildbearbeitungsprogramme die Optionen Grundlinie oder Baseline, Grundlinie optimiert und Progressiv.

Progressiv haben wir in den Anfangsjahren des Internets benutzt, dann geriet das progressive Speichern von JPG aus dem Blickfeld. Ein progressiv gespeichertes Bild erscheint sehr schnell, aber unscharf auf dem Monitor und wird dann Schritt für Schritt schärfer.

JPEG Baseline

Bei JPG Baseline erscheint das Bild zeilenweise von oben nach unten, aber jede Zeile kommt schon in voller Schärfe an.

JPG Progressiv

JPG Progressiv ist nahezu sofort in voller Größe sichtbar, aber unscharf und wird dann zunehmend schärfer.

Heute wird das progressive Speichern bei JPG wieder häufiger eingesetzt. Die Bildbearbeitungsprogramme speichern das progressive JPG effizienter als vor 10 Jahren, so dass große Bilder tatsächlich einen Tick kleiner werden.

Große Bilder auf der Webseite verzögern das Laden der Webseite. Da ist jede Ersparnis willkommen, aber vor allem hat der Besucher das Gefühl, das Foto würde schneller geladen und muss nicht vor einem weißen Viereck warten.

Und wenn das Bildbearbeitungsprogramm keine Optionen für das JPEG-Format bietet?

Das ist kein Beinbruch. Dann bleibt es bei Baseline oder Grundlinie. Der Faktor beim Zuwachs der Dateigröße beträgt nicht einmal 1%.

Tipp 5: Speichern für die Bildbearbeitung

RAW-Programme – allen voran Programme wie Lightroom und Darktable – ändern das Original des Fotos nicht, sondern speichern die Bearbeitungsschritte. Kopien und Versionen kommen hier selten zu Tragen.

Wenn eine aufwändige Foto-Retusche oder -Montage zwischengespeichert werden muss, weil der Arbeitstag zu Ende ist, wird es als TIF gespeichert. TIF-Dateien werden sehr groß, und noch größer, wenn Ebenen und Filter hinzukommen, aber TIF ist ein verlustfreies Format. So kann die Bearbeitung ohne Verluste am nächsten Tag fortgeführt werden.

AVIF – der JPG-Nachfolger?

JPG ist ein altes Format (1992) für digitale Fotos – neben RAW natürlich –, aber JPG läßt viele Wünsche offen: JPG komprimiert Fotos gut, aber unterstützt keine Transparenz und speichert kein HDR.

JPG und Avif vergleichen – JPEG JPG und Avif vergleichen – Avif

Seit fast 30 Jahren ist JPG die Nummer Eins beim Speichern und Archivieren von Fotos. Jetzt steht AVIF als Nachfolger von JPG in den Startlöchern: mit einer besseren Komprimierung, Transparenz, HDR und Wide Gamut.

Das Testbild hier bringt als JPG mit 1260 x 545 Pixeln 138 KB, als AVIF gerade mal 57 KB auf die Waage.

AVIF Wide Gamut, Transparenz, HDR

Avif tritt mit all den Merkmalen auf, die wir bei JPG vermissen: Wide Gamut, Transparenz, HDR und sehr gute Komprimierung. Bei der Komprimierung kann man von einer Ersparnis von ~ 30 bis 50% zugunsten von AVIF ausgehen. Obendrein ist Avif Open Source, so dass wir nicht befürchten müssen, dass wir in 10 Jahre das ganze Archiv neu transformieren müssen, weil ein Problem mit der Lizenz auftaucht.

Fotos schärfen

Bei der Vergrößerung eines Fotos (z.B. bei einer Ausschnittsvergrößerung) entsteht ein Weichzeichnungseffekt, dem viele Webdesigner und Fotografen durch ein leichtes Schärfen entgegentreten.

Sowohl beim Verkleinern als auch beim Vergrößern eines Fotos werden die diagonalen Kanten weichgezeichnet, damit keine Treppenstufen entstehen – diese Weichzeichnung nennt man Antialiasing.

Fotos schärfen mit Unscharf Maskieren – Screenshot
Unscharf Maskieren ist der Filter für das Nachschärfen von Fotos nach dem Verkleinern.

Fotos für Facebook, Twitter & Co. müssen selten geschärft werden. Die sozialen Medien verkleinern das Bild automatisch und schärfen es dabei, ebenfalls automatisch und in hoher Qualität.

Wenn das Foto für die eigene Webseite geschärft wird, dann erst am Ende der kompletten Bearbeitung und nach dem Verkleinern, weil sowohl bikubisches als auch bilineares Verkleinern einen Weichzeichnungseffekt mit sich bringen.

Für Fotos ist bikubisch die Technik der Wahl beim Verkleinern.

Der Workflow für Bilder im Internet

  • Darauf achten, dass das Profil des Bildes mitgespeichert wird – gleich ob sRGB oder AdobeRGB.
  • Speichern eines Vorschaubildes deaktivieren.
  • IPTC- und EXIF-Tag beim Speichern nicht aufnehmen.
  • Bildqualität beim Komprimieren mit Für Web speichern bei kleinen Bildern auf 60 bis 75 auf der Skala von 0 bis 100 einstellen.
  • Bei großen Bildern (~400 px Breite) darf die Qualität auf einen geringeren Wert eingestellt werden: ~ 40 bis 60%.
  • JPG, das bereits einmal komprimiert wurde, nicht erneut bearbeiten und komprimieren.

Fotos ins Internet hochladen

Die Sozialen Medien von Facebook über Pinterest bis Flickr sowie Cloud-Dienste wie DropBox haben einen einfachen Bilder-Upload. Dort sorgt die Software auch für die Größenanpassung.

Blogs und Content Management Systeme wie WordPress haben ebenfalls eine Bilder-Upload, aber es hängt vom Design oder Theme ab, ob sich das Bild ohne Zuschneiden in das Design einpasst.

Bei HTML-Seiten im Eigenbau ist die Technik für Bilder in der HTML-Seite schon etwas komplizierter und neben dem HTML-Editor kommt ein FTP-Programm hinzu, mit dem das Bild auf den Server geladen wird. Und wenn das Foto im Browser nicht angezeigt wird, sondern nur ein Platzhalter zu sehen ist?

  • Prüfen, ob der Pfad zum Bild korrekt eingegeben wurde und das Bild auf dem Webserver im richtigen Verzeichnis liegt.
  • Wenn das Bild von der Werbeagentur kam und dort für den Druck aufbereitet wurde, ist es vielleicht im CMYK-Farbraum? Kaum ein Browser kann CMYK-Bilder anzeigen.
  • Wenn der Pfad zum Bild mit C:\ oder file: anfängt, dann ist es der Pfad zum Bild auf dem eigenen Rechner und nicht zum Bild auf dem Webserver.
  • Auf Groß- und Kleinschreibung bei Dateinamen achten.

Externe Quellen

Speichern… Abbrechen Fertig Weichzeichnen: Qualität: Hintergrund: Vorgabe JPEG Hoch [Unbenannt] 60 0 In sRGB konvertieren JPEG 187,8 KB 8 Sek. bei 256 Kbit/s Progressiv Farbprofil einbetten Stärke Radius Schwellenwert Stufen 110 0.5 0 % Pixel OK Abbrechen Vorschau 100% Unscharf maskieren