Direkt zum Inhalt

Bilder für Webseiten optimieren

Bilder für Webseiten optimieren: kurze Ladezeit, beste Qualität

Bilder verzögern das Laden der Seite und stellen die schwerste Last für Webseiten dar – die Pageload. Jedes Byte zählt, denn kurze Ladezeiten gehören zu den wichtigen Faktoren beim Ranking in den Suchmaschinen. Für Besucher steht die Qualität der Fotos stellvertretend für die Qualität des Produkts. Sie bevorzugen große Bilder, brechen aber das Laden der Seite ab, wenn sie ungeduldig werden.

Bilder für Retina-Displays speichern
Die Monitore der mobilen Geräte sind größer als sie wirken: Sie zeigen drei bis vier mal so viele Pixel auf derselben Fläche wie ein Desktop-Monitor.

Bei langen Ladezeiten gilt der erste Blick der Bildgröße.

Bilder für responsives Webseiten

Der erste Schritt für schnell ladende Bilder – schon vor dem Upload – ist das Skalieren (Verkleinern oder Vergrößern) auf die richtige Größe, Seitdem die mobilen Geräte im Internet unterwegs sind, ist die »richtige Größe« im wahrsten Sinne des Wortes ein bewegliches Ziel.

Die modernen Templates der Content Management Systeme können Bilder angemessen an das Layout auf unterschiedlichen Monitoren anpassen, aber kratzen dabei am Transfervolumen der mobilen Geräte. Andererseits gibt es keine einfache Möglichkeit, hochauflösende Bilder für Retina-Monitore bereitzustellen.

Media Queries für responsive Bilder
300 Pixel Breite für das Bild auf dem Handy oder 570px für das Retina-Display?
Eine größere Kopie des Fotos für Tabletts und 1680 Pixel Breite für den Desktop-Monitor?

Ein Blick in die Dokumentation des Templates hilft nur in Ausnahmen, denn noch sehen wenige Templates diesen Aufwand vor, geschweige denn, dass eine Erweiterung im Backend des CMS das Bild automatisch für die verschiedenen Monitorgrößen kopiert und dem Handy, dem Tablett oder Desktop-Monitor fachgerecht vorlegt. Autoren wollen Bilder schnell und ohne lange Vorbereitung in ihren Beitrag, Post oder Artikel für die Webseite einsetzen und sich nicht mit den verschiedenen Auflösungen des Bildes für unterschiedliche Monitore befassen.

Drupal 8 hat sowohl die einfachere srcset + sites-Option als auch das HTML5-picture Element für unterschiedliche Seitenverhältnisse an Bord, legt Bildgrößen automatisch an und bescheidet Bilder automatisch auf das gewünschte Seitenverhältnis. Für Drupal 7 gibt es das Picture-Modul.

Für WordPress gibt es Plugins wie Responsify WP und RICG Responsive Images; für Joomla responsive Galerien wie Responsive Photo Gallery

Die Zukunft der responsiven Bilder

Die mobilen Geräte streben auf hochauflösende Bilder zu: Ihre Monitore zeigen drei mal so viele Pixel auf derselben Fläche wie ein Desktop-Monitor. Alte Handys mit geringer Auflösung (300 bis 400 Pixel auf der schmalen Seite) stellen weniger als 1% der Besucher. Das iPhone 6 hatte schon dieselbe Auflösung wie ein HD-Fernseher. Eine gute Komprimierung und die Wahl des Bildausschnitts sparen ebenfalls Bandbreite bei der Übertragung des Bildes auf die mobilen Geräte.

JPG richtig komprimieren
600 x 400 Pixel 56KB bei 75% Komprimierung
1280 x 851 Pixel 88KB bei 50% Komprimierung

Hochauflösende Bilder (z.B. 1280 x 851 Pixel) dürfen stärker komprimiert werden als kleine Bilder (z.B 600 x 400 Pixel). Fotos und Grafiken sind immer individuell. Wenn das Bildmaterial eine wichtige Rolle spielt, müssen sie manuell für das Internet vorbereitet werden – eine Aufgabe, die ein automatisiertes CMS dem Autor nicht abnehmen kann.

Komprimieren und optimieren

