Bilder deiner Website leichter machen, ohne Qualität zu verlieren

Ein Foto direkt vom Smartphone ist etwa 4.000 Pixel breit, während eine Blogspalte es mit etwa 800 anzeigt, auf einem hochauflösenden Smartphone- oder Laptop-Bildschirm mit 1.600 echten Pixeln. Es in voller Größe auszuliefern, verschwendet den Großteil des Downloads, und kein Format gleicht das aus.

Die Komprimierungs-Tools für JPG, PNG und WebP können die Größe für dich begrenzen: Die Stufe Ausgewogen begrenzt die längste Seite auf 2.560 Pixel, die Stufe Stark auf 1.600, und keine vergrößert je ein kleineres Bild. Stark passt für fast jedes Bild in einem Artikel, Ausgewogen für Fotos, die einen breiten Bildschirm füllen.

Wir sind von 17 Fotos mit etwa 12 Megapixeln ausgegangen, als hochwertige JPGs gespeichert, im Schnitt 1,5 MB, und haben sie durch die Tools dieser Seite geschickt. Allein die Umwandlung in WebP hat sie halbiert. Das Verkleinern hat viel mehr gebracht. Verkleinern und danach in WebP umwandeln hat das durchschnittliche Foto auf 56 KB gebracht, 96 % weniger als am Anfang.

Wandelst du ein bereits komprimiertes JPG ohne Qualitätswahl in WebP um, übernimmt das WebP die Qualitätsstufe dieses JPGs, und genau das hat es in unserem Test um 38–47 % verkleinert. Wählst du an dieser Stelle Hoch (85), verlangst du mehr Qualität, als das komprimierte JPG noch hat: Die JPGs der Stufe Stark wurden in der Qualität Hoch sogar etwas größer als die JPGs selbst, im Schnitt 100 KB statt 91. Wähle Hoch (85) oder Maximal (95) nur, wenn du vom originalen Foto in voller Qualität ausgehst.

Bewahre die Originalfotos als Master auf. Neue Web-Versionen in anderer Größe oder Qualität kannst du jederzeit erzeugen, verlorene Details aus einer zu stark komprimierten Kopie aber nicht zurückholen. Prüf das Ergebnis dort, wo deine Besucher es sehen, auf dem Smartphone: Sieht es dort gut aus, ist es gut genug.

Zwei kleine Ergänzungen auf der Seite lassen leichte Bilder noch besser laden. Gib jedem Bild im HTML seine Breite und Höhe mit, damit die Seite beim Laden nicht springt. Und ergänze bei Bildern weiter unten loading="lazy", damit der Browser sie erst lädt, wenn der Besucher in ihre Nähe scrollt. Alle aktuellen Browser unterstützen beides.

Die 17 Fotos sind die Unsplash-Fotografien, die Edubuntu mitbringt, auf 4.032 Pixel an der langen Seite verkleinert, wo sie größer waren, und als JPG mit Qualität 92 gespeichert. Jeder Schritt lief mit den angegebenen Einstellungen über die Tools dieser Seite, mit demselben Code und derselben ImageMagick-Version wie auf unseren Servern. Detailreiche Fotos schrumpfen weniger als ruhige, deine Ersparnis wird also um diese Durchschnittswerte schwanken.