„Bildübermittlung verbessern“ in PageSpeed Insights beheben

1. 01Öffne die betroffene Seite in PageSpeed Insights oder Lighthouse. Wähle Mobil- oder Desktopbericht, klappe „Bildübermittlung verbessern“ auf und notiere markierte Bild-URL und Änderungsvorschlag.
2. 02Finde das Bild auf der Seite. Vergleiche in den Browserwerkzeugen die heruntergeladene Datei mit den angezeigten Maßen unter Berücksichtigung der Pixeldichte. Prüfe die gewählte Quelle, nicht nur das Original der Mediathek.
3. 03Werden zu viele Pixel geliefert, korrigiere zuerst responsive Größen oder Theme-Einstellungen. Stimmen die Maße, vergleiche Komprimierung oder ein unterstütztes anderes Format.
4. 04Bereite im Bildeditor eine Kopie mit benötigten Maßen vor. Nutze für passende Dateien den Bitinz-Bildkompressor und prüfe Schrift, Kanten, Transparenz und Verläufe vor dem Ersetzen.
5. 05Veröffentliche Ersatzbild oder Vorlagenänderung. Prüfe, dass die Seite das neue Bild statt einer alten Cacheversion anfordert, und wiederhole den Bericht mit gleicher Geräteeinstellung.

Chrome schätzt Einsparungen aus Downloadgröße und einem effizienten Bytes-pro-Pixel-Verhältnis des Formats. Geschätzte Einsparungen unter 4 KiB werden nicht markiert. Das ist eine Berichtsschwelle, keine empfohlene Maximalgröße.

Lighthouse 13 ersetzte ältere Bildprüfungen durch diesen Hinweis; Lighthouse 12 zeigte Hinweise bereits standardmäßig. Formatprobleme, zu große Maße und schwere Animationen benötigen unterschiedliche Lösungen. Den gesamten Ablauf erklärt Bilder für Websites komprimieren.

• WordPress: prüfe die im Block oder Theme gewählte Bildgröße und das tatsächliche Markup srcset und sizes. WordPress erzeugt responsive Kandidaten, doch eigene Vorlagen oder falsche Layoutangaben können ungeeignete Größen ausliefern. Nur das Original zu ändern kann vorhandene Kopien weiter in Gebrauch lassen.
• Shopify: das CDN optimiert Shopbilder bereits einschließlich Formatauswahl. Laut Shopify ist manuelle Komprimierung vor dem Upload unnötig. Prüfe bei Hinweisen angeforderte Breite und responsives Markup des Themes, statt die Quelle wiederholt zu verschlechtern. Theme-Entwickler können image_url und image_tag prüfen.
• Next.js: nutze responsive Einstellungen der Image-Komponente und ein zum Layout passendes sizes, besonders bei fill. Ohne passenden Wert kann ein schmales Bild als fensterbreit gelten und ein größeres heruntergeladen werden. Nur die Qualität zu ändern behebt diesen Layoutfehler nicht.

Behalte ein bearbeitbares Original. Vergleiche bei unabhängig ausgelieferten Bildern echte Größe und Aussehen; der JPG-, PNG- und WebP-Vergleich hilft. Bitinz ändert keine Maße. WebP-Konvertierung kann vergrößern: Behalte die zur Seite passende Version.

Für wiederkehrende Veröffentlichungen verarbeitet die Entwickler-API geeignete Dateien mit Konto und Monatskontingent. Sie repariert weder Theme-Markup noch responsives Layout. Prüfe die ausgelieferte Seite auch nach der Automatisierung.

• Die markierte URL entspricht dem geänderten Bild und seiner Version.
• Der Browser wählt auf Telefonen und breiten Bildschirmen passende Quellen.
• Die Komprimierung erhält wichtige Details, Transparenz und sanfte Verläufe.
• Das sichtbare Hauptbild wird nicht durch ungeeignetes verzögertes Laden aufgehalten.
• Der neue Bericht nutzt dieselbe Geräteeinstellung; Aussehen und Laden sind ebenfalls geprüft.