Bilder im Blog: das Seitengewicht an einem Abend vierteln

Eine unserer Seiten wog 3,4 MB, davon 3,1 MB Bilder. Beschwert hat sich niemand, aber die Absprungrate auf dem Telefon war eindeutig. Drei Gewohnheiten haben das Meiste an einem Abend erledigt, ohne Themewechsel und ohne neue Erweiterung.

Bildformate: die richtige Kodierung vor dem richtigen Werkzeug

Ein Foto, das mit Qualität 100 als JPEG exportiert wird, wiegt zwei- bis dreimal so viel wie bei Qualität 75, bei einem Unterschied, den auf dem Bildschirm niemand sieht. In WebP verliert dasselbe Bild noch einmal 25 bis 35 Prozent. Bildschirmfotos von Oberflächen bleiben nur dann PNG, wenn der abgebildete Text gestochen scharf bleiben muss.

• standardmäßig mit Qualität 75 exportieren und nur nachbessern, wenn Flächen sichtbar leiden
• nach WebP wandeln, mit JPEG als Rückfallebene, sofern das Theme das beherrscht
• keine 3 000 Pixel breiten Bildschirmfotos unbearbeitet einfügen

Abmessungen: die eigentliche Quelle des Gewichts

Das Gewicht kommt selten vom Format, es kommt von der tatsächlichen Bildgröße. Eine Textspalte ist 700 Pixel breit: Ein Bild mit 2 400 Pixeln schickt neunmal zu viele Daten für dasselbe sichtbare Ergebnis. Wir skalieren auf höchstens 1 400 Pixel, das Doppelte für Bildschirme mit hoher Dichte, und lassen das Theme die kleineren Varianten erzeugen. Über fünfzig überarbeitete Beiträge fiel der Durchschnitt pro Seite von 3,4 MB auf 780 kB.

Ein Bild, das zwei Sekunden zum Erscheinen braucht, illustriert nichts mehr: Der Leser hat die Seite längst weitergeschoben.

Laden: verzögern, ohne die Anzeige zu zerstören

Verzögertes Laden ist im Browser eingebaut, ein Attribut genügt. Eine Ausnahme lohnt sich zu merken: Das Bild am Seitenanfang darf nie verzögert werden, denn an ihm misst der Browser die gefühlte Geschwindigkeit. Breite und Höhe im Quelltext anzugeben verhindert außerdem den Sprung im Layout, der den Text genau in dem Moment verschiebt, in dem jemand zu lesen beginnt.