Bilder für das Web optimieren

Wie ein Bild richtig für das Internet aufgearbeitet wird erfährst du in diesem Blog, denn: optimierte Bilder im Web machen schneller „Peng!“. Will man auf seiner Website Bilder in ausreichender Qualität und Schärfe anzeigen, geht das immer auf Kosten der Ladezeit und sollte daher gut durchdacht und auf das nötigste beschränkt werden. Bereits nach drei Sekunden Ladezeit brechen ein Drittel der Besucher und potentiellen Kunden genervt ab.

Falls du noch in der Planung deiner Webseite stehst, solltest du dir Gedanken über das Seitenverhältnis der Bilder machen. Die Zeiten in denen ein Monitorstandard von 4 : 3 galt sind längst vorbei. Die Großzahl unserer Displays haben ein querformatiges Seitenverhältnis von 16 : 9.

Für ein Gestaltungsraster bietet sich z.B. ein Format im Verhältnis von 9 : 6 an. Das ist ein gängiges Format für Online-Medien und passt von den Proportionen gut in die meisten Layouts. Auch beim Teilen auf Sozialen Netzwerken machst du mit diesem Format nichts falsch. Aus den Proportionen 9 : 6 ergeben sich unterschiedliche Möglichkeiten: Wenn du weißt, dass du eher kleine Bilder zur Verfügung hast, empfiehlt es sich, 720 x 480 Pixel als Standard-Format zu verwenden.

Der Trend geht jedoch in allen Medien aufgrund von immer schnelleren Internetverbindungen und hochauflösenden Retina-Displays zu eher größeren Bildformaten. Wenn du mit imposanten Bildern überzeugen willst, wählst du ein Format von 960 x 540 oder 1080 x 720 Pixeln wie bei dem nachfolgende Beispielfoto. Aber aufgepasst: Wenn du nicht gerade ein Fotografie-Portfolio veröffentlichst, solltest du das als Richtwert für deine Maximalgröße sehen. Alles andere wäre verschwendete Ladezeit.

Matterhorn
jpg Bildformat 1080 x 720 mit 102kb

Bildoptimierung für eine kürzere Ladezeit

Die Bildkomprimierung ist ein sehr guter Weg um Ladezeiten einer Webseite zu verkürzen und beeinflusst das Ranking deiner Website ebenfalls und sollte daher nicht vernachlässigt werden. Google erkennt, in wie weit Bilder komprimiert sind und bewertet zu große Dateigrößen als schlecht!

Es gibt drei universell unterstützte Web-Bildformate: GIF, PNG und JPEG. Neben diesen Formaten unterstützen manche Browser auch neuere Formate wie WebP, JPEG XR und JEPG 2000, die eine insgesamt bessere Komprimierung (im Durchschnitt eine Verringerung der Dateigröße um 30 %) und weitere Funktionen bieten.

Format Transparenz Animation Browser
GIF Ja Ja Alle
PNG Ja Nein Alle
JPEG Nein Nein Alle
JPEG XR Ja Ja IE
WebP Ja Ja Chrome, Opera, Android

Für geometrischen Formen unbedingt eine Konvertierung in das Vektorformat SVG erwägen!

Wie groß darf das Dateivolumen für ein Bild sein?

High DPI (HiDPI)-Bildschirme ermöglichen die Darstellung wunderschöner Bilder. Allerdings erfordern hochauflösende Bildschirme auch hochauflösende Bilder! Die Bildobjekte müssen detailreicher sein, um von den höheren Gerätepixelzahlen profitieren zu können.

Vektorformate bevorzugen

Positiv ist zu bewerten, dass Vektorgrafiken sich für diese Aufgabe ideal eignen, da sie in jeder Auflösung scharf dargestellt werden können. Zwar können für das Rendern der feineren Details höhere Verarbeitungskosten anfallen, aber das zugrundeliegende Objekt ist identisch und bietet stets scharfe Resultate, weil sie unabhängig von Auflösung und Größe sind.

Auf der anderen Seite stellen Rastergrafiken eine wesentlich größere Herausforderung dar. Wenn wir die Auflösung des Monitors verdoppeln, nimmt die Gesamtzahl der Pixel um den Faktor vier zu: die doppelte Anzahl der horizontalen Pixel mal der doppelten Anzahl der vertikalen Pixel. Bei einem Bildschirm mit doppelter Auflösung vervierfacht sich also die Zahl der erforderlichen Pixel! Bildoptimierung ist hier oberstes Gebot.

Mit den Qualitätseinstellungen für Rasterformate experimentieren

