Fotos und Grafik für Webseiten optimieren

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 dagegen 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.

Heute sind die meisten Macs, so gut wie alle mobilen Geräte und viele Windows-Systeme High-Density-Monitore. HD-DPI-Monitore zeigen drei bis vier mal so viele Pixel auf derselben Fläche wie ein klassischer Desktop-Monitor. Es ist allerdings ein typischer Trugschluss, eine dreifache oder vierfache Auflösung der Bilder für die Monitore der mobilen Geräte anzusetzen: Die kleinen Monitore brauchen die hohe Auflösung in erster Linie, um Text mit mehr Details besser lesbar zu machen. Die zweite Priorität der HD-DPI-Monitore gilt Videos. Für den größten Teil des Bildmaterials reicht eine zweifache Auflösung, und schon die doppelte Auflösung bringt schon die vierfache Bildgröße.

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.

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.

Heute sorgen die Content Management Systeme schon automatisch dafür, dass Bilder in unterschiedlichen Größen für die Monitorklassen vom Handy bis zum Desktop-Monitor angelegt und eingesetzt werden. 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 gab es bereits das Picture-Modul.

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.

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.

Ü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 erkennt.

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.

Ü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.

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

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 im Base64-Format sind 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 (Alternativer Text)

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 des Bildes braucht auf jeden Fall einen kleinen Text für Besucher ohne Bildanzeige. Auch die Suchmaschinen beachten den Text des alt-Attributs zum Bild. Darum bieten die Content Management Systeme in ihren Mediatheken spezielle Felder zur Beschreibung des Bildes an.

Mehr zur responsiven Bildern

• Responsive Bilder mit Drupal 8 Drupal 8 hat Module für die automatische Erzeugung von unterschiedlichen Auflösungen bereits in den Core-Modulen.