[HowTo] Bilder für das Web optimieren, Ladezeiten verkürzen

speed

Wie heißt es doch so schön: Ein Bild sagt mehr als 1.000 Worte… Auch im Internet gilt dieser Satz, aber mit einem Zusatz: Es ist aber auch viel größer als 1.000 Worte! Bilder sind echte Bandbreiten-Killer – da nützt auch das schönste Responsive Layout nichts, wenn Oma daheim mit ihrem tollen iPhone zwanzig Sekunden Ladezeit hat (und das ausnahmsweise mal nicht an ihr liegt). Ja, richtig gelesen: Bilder für das Web optimieren und damit Ladezeiten verkürzen sind wichtiger als euer Responsive Layout.

Ihr seid noch nicht richtig überzeugt? Dann macht doch mal den Test auf eurer Website:

  • Geht auf eure Startseite.
  • Nun öffnet in eurem Browser die Entwicklertools. In Chrome finde ihr diese unter Weitere Tools > Entwicklertools, im Firefox unter Entwicklerwerkzeuge > Inspektor. Nun öffnet sich in eurem Browser ein Bereich, entweder im unteren oder rechten Bereich eures Browserfensters.
  • In den Entwicklertools geht ihr auf den Reiter „Network“ (Chrome) bzw. „Netzwerkanalyse“ (Firefox).
  • Drückt nun Strg+F5 (auf dem Mac: Shift+cmd+R). Damit löscht ihr euren Browser-Cache und ladet die Seite so, als wärt ihr noch nie auf der Seite gewesen.
  • Nun schaut euch einmal an, wie viele Kilobytes für eure Seite geladen werden mussten, und wie viel Zeit euer Browser dafür gebraucht hat (Page Load). Ihr findet die Info am unteren rechten Fensterrand der Entwicklertools:
Netzwerkanalyse im Firefox
Netzwerkanalyse im Firefox

Steht hier ein Wert, der größer als 2 Sekunden ist? Dann besteht definitiv Handlungsbedarf! Die Kilo(byte)s müssen also runter. Fangen wir an:

Schritt 1: Bilder für das Web optimieren

Bilder für das World Wide Web zu optimieren, beginnt mit der Frage, welche Dateiformate im Web verwendet werden sollten. Das lässt sich ziemlich einfach beantworten: JPEG und PNG. Nothing more. Really.
Dabei gibt es nur eine Regel: Sobald im Bild ein sogenannter „Alpha-Kanal“ enthalten ist, also ein Teil des Bildes transparent sein soll, wird PNG verwendet. In der Regel also bei Logos, Icons etc. Bei allem anderen verwendet ihr JPEG.

Kein Mensch benötigt auf einer Website Bilder mit 3.000 Pixeln Breite, die allenfalls auf 4K-Monitoren eine gute Figur machen. Daher bietet es sich an, die Bilder gleich zuzuschneiden, sodass sie nur so groß sind, wie sie auch tatsächlich auf der Seite dargestellt werden. Dazu benötigt ihr nicht unbedingt ein Bildbearbeitungsprogramm, sondern könnt das Bild auch einfach mal mit „Paint“ (Windows) oder der „Vorschau“ (Mac) kleiner abspeichern.

Doch auch diese bereits verkleinerten JPEG’s und PNG’s besitzen immer noch Verkleinerungspotenzial, ohne dabei einen Qualitätsverlust hinnehmen zu müssen. Überflüssiges wie beispielsweise Metadaten fliegen dann auch gleich mit raus. Um Bilder schnell und kostenlos zu verkleinern, gibt es den Webservice JPEGmini. Nach dem Upload des Fotos wird eine verkleinerte Version der Datei zum Download angeboten:

JPEG-Dateien verkleinern mit JPEG mini
JPEG-Dateien verkleinern mit JPEG mini

Alernativ gibt es auch lokale Programme zum (kostenlosen) Download, z.B. Riot für Windows, oder iResize für Mac. Damit lassen sich auch ganze Ordner mit Bildern verkleinern – Sie können also alle bereits hochgeladenen Bilder der Website einfach mal gebündelt herunterladen, verkleinern, anschließend wieder auf den Server laden und schauen, was es gebracht hat. Die Programme können viele Formate verarbeiten – iResize kann sogar das Mac-Format TIFF umwandeln und verkleinern – jedoch sollten Sie sich auf JPEG beschränken und das PNG-Format wirklich nur bei Bildern mit transparentem Hintergrund verwenden.