Bei Verwendung eines verlustbehafteten Formats wie JPEG steht in dem Komprimierungsdialog in der Regel eine anpassbare Qualitätseinstellung zur Verfügung. Experimentieren Sie mit verschiedenen Qualitätseinstellungen für Ihre Bilder und schrecken Sie nicht davor zurück, die Qualität herabzusetzen: Die visuellen Resultate sind oftmals sehr gut und die Verringerung der Dateigröße kann erheblich sein.
Beachte, dass Qualitätsstufen für unterschiedliche Bildformate aufgrund der verschiedenen Algorithmen zur Codierung der Bilder nicht direkt vergleichbar sind: JPEG mit Qualitätsstufe 60 unterscheidet sich erheblich von WebP mit Qualitätsstufe 60. Tatsächlich kann auch eine Qualitätsstufe für dasselbe Bildformat aufgrund des Bildinhaltes zu unterschiedlichen Komprimierungsergebnis führen!

Unnötige Metadaten von Bildern entfernen

Viele Rastergrafiken enthalten unnötige Metadaten zum Objekt: geografische Informationen, Kamerainformationen und so weiter. Entferne diese Daten mit geeigneten Tools aber gebe deine eigenen Copyrightdaten und das Farbprofil sRGB den Bilddaten mit.

Skalierte Bilder bereitstellen 

Stell sicher, dass bei statischen Bildgrößen die angezeigte Größe im Web so weit wie möglich der ursprünglichen Größe des jeweiligen Bildes entspricht! Zusätzlich eine oder mehrere optimierte Bildvariante für die hochauflösende Bildschirme (_@2x) oder gar für UHD (_@3x). Ich rate hier zu einer maximalen Größe bis zu 200 KB für ein normales Bild, welches im Contentbereich untergebracht wird.

HTML-Beispiel für Webimplementierung unterschiedliche Bildschirmauflösungen:

<img src=“meinBild.jpg“ srcset=“meinBild.jpg 1x, meinBild_@2x.jpg 2x, meinBild_@3x.jpg 3x“ alt=“Text zum Motiv”>

 

Guidelines für Responsive Bilder

Responsive Bilder auf der Website benötigen Bildvarianten hinsichtlich ihrer Breite (w). Unterschiedliche Bildinhalte ergeben unterschiedliche Anforderungen hinsichtlich der Anzahl der “Breakpoints”, also wann eine neue Bildgrößenvariante nötig wird.

Breakpoints-Beispiel
Breakpoints-Beispiel bei ca. 60k Filesize-Differenz für Bildweiten von 360px bis 1920px

Ein Onlinegenerator dafür findet ihr bei „Claudinary„: Make Image Breakpoints with 20-80K File-Size Jumps between the smallest size of the image and the largest size of the image. Sample Page. See how the number of breakpoints vary even through all the images start with the same resolution end points.

HTML-Beispiel für die Einbindung von Responsive Images nach obigen errechneten Breakpoints:

<img sizes=“(max-width: 1920px) 100vw, 1920px“
srcset=“matterhorngipfel_360.jpg 360w, matterhorngipfel_715.jpg 715w, matterhorngipfel_961.jpg 961w,matterhorngipfel_1148.jpg 1148w,matterhorngipfel_1283.jpg 1283w, matterhorngipfel_1414.jpg 1414w, matterhorngipfel_1535.jpg 1535w, matterhorngipfel_1650.jpg 1650w, matterhorngipfel_1748.jpg 1748w, matterhorngipfel_1848.jpg 1848w, matterhorngipfel_1919.jpg 1919w, matterhorngipfel_1920.jpg 1920w“ src=“matterhorngipfel_1920.jpg“ alt=“Mountaintop of Matterhorn”>

Einen passenden Dateinamen vergeben

Dateinamen sind jedoch gerade bei Bildern extrem wichtig, um von der Suchmaschine erkannt zu werden. Besonders wichtig ist es, dass der Name den Bildinhalt präzise beschreibt. Für das Web zu speichern bedeutet auch, die Datei webkonform zu benennen. Konkret:

  • keine Umlaute wie ä,ö,ü
  • keine Sonderzeichen wie ß,‘,?
  • keine Leerzeichen

Ein optimaler Dateiname sieht zum Beispiel so aus: weisze-maeuse.jpg.

Mit Photoshop richtig für’s Web speichern

Bildoptimierung mit dem "für Web speichern" Dialogfenster
das „Für Web speichern“ alte Dialogfenster aus CS6

Im Gegensatz zum normalen „Speichern-unter“-Prozess, bietet Photoshop die Möglichkeit Bilder für das Web optimiert zu speichern. Den Befehl dazu findest du in den älteren Photoshopversionen unter dem Menüpunkt „Datei“ > „Für Web speichern“.

