JPG für das Web komprimieren

Auf einer typischen Inhaltsseite machen Bilder den Großteil der übertragenen Bytes aus, und das größte ist oft das Largest-Contentful-Paint-Element — die Kennzahl, die Core Web Vitals direkt misst. Ein Hero-Bild, das eine halbe Sekunde zu spät ankommt, verschiebt den LCP um eine halbe Sekunde, und ein LCP über 2,5 Sekunden ist die Schwelle, ab der eine Seite nicht mehr als gut gilt.

Der häufigste Fehler ist, die Datei direkt von der Kamera oder vom Designer auszuliefern. Ein 4000px, 5-MB-JPEG in einem 1200px-Container angezeigt überträgt etwa zwanzigmal mehr Daten, als das Layout darstellen kann. Der Browser verkleinert es beim Empfang, sodass der Besucher auf Details wartet, die verworfen werden, bevor überhaupt gemalt wird.

Qualität 78 liegt knapp unter dem Punkt, an dem JPEG-Artefakte bei fotografischen Inhalten wahrnehmbar werden, und 1920 Pixel decken die Anzeige in voller Breite auf der überwältigenden Mehrheit der Bildschirme ab. Zusammen reduzieren sie ein Hero-Bild normalerweise auf unter 300 KB. Die Qualität weiter zu erhöhen kostet sichtbare Wiedergabetreue für relativ wenig Gewicht; die Abmessungen weiter zu erhöhen wirkt auf hochauflösenden Bildschirmen weich.

Komprimierung ist jedoch nur ein Teil der Lösung, der Rest ist Markup. Setzen Sie explizite width- und height-Attribute, damit der Browser Platz reservieren und Layout-Verschiebungen vermeiden kann, fügen Sie loading="lazy" zu allem außerhalb der ersten Ansicht hinzu, und lassen Sie nur das eine Bild, das das LCP-Element ist, sofort laden. Ein modernes Format neben JPEG über ein picture-Element auszuliefern ist oft die nächstgrößte Verbesserung nach diesem Schritt.