Bilder fürs Web optimieren: Formate, responsive Größen und Ladeprioritäten
Eine kleinere Datei hilft, wenn der Browser das passende Bild zum richtigen Zeitpunkt erhält.
Tools
Schätzen Sie Byte-Ersparnisse für bereits erstellte oder gemessene Bildvarianten.
Weniger übertragene Daten bedeuten nicht proportional kürzere Ladezeiten. Parallele Downloads, Caching und Netzgeschwindigkeit beeinflussen das Ergebnis. Nutzen Sie die Schätzung zur Priorisierung, nicht als Versprechen.
Der Rechner komprimiert und überträgt keine Dateien und ruft keine Seite ab. Er verarbeitet Ihre Zahlen im Browser. Vergleichen Sie gleichwertige Inhalte und Qualitätsanforderungen: Ein kleines Vorschaubild ersetzt nicht zwangsläufig ein großes Produktfoto.
Gesparte Bytes ergeben sich aus Originalgröße minus optimierter Größe. Die prozentuale Reduktion teilt diese Differenz durch die Originalgröße und multipliziert mit 100. Verwenden Sie eine positive Originalgröße; null ist kein sinnvoller Nenner für diese Berechnung.
Die Seitensumme addiert die eingegebenen Ersparnisse. Die Monatsschätzung multipliziert sie mit Ihren Seitenaufrufen. Das sind Rechenszenarien, keine beobachteten Traffic- oder Bandbreitenwerte. Verwenden Sie die Einheitenkonvention der Oberfläche durchgehend.
Die Schätzung nimmt an, dass alle aufgeführten Bilder bei jedem Aufruf heruntergeladen werden. Tatsächlicher Transfer hängt von Browser- und Edge-Cache, responsiver Auswahl, Lazy Loading, Wiederbesuchen und Scrolltiefe ab. Manche Aufrufe laden nur einen Teil der eingetragenen Dateien.
Ist die optimierte Datei größer, prüfen Sie Quelle und Export. Ein anderes Format ist nicht automatisch kleiner. Behalten Sie eine gültige negative Ersparnis bei, statt daraus eine positive Werbeaussage zu machen.
Nein. Entdeckung, Netzwerk, parallele Downloads, Dekodierung und Rendering beeinflussen das Timing. Das größte sichtbare Bild kann trotz kleiner Datei spät erscheinen, weil der Browser es spät entdeckt.
Die LCP-Anleitung hilft bei der Phasenanalyse. Der Rechner vergleicht Transferänderungen, kann jedoch LCP oder Lighthouse-Punkte nicht allein aus Dateigrößen vorhersagen.
Vergleichen Sie vor und nach der Änderung die tatsächlich gewählte Ressource unter denselben Viewport- und Gerätebedingungen. srcset kann mehrere Kandidaten anbieten; Displays mit hoher Pixeldichte können andere Dateien auswählen.
Prüfen Sie die echte Anfrage in den Browserwerkzeugen. Die Bildoptimierungsanleitung erklärt sizes, Kandidatenbreiten und dargestellten Platz. Führen Sie getrennte Berechnungen durch, wenn Mobil- und Desktopansichten wesentlich andere Assets laden.
Als Planungsszenario. Dokumentieren Sie angenommene Aufrufe, Bildbestand und ob Cache oder Teilabrufe die Vollständigkeitsannahme unrealistisch machen. Beschreiben Sie die Zahl nicht als gemessene Rechnungssenkung oder garantierte Geschäftseinsparung.
Vergleichen Sie nach Veröffentlichung tatsächlichen Transfer und Nutzererfahrung, soweit messbar. Erhalten Sie Qualität, informative Alternativtexte und stabile Abmessungen bei effizienterer Auslieferung.
Eine kleinere Datei hilft, wenn der Browser das passende Bild zum richtigen Zeitpunkt erhält.
Nicht immer ist das größte Bild das Problem. Die Wartezeit vor seinem Download kann wichtiger sein.