Ein komprimiertes großes Bild bleibt eine große Wahl
Ein kleiner Bildplatz macht den Download nicht kleiner. Erhalten alle Besucher dasselbe Foto in voller Größe, kann ein Smartphone unnötige Pixel laden. Kompression und responsive Auswahl lösen unterschiedliche Teile dieses Problems.
Unser Website-Ablauf erklärt die Vorbereitung; der Ratgeber zur Bildauslieferung verbindet sie mit Leistungsdiagnosen. Dieses Experiment verfolgt ein Foto bis zur tatsächlichen Browserwahl, ohne einen Punktwert zum Ergebnis zu erklären.
Varianten vorbereiten, den Browser beobachten
Vor der Kompression erstellten wir proportionale Kopien in einem externen Bildeditor; Bitinz skalierte sie nicht. Am 2026-10-29 wurde jede Kopie lokal mit Ausgewogen verarbeitet. Aufgezeichnete Maße, Bytes und Prüfsummen identifizieren die im Browser getesteten Varianten.
Die lokale Seite bot Varianten über srcset mit passender sizes-Regel an. Erfasst wurden Fensterbreite, Pixeldichte und gewählte Ressource. Das misst Bilddaten, keine vollständige Seitenladung oder simulierte Mobilverbindung. Unsere Redaktionsrichtlinie erläutert die Nachweise.
Die vorbereiteten Dateien hinter der Auswahl
Vergleiche hier die Varianten und danach das in den Quellen verlinkte Browserprotokoll. Der Browser kann nur tatsächlich angebotene Dateien auswählen.
| Bild | Pixel | Ausgabe | Stufe | Vorher | Nachher | Ersparnis |
|---|---|---|---|---|---|---|
photo-4000.jpg | 4000 × 2667 px | JPG | Ausgewogen | 2032.6 KB | 595.9 KB | 70.7% |
photo-1600.jpg | 1600 × 1067 px | JPG | Ausgewogen | 393.1 KB | 129.0 KB | 67.2% |
photo-800.jpg | 800 × 533 px | JPG | Ausgewogen | 116.0 KB | 40.0 KB | 65.5% |
photo-400.jpg | 400 × 267 px | JPG | Ausgewogen | 34.2 KB | 12.4 KB | 63.7% |
Bitinz · 1 KB entspricht 1000 Byte.
Was der Browser tatsächlich heruntergeladen hat
| Fenster (CSS px) | Pixeldichte | Anzeigebreite (CSS px) | Gewählte Breite (px) | Bilddaten |
|---|---|---|---|---|
| 390 | 1× | 358 | 400 | 12.4 KB |
| 390 | 2× | 358 | 800 | 40.0 KB |
| 768 | 1× | 736 | 800 | 40.0 KB |
| 768 | 2× | 736 | 1600 | 129.0 KB |
| 1280 | 1× | 960 | 1600 | 129.0 KB |
| 1280 | 2× | 960 | 4000 | 595.9 KB |
Jede Zeile nutzte einen frischen Browserkontext mit deaktiviertem Cache. Der breiteste Fall mit hoher Pixeldichte wählte die größte Variante, weil die angebotenen Größen dort eine große Lücke ließen. Eine Zwischengröße wäre einen Test wert; der Browser kann nur vorhandene Dateien aus der Liste wählen.
Das gewählte Bild in passender Größe prüfen
Detail des Quellfotos
Detail des komprimierten Fotos
Prüfe das Foto auf einem kleinen und einem hochauflösenden Bildschirm. Die kleinste Variante ist nicht die beste, wenn sie sichtbar unscharf wirkt. Umgekehrt rechtfertigt eine eindrucksvolle Kompressionszahl allein keine große Variante.
Das Auswahlprotokoll ist eine Momentaufnahme der genannten Umgebung. Cache und Browserentscheidungen können spätere Besuche verändern. Nutze zur Wiederholung einen frischen Browserkontext und prüfe die angeforderte Datei statt nur die sichtbaren Maße.
Vorbereitung mit Auslieferung verbinden
Komprimiere die vorbereiteten Kopien im Bildkompressor. Danach kann Website oder CMS passende Varianten anbieten. Verweist das erzeugte Markup jedes Display auf eine große Datei, ändert Kompression allein diese Entscheidung nicht.
Halte sizes im Einklang mit dem CSS-Layout. Der Browser nutzt diesen Hinweis zusammen mit Varianten und Displaydichte; Dateinamen verraten ihm nicht deine Absicht. Prüfe die gewählte Ressource nach Layoutänderungen.
Bei wiederkehrenden Abläufen kann die Entwickler-API vorbereitete Dateien beim Veröffentlichen komprimieren. Das Skalieren bleibt ein eigener Vorbereitungsschritt. Unser Qualitätsleitfaden erklärt, wie Sie Details vor dem Ersetzen eines Bildes vergleichen.
Einen Bildplatz auf deiner Seite prüfen
- Miss den Bildplatz und bestimme die nötigen proportionalen Breiten.
- Bereite die Kopien vor, komprimiere sie und behalte die bearbeitbare Quelle.
- Biete Varianten mit einer zum Layout passenden
sizes-Regel an. - Prüfe gewählte Ressource und sichtbares Foto auf verschiedenen Displays.
FAQ
- Verringert eine kleinere Anzeigebreite den Download?
- Eine CSS-Breite ändert das Layout, nicht die Bytes einer einzelnen Bilddatei. Biete passende Varianten an und prüfe die Auswahl des Browsers.
- Warum wählt ein hochauflösendes Smartphone ein breiteres Bild?
- Ein dichtes Display kann im gleichen sichtbaren Platz mehr Bildpixel nutzen. Sowohl Variantenmaße als auch der Größenhinweis der Seite beeinflussen die Wahl.
- Misst dieses Experiment die Seitengeschwindigkeit?
- Es erfasst Kompressionsergebnisse und Bildauswahl. Das Ladeerlebnis der gesamten Seite hängt auch von weiteren Ressourcen, Netzwerk und Rendering ab.