Der Weißraum um Bilder wird genauso entfernt sowie überflüssige Teile des Bildes – »Bilder beschneiden« oder »freistellen« sind die Fachbegriffe der Grafiker und Webdesigner.

bilder-freistellen.jpg

Überflüssige Bildbereiche werden vor dem Speichern für die Webseite entfernt. Auf einem kleinen Monitor würde das Motiv mit dem Leerraum rundherum verloren wirken. Das gilt insbesondere für Produktfotos, in denen der Interessent keine Details mehr erkennen würde.

Bildformate für Webseiten

Es gibt nur wenige Bildformate, die zuverlässig von allen Browsern angezeigt werden.

  • JPG für Fotos – alle Bildbearbeitungsprogramme können JPG heute hervorragend komprimieren.
  • PNG mit 8 Bit Farbtiefe für Grafiken.
  • PNG mit weniger als 8 Farben für Logos und Grafiken, in denen man die Zahl der Farben an einer Hand abzählen kann.
  • PNG mit 24 Bit Farbtiefe für Grafik/Bilder ohne Hintergrund (Freisteller). Bei 24-Bit-PNG lohnt sich eine zusätzliche Komprimierung, z.B. bei TinyPng.

Und wo bleibt GIF? GIF ist ein überholtes Grafikformat. Wir ziehen heute PNG vor (es sei denn, das Bild ist sehr klein (10x10 Pixel) und hat nur drei oder weniger Farben).

SVG für Vektorgrafik

SVG (Scalable Vector Graphic – z.B. aus Adobe Illustrator, Scatch oder Inkscape) – wird von allen modernen Browsern unterstützt (IE8 war der letzte Browser ohne SVG-Support). SVG ist der aufstrebende Stern für Grafiken, denn die Vektorgrafik passt sich ohne Qualitätsverlust an die Monitorgröße an (ist »responsive«) und die Dateigröße einer SVG-Grafik ist meist geringer als eines PNG- oder JPG-Bildes.

SVG für Statistiken: Klein und animierbar

Für Karten, Bauzeichnungen, Statistiken, Illustrationen und Logos ist SVG das beste Format. Dennoch muss auch SVG aus den Illustrationsprogrammen wie Adobe Illustrator und Inkscape optimiert werden, denn diese Programme überschütten die Grafik mit unzähligen überflüssigen Attributen.

Einige Browser zeigen auch Bilder im BMP- und TIF-Format an, aber diese Formate können gar nicht oder nur gering komprimiert werden und die Bilder werden so schnell wie möglich in JPG oder PNG umgewandelt.

Überflüssige Bildinformationen

Das Beseitigen der Meta-Informationen spart weitere überflüssige Bytes.

  • Exif-Informationen,
  • IPTC-Header,
  • ICC-Profil des Bildes,
  • Vorschaubild

Die Exif-Informationen bestehen aus der Aufnahmezeit, dem Kameratyp und -hersteller, Daten über das Objektiv sowie den Einstellungen der Kamera – für Bilder auf der Webseite belanglos – und werden entsorgt.

Fotos werden in den sRGB-Farbraum der Monitore konvertiert, darum muss das ICC-Profil – die Farbraum-Information – nicht gespeichert werden. AdobeRGB ist zwar ein größerer Farbraum, aber nur wenige Monitore können die Farben des AdobeRGB-Farbraums anzeigen, denn Monitore sind fast immer für den RGB-Farbraum eingerichtet. AdobeRGB-Monitore finden wir nur bei professionellen Grafikern und Fotografen.

Bilder für Webseiten komprimieren

JPG ist das Format, in dem alle Digitalkameras ihre Fotos speichern. Fotos im JPG-Format sind immer komprimiert. Gute Kameras wenden allerdings eine geringe Komprimierung an, damit das Bild erneut bearbeitet werden kann. Für das Internet können Fotos stärker komprimiert werden.

JPG – welche Qualitätsstufe?

Üblich ist eine Komprimierung auf 60 bis 75%, wenn Prozentangaben gefordert sind, bzw. auf 8 oder 9 bei einer Skala von 1 bis 12.

Photoshop: JPG mit »Für Web speichern« oder mit »Speichern unter«

