Tools
Bilddateigröße für eine schnellere Website reduzieren
Schwere Bilder sind der mit Abstand größte Grund, warum Websites langsam wirken. Eine typische Produkt- oder Marketing-Seite liefert mehr als zwei Megabyte an Gewicht aus, und davon entfallen ungefähr die Hälfte auf Bilder, die in voller Auflösung, voller Qualität und im falschen Format ausgeliefert werden. Größere Dateien treiben Ihren Largest Contentful Paint über die 2,5-Sekunden-Marke, treiben die Absprungrate nach oben und kosten leise Conversions – jedes zusätzliche 100 KB auf einem Hero-Browser kostet messbar Engagement auf Mobilgeräten wie auf Desktop. Wenn Sie in diesem Quartal nur einen Performance-Pass machen, machen Sie ihn auf Bildern.
Warum schwere Bilder Ihre Seite ruinieren
Googles Core Web Vitals behandeln das größte Bild der Seite als das Largest Contentful Paint-Element. Der aktuelle Schwellenwert „Gut" liegt bei unter 2,5 Sekundenim 75. Perzentil echter Nutzer. Der HTTP Archive berichtet, dass die mediane Desktop-Seite inzwischen rund 2,5 MB wiegt und die mediane mobile Seite rund2,2 MB, wobei Bilder konsistent ungefähr 50 % dieses Gewichtsausmachen. Ein einzelnes 1,2-MB-Hero-Foto kann also entscheiden, ob Ihr LCP-Score grün, gelb oder rot ist – bevor Ihr sauber geschriebenes JavaScript überhaupt läuft.
Der Business-Case ist genauso klar. Googles eigene Forschung verknüpft eine Verbesserung der mobilen Ladezeit um eine Sekunde mit höheren Conversion-Raten in Retail-, Reise- und Lead-Gen-Websites. In wackeligen 4G-Verbindungen fühlen sich ein 600-KB-Bild und ein 60-KB-Bild wie zwei verschiedene Produkte an: das erste ruckelt beim Scrollen, das zweite rendert sofort. Bilddateigrößen zu reduzieren ist der günstigste Performance-Gewinn, der verfügbar ist – keine Server-Umstrukturierung, keine Architekturänderung, nur Bytes, die Sie gar nicht erst hätten ausliefern müssen.
Die 4-Schritte-Reduktions-Pipeline
Sie brauchen weder einen Bildoptimierungs-Dienst noch eine Build-Pipeline. Die gleichen vier Schritte, die in jeder modernen Bild-CDN laufen, können Sie im Browser erledigen, ein Bild nach dem anderen, in unter einer Minute. Führen Sie sie in dieser Reihenfolge aus, weil jeder Schritt auf dem vorherigen aufbaut.
| Schritt | Aktion | Typische Ersparnis |
|---|---|---|
| 1. Auf Anzeigegröße skalieren | Skalieren Sie das Bitmap auf die maximale Größe herunter, die das Layout tatsächlich rendert. Ein 4000×3000-Foto in einem 1200×600-Slot verschwendet mehr als 90 % seiner Pixel. | 60–80 % |
| 2. Qualität auf ~75–80 setzen | Schieben Sie den Qualitätsregler für Fotos auf ungefähr 75–80. Der visuelle Unterschied ist bei normalem Betrachtungsabstand nicht wahrnehmbar, die Byte-Ersparnis ist dramatisch. | 30–50 % |
| 3. In WebP umwandeln | Kodieren Sie das skalierte und neu quantisierte Bitmap als WebP. Gleiche Maße, gleiche Qualität, typischerweise ein Drittel der Bytes des ursprünglichen JPG oder PNG. | 25–35 % |
| 4. Metadaten entfernen | Entfernen Sie EXIF, IPTC, XMP, Farbprofile und Autoren-Kommentare. Ein Handyfoto kann 50–100 KB Metadaten tragen, die der Browser niemals rendert. | 2–10 % |
Übereinander gereiht reduzieren die vier Schritte ein 1,2-MB-Original routinemäßig auf unter 150 KB ohne sichtbaren Qualitätsverlust bei üblichen Web-Betrachtungsgrößen.
Hinweise pro Format
Verschiedene visuelle Aufgaben wollen verschiedene Formate. Wählen Sie nach Inhalt, nicht nach Reflex.
- Fotos. JPG mit Qualität 75–80 oder WebP in entsprechender Qualität. AVIF geht noch weiter, kostet aber Encode-Zeit und wird auf einer kleinen Zahl älterer Geräte nicht unterstützt – fallen Sie auf WebP zurück, wenn Kompatibilität zählt.
- Logos, Icons und UI-Grafiken. Behalten Sie die Transparenz mit PNG oder besser WebP mit Alphakanal. SVG ist für Line Art sogar noch kleiner und skaliert ohne Rasterartefakte – nutzen Sie es, wenn die Quelle Vektor ist.
- Illustrationen und Flachkunst. WebP oder PNG. WebP gewinnt bei Bytes, PNG bei universeller Unterstützung. Wenn Sie beides brauchen, erzeugen Sie ein WebP mit PNG-Fallback über das picture-Element.
Müssen Sie einen Ordner Legacy-Assets von einem Format in ein anderes überführen? DerBildkonverterübernimmt die Stapel-Umwandlung in JPG, PNG, WebP und AVIF in einem einzigen Durchgang, mit Side-by-Side-Vorschau, damit Sie den Qualitätskompromiss sehen, bevor Sie sich festlegen.
Ein Budget setzen
Optimierung ohne Budget erzeugt nur etwas kleinere Bilder. Geben Sie jeder Kategorie auf der Seite eine harte Byte-Obergrenze, erzwingen Sie sie in CI, und beobachten Sie, wie das durchschnittliche Seitengewicht zusammenbricht. Ein pragmatisches Startbudget für eine inhaltsgeführte Seite:
- Hero-Bild: unter 100 KB. Das ist Ihr LCP-Element. Alles, was schwerer ist, bezahlen Sie in den Core Web Vitals.
- Galerie-Thumbnails: jeweils unter 50 KB.Multiplizieren Sie mit der Anzahl der Thumbnails über dem Knick – das ist ein Budget, das Sie verteidigen können.
- Open-Graph-Bild: unter 200 KB. Crawler und Social-Vorschauen rufen das ständig neu ab; eine enge Obergrenze hält Link-Unfurls schnelle.
- Gesamtgewicht der Above-the-Fold-Bilder: unter 300 KB.Wenn Sie das reißen, rettet Sie auch kein Code-Splitting mehr.
Führen Sie die 4-Schritte-Pipeline aus, kleben Sie die Ausgaben in das obige Budget und liefern Sie aus. Schnellere Seiten, bessere Core Web Vitals, zufriedenere Besucher – und jedes Byte, das Sie einsparen, ist ein Byte, das Sie nicht ausliefern müssen.