Mit Photoshop CC wurde dieser Dialogfenster endlich modernisiert. Das neue „Bild-Assets“ basiert auf einer neuen Technologie namens „Adobe Generator“, die mit Photoshop CC 14.1 eingeführt und mit CC 2015.5 weiter verbessert wurde. Wenn die Bild-Assets aktiviert sind, erzeugt Photoshop automatisch einen Ordner am Speicherplatz der Photoshop-Datei, bzw. auf dem Desktop wenn das Dokument ungespeichert ist. In diesen Ordner exportiert Photoshop dann automatisch den Inhalt bestimmter Ebenen und aktualisiert die Bild-Dateien, sobald innerhalb der Bildbearbeitung eine Änderung stattgefunden hat.

Damit der Echtzeit-Export funktioniert, müssen die Ebenen allerdings einer festgelegten Namensgebung folgen.

Bild-Dateien in Echtzeit generieren lassen

Um Bild-Assets zu verwenden, aktiviere zunächst die entsprechende Photoshop-Funktion unter „Datei > generieren > Bild-Assets“. Die Funktion ist bei neuen Dokumenten ausgeschaltet. Sobald das Programm mindestens eine Ebene anhand einer Reihe von vorgegebenen Schlüsselbezeichnungen erkennt, erstellt Photoshop einen neuen Ordner und legt die Ebenen als exportiere Datei darin ab. Ändert ihr den Inhalt der Ebene wird diese Datei aktualisiert.

Standard-Export mit Dateinamen und Dateiendung

Die einfachste Variante der Schlüsselbezeichnung beinhaltet lediglich den gewünschten Dateinamen, sowie die Dateiendung. Photoshop exportiert dann diese Ebenen als Webdatei in den Ordner.

beispieldatei.jpg
Erzeugt eine JPG-Datei mit dem Namen „beispieldatei“ und 80% Qualität.

beispieldatei.png
Erzeugt eine PNG32-Datei mit dem Namen „beispieldatei“

beispieldatei.gif
Erzeugt eine GIF-Datei mit dem Namen „beispieldatei“

beispieldatei.jpg4
Erzeugt eine JPG-Datei mit 40% Qualität. Mögliche Werte (1-10)

beispieldatei.jpg7%
Erzeugt eine JPG-Datei mit 7% Qualität. Mögliche Werte (1-100%)

Ihr könnt sogar mehrere Dateien parallel exportieren lassen. Trennt dazu die Bezeichnungen im Dateinamen einfach per Komma.

beispieldatei.jpg, 200% beispieldatei_@2x.jpg
Erzeugt eine JPG-Datei mit 100% Größe sowie eine JPG-Datei mit 200% Größe und dem Suffix @2x.

WebP

Das „weppy“ ist ein Bildformat, welches von Google 2010 ins Leben gerufen wurde und einige Vorteile gegenüber PNG und JPG hat. Es erreicht bei sehr hoher Komprimierung mehr Bildqualität pro Datenmenge als ein JPEG, besonders effektiv bei der Komprimierung von detailarmen, gleichförmigen Bildteilen. Eure Bilder könnt ihr in das WebP-Format online konvertieren . Es gibt aber auch einen kostenlosen Plug-In für Photoshop zum download Webp Plugin For Mac und für Window-User. Mit dem WebP-Format können auch Animationen (wie Gif) wiedergegeben werden. Auf dem Online-Tool können mp4, AVI und mov-Dateien bis 100MB hochgeladen konvertiert werden. Nach meiner Recherche (Dez 2016) das einzige funktionierende Onlinetool (Betaversion) das auch diverse Effekte anbietet, aber leider haben die Animationen viele Artefakte.

Bildoptimierung mit dem WebP Photoshop Plugin
Popup-Fenster des WebP-PlugIn im „Speichern unter“ Menü

Fallbacks beim WebP-Bildformat

Dem Vorteil der kleineren Bilddateien wie des WebP-Formates, steht der Nachteil dass diese noch nicht universell unterstützt werden gegenüber. Google honoriert diese kleinere Dateien zwar positiv im Ranking, der Gebrauch erfordert aber auch das ein JPEG-Fallback bereit gestellt wird.

HTML-Beispiel für Browser, die kein WebP-Format anzeigen können:

<picture>
<source srcset=“beispielbild.webp 1x, beispielbild_@2x.webp 2x” type=“image/webp“>
<source srcset=“beispielbild.jpg 1x, beispielbild_@2x.jpg 2x” type=“image/jpeg“>
<img src=“beispielbild.jpg“ alt=“Text zum Motiv”>
</picture>

Damit können alle old Browser, die auch kein <picture> Tag unterstützen, zumindest die Bildquelle anzeigen welche im <img> Tag angegeben wurde.

Zum Test ob dein Browser ein WebP Bildformat anzeigen kann.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.