Sollte es etwas komplexer bei der Bildbearbeitung werden (Bildausschnitt festlegen, Farben anpassen, Dateiformat ändern), könnt ihr z.B. das kostenlose Programm GIMP nutzen. Sucht ihr hingegen eine professionelle Lösung (um beispielsweise auch Vektorgrafiken zu erstellen) und ihr möchtet nicht das total tolle Photoshop-Abo-Modell ausprobieren, dann kann ich euch eine günstige Alternative empfehlen: Affinity Photo und Affinity Designer. Die Oberflächen beider Programme sind unheimlich chic und ich arbeite ausschließlich damit:

Die Oberfläche von Affinity Designer - stark angelehnt an das Design von Adobe Photoshop
Die Oberfläche von Affinity Designer – stark angelehnt an das Design von Adobe Photoshop

Da ich keine Photoshop-Erfahrung habe, macht es mir auch nichts aus, dass manche Features nicht dort zu finden sind, wo „man“ (also der Photoshop-Nerd) sie erwartet (dasselbe Phänomen hat man ja auch, wenn man von MS Office auf LibreOffice umsteigt). Der Preis hält sich wirklich im Rahmen, die beiden Programme schlagen mit jeweils ca. 50€ zu Buche (kein Abo!). Und nein, ich mache keine Werbung dafür, überzeugt euch selbst, indem ihr euch einmal die Testversion schnappt.

Auch die hier generierten Bilder würde ich noch einmal durch ein Tool wie JPEGmini, Riot oder iResize durchjagen.

Schritt 2: Responsive Bilder

Jeder, der einmal eine Website erstellt hat (unabhängig davon, ob er selbst programmiert oder vorgefertigte Themes verwendet) hat mit Sicherheit schon einmal von dem Terminus „Responsive Webdesign“ gehört. Dieses wird – vereinfacht gesagt – dazu verwendet, die User Experience einer Website auf jedem Device zu maximieren. Das heißt aber in der Konsequenz , dass Responsive Webdesign eben NICHT (wie viele denken) bei einem Responsive Layout aufhört! Denn zur User Experience gehören auch weitere Merkmale, die es zu optimieren gilt, wie z.B.

  • Größe und Auflösung von Bildern
  • Schnelle Ladezeit der Seite

Ersteres bringen die gängigen Themes, die sich in den weit verbreiteten CMS WordPress, Joomla usw. auswählen lassen, in der Regel bereits mit. Sie sind  responsive, brechen also bei Mobilgeräten mehrspaltige Seiten um und stellen Bilder dann über die gesamte Bildschirmbreite dar.

Der zweite Punkt ist nicht so trivial. Abgesehen davon, dass man noch einiges durch Caching der Seiten herausholen kann, dürfte der Knackpunkt bei vielen Websites die Bilder sein. Es wäre also empfehlenswert, wenn die Website schon wüsste, ob gerade ein Handy oder ein PC auf sie zugreift. Dann könnte die Website selbst entscheiden, in welcher Größe es das Bild ausliefert und dadurch eine Menge an Bandbreite sparen. Das CMS Typo3 bietet sogenannte Responsive Bilder bereits out of the box an (Responsive Images in TYPO3). Andere CMS – insbes. Worpress und Joomla – müssen hier nachgerüstet werden. Doch zuerst einmal:

Wie funktionieren Responsive Bilder?

Jedes Bild, das auf einer Website angezeigt werden soll, wird in mehreren Auflösungen auf dem Webserver abgespeichert. Bei einem Aufruf der Seite entscheidet dann die Website, welches Bild er dem Nutzer ausliefern möchte – Geräten mit einer geringen Bildschirmbreite gibt er also folglich ein Bild mit niedriger Qualität aus. Die Funktionalität, Bilder in mehreren Auflösungen abzuspeichern und bereitzustellen, existiert leider (noch) nicht in CSS3 oder HTML5. Das heißt, Sie müssen hier auf externe Lösungen zurückgreifen, die diese Bilder automatisch generieren (Nein, Sie sollen nicht jedes Bild in 5 verschiedenen Auflösungen hochladen! 🙂 ). Bewährt und außerdem schnell zu installieren haben sich folgende Lösungen:

Framework "Adaptive Images" von Scott Jehl
Framework „Adaptive Images“ von Matt Wilcox

Eingebunden werden die Scripte auf der Website entweder selbst durch einige wenige Code-Anpassungen, oder über Plugins für die jeweiligen CMS.

Liste mit Plugins für Worpress, Joomla, Typo3 und Drupal

Wer sich zutraut, einige wenige Zeilen Code zu kopieren (oder eben ein echter „Maker“ ist, der wissen will, was auf seiner Website geschieht), der kann es auch sehr einfach selbst einbinden. Folgende Anleitung bindet das Framework „Adaptive Images“ ein und anders als der Titel suggeriert ist es keine Anleitung für WordPress, sondern ist auf jedem CMS analog durchführbar, sofern man einige Pfade anpasst:

Using Adaptive Images in a WordPress Responsive Design

Schreibe einen Kommentar

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