Zurück zur Übersicht
25. Juli 2018

Webseite schneller machen (II): Bilder verkleinern

Die Dateigrösse von Bildern ist ein zentraler Faktor bei der Lade-Geschwindigkeit von Webseiten. Welche Dateigrösse ein digitales Bild hat, hängt primär von der Auflösung ab. In der Bildschirmdarstellung entspricht die Auflösung der Gesamtzahl an Pixeln.  Handykameras nehmen Fotos zwischen 8 und 20 Megapixel auf. Diese Auflösung übersteigt jene auf dem Bildschirm um ein Vielfaches. Um originale Kamerabilder vollständig anzuzeigen, müssen Browser die Fotos gleichsam optisch „zusammenstauchen“ („Scaling“). Die Browser sind aber für diese Aufgabe nicht spezialisiert – dabei leidet die Bildqualität. Außerdem müssen diese großen Fotos genauso vom Server heruntergeladen werden.

Schnelle Ladezeiten erzielen wir dann – wenn wir nur jene Bilder vom Server holen, die für unseren späteren Zweck (= Anzeige am Bildschirm)  die richtige Auflösung haben. Dazu müssen wir die Original-Bilder zuerst in einer Bildbearbeitungs-Software (Paint, Gimp, Photoshop, oder eine mobilen Foto-App) herunterrechnen („Bild verkleinern“).

Redaktionssysteme wie WordPress erledigen diesen Schritt durch ein Server-Skript automatisch.

Bein Herunterrechnen werden durch einen Algorithmus immer mehrere Pixel zu einem Durchschnitts-Pixel zusammengefasst. Die geringere Pixelzahl verringert die Dateigrösse im ähnlichen Ausmaß. Ein Foto im Format  1125 * 2436 Pixel am Screen des iPhone X belegt nur ein Viertel des Speicherplatzes der 12 Megapixel Originaldatei die von der Frontkamera geliefert wird. Der Nutzer kann im Browser trotzdem keinen Unterschied zum Original feststellen – einfach weil sein Bildschirm nicht mehr Pixel hat.

WordPress rechnet die Fotos für Postings zwar richtig herunter, speichert aber immer die (meist viel zu grosse) Originaldatei auf dem Server – die dann in der Detailansicht heruntergeladen wird.  Bilder für WordPress sollten daher vor dem Upload auf 2560 Pixel Breite heruntergerechnet werden (Stand 2018). Dafür gibt es natürlich zahlreiche Plugins. Standardmässig nehmen solche Resizing-Plugins das Verkleinern während des Uploads vor – und wirken sich NICHT auf  die bereits vorhandenen Bilder in der Mediendatei aus.  Mein Favorit ist das kostenfreie Imsanity – das zusätzlich ein Bulk-Resize Feature aufweist um auch bereits bestehende Fotos nachträglich zu verkleinern. Einige Plugins übernehmen auch gleich die Kompression der Bilder wie bespielsweise SmushIt  (Details im kommenden Teil III: Bildkompression)