Auf den meisten Seiten macht ein einziges Bild mehr Datenmenge aus als sämtlicher Code zusammen. Drei Handgriffe ändern das.
Die richtige Größe schlägt jedes Format
Ein Foto mit 4000 Pixeln Breite in einer Spalte von 700 Pixeln ist unabhängig vom Format Verschwendung. Der erste Schritt ist deshalb nie die Kompression, sondern die Frage, wie breit das Bild tatsächlich dargestellt wird.
Drei bis vier Breiten decken vom Telefon bis zum großen Bildschirm alles ab.
srcset lässt den Browser entscheiden
Mit srcset stehen mehrere Fassungen zur Wahl, und der Browser nimmt die passende — er kennt Fenstergröße und Pixeldichte, der Server nicht. Wichtig ist, dass die Angaben stimmen: ein falsch gesetztes sizes führt dazu, dass zuverlässig die größte Fassung geladen wird.
WebP als zusätzliche Quelle, nicht als Ersatz
WebP spart gegenüber JPEG grob ein Viertel bis ein Drittel. Ausgeliefert wird es über <picture> mit einer zusätzlichen <source>, während das <img> weiterhin die ursprüngliche Datei trägt — damit bleibt jeder Browser bedient, ohne dass jemand Kennungen auswerten muss.