Bei großen Bildern kann die Komprimierung aber durchaus auf 40% bis 50% hinaufgesetzt werden. Das liefert bessere Ergebnisse als die Vergrößerung von weniger stark komprimierten Bildern im Browser.

JPG progressiv oder optimiert

In den frühen Zeiten des Internets, als die Bilder noch Pixel für Pixel über die langsamen Leitungen geschoben wurden, haben wir JPG mit der Option »progressiv« gespeichert. Beim progressiven JPEG wird das Bild beim Besucher Zeile für Zeile aufgebaut. Mit den schnellen Internetverbindungen ist dieses Technik in Vergessenheit geraten. Wenn JPG mit der Option progressiv gespeichert wurde, war es zudem größer als Bilder mit der Option »optimiert«.

Heute lohnt sich progressiv wieder, denn die Verfahren für das Komprimieren haben sich verbessert, die progressive Komprimierung erzielt sogar bessere Ergebnisse. Der Unterschied ist zwar nur hauchdünn, aber für den Besucher steht das Bild schneller und der kurze Moment des zeilenweisen Aufbaus ist kaum sichbar.

Icons und Logos

Für jedes Bild geht ein HTTP-Request zum Server. Damit der erste sichtbare Inhalt der Webseite (above the fold) mit möglichst wenig HTTP-Requests abläuft, bindet man Bilddaten von kleinen Bildern wie Logos oder Symbole binär direkt in den HTML-Code ein.

Das Data URL Scheme kann kleine Bilder direkt als Text in die HTML-Seite einbinden. Die HTML-Seite wird dadurch zwar größer, aber das Bild muss nicht über einen gesonderten HTTP-Request geladen werden. Das entlastet den Webserver und die Webseite wird schneller angezeigt.

<img width="300" height="220" alt="Grafik Base64 URL Schema" 
   src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS …>

Sinn macht das Data URL-Schema bei Logos und Buttons. Bei größeren Bildern würde der HTML-Code zu unübersichtlich. Bilder mit Base64 rund 30% größer als extern gespeicherte Bilder: Die PNG-Grafik hat als Base64-Text rund 16 KB, das PNG-Bild selber nur 12 KB.

Dateiname und alt-Attribut

Suchmaschinen sind keine Bildbetrachter. Sie erkennen zwar Bilder, aber was zu sehen ist, erkennen sie nicht. »Sprechende« Dateinamen helfen den Suchmaschinen schon weiter: Aus DSC04990.JPG wird knoepfe-annaehen.jpg.

Das alt-Attribut braucht auf jeden Fall einen kleinen Text für Besucher ohne Bildanzeige. Auch die Suchmaschinen beachten den Text des alt-Attributs zum Bild.

Meinungen, Fragen, Bemerkungen?

Klartext

  • Keine HTML-Tags erlaubt.
.infografik {width:300px; height:190px; margin: 1em auto;} .jpg {width:300px;height:200px;margin:1em auto;} @media only screen and (min-width:480px) { .infografik {width:450px; height:272px} .jpg {width:450px;height:300px} } @media only screen and (min-width:680px) { .infografik {width:600px; height:380px} .jpg {width:600px;height:400px} }
SVG-HIDE
JPG PNG SVG GIF //* if () else { } // $look function 82 % programmieren 4 % trinken Redbull 8 % twittern 6 % suchen ihr Laserschwert Web-Entwickler JPG – Qualität vs Komprimierung Dateigröße 12 10 8 6 4 2 0 Nicht gut genug Magazine, Blogs, Berichte Fotogalerie, Fotoblog zu groß, kein sichtbarer Qualitätsgewinn MittlereKomprimierung HoheKomprimierung HöchsteKomprimierung GeringsteKomprimierung Photoshop: JPG mit »Für Web speichern« oder mit »Speichern unter« Bildoptionen Format-Optionen Baseline (Standard) Progressiv Durchgänge Qualität Kleine Datei Große Datei 7 Mittel 3 Grundlinie optimiert Vorgabe Farbprofil einbetten Progressiv 60 Unbenannt optimiert JPEG-Optionen JPEG Mittel Qualität 0 Weichzeichnen Hintergrund in sRGB konvertieren Bildschirmfarbe Vorschau Metadaten Ohne JPEG-Optionen PhotoshopFür Web speichern Speichern unter