Responsive Bilder: srcset, sizes und Pixeldichte DPR verstehen

Dateipixel, CSS-Pixel und Dichte unterscheiden

Eine Datei mit 800 Pixeln Breite kann in einem Bereich von 400 CSS-Pixeln erscheinen. Bei DPR 2 entspricht das ungefähr 800 Gerätepixeln. Diese Beziehung hilft bei der Planung; die endgültige Auswahl bleibt beim Browser.

Berechne zuerst den kleineren Wert aus 800 und Fensterbreite minus 32. Multipliziere diesen Bereich mit DPR, nicht die ganze Fensterbreite, wenn das Bild nur eine schmale Spalte belegt.

Breitenangaben für veränderliche Layouts verwenden

Der Deskriptor w gibt die echte natürliche Dateibreite an, keinen Layout-Umschaltpunkt. sizes beschreibt die erwartete Anzeigebreite. Ab 832 CSS-Pixeln nutzt das Beispiel 800; darunter werden beide Ränder abgezogen.

Das gezeigte CSS gehört zum Beispiel. Wandert die Komponente später in eine halbe Rasterspalte, muss sizes angepasst werden. Alte Vollbreiten können unnötig große Dateien auslösen. Beschreibe das Layout statt verbreiteter Bildschirmgrößen.

<img
  src="/images/workspace-800.webp"
  srcset="/images/workspace-400.webp 400w,
          /images/workspace-800.webp 800w,
          /images/workspace-1600.webp 1600w"
  sizes="(min-width: 832px) 800px, calc(100vw - 32px)"
  width="1600" height="1200"
  alt="A desk with a monitor and an open notebook"
  style="display:block;width:calc(100vw - 32px);max-width:800px;height:auto;margin-inline:auto"
>

Kandidaten abschätzen und Auswahl kontrollieren

Bei Fensterbreite 392 und DPR 2 ist der Bereich 360 breit, die Zieldatei etwa 720 Pixel. 800w ist damit plausibel. Auf breiten Anzeigen mit DPR 2 liegt das Ziel bei 1600. Diese Rechnung erklärt die Eingaben, erzwingt aber keine bestimmte Datei.

Beim Verkleinern kann der Browser eine bereits geladene große Datei behalten. Öffne einen neuen Seitenkontext oder lade nach Einstellung von Fenster und DPR neu. Erzeuge echte Dateien mit 400, 800 und 1600 Pixeln; umbenannte Kopien sind keine unterschiedlichen Auflösungen.

• Die tatsächlich gerenderte Elementbreite messen.
• currentSrc mit der Bildantwort im Netzwerkbereich vergleichen.
• Dateimaße, Antworttyp, Cache und übertragene Bytes prüfen.
• Schmale und breite Fenster mit DPR 1 und DPR 2 testen.
• Auf horizontales Überlaufen und Verschiebungen beim Laden achten.

x-Angaben für wirklich feste Größen wählen

Ein Logo mit fest 120 CSS-Pixeln kann eine Datei mit 120 als 1x und eine mit 240 als 2x anbieten. Das sind alternative Auflösungen derselben Anzeigegröße. x und w dürfen nicht in einem srcset gemischt werden.

Andere Bildausschnitte sind eine eigene Gestaltungsfrage. picture mit passenden source-Bedingungen erlaubt etwa ein nahes Gesicht auf Mobilgeräten und eine weite Szene am Desktop. Der Alternativtext beschreibt den sinnvollen Bildinhalt.

<img src="/images/mark-120.png"
     srcset="/images/mark-120.png 1x, /images/mark-240.png 2x"
     width="120" height="120" alt="Example project mark">

Seitenverhältnis und Ladeverhalten einplanen

width und height reservieren anhand des Verhältnisses Platz vor dem Laden. Sie verhindern keine responsive CSS-Breite. Bei 4:3 ergeben 800 Breite eine Höhe von 600; bei 360 sind es 270.

Verzögertes Laden eignet sich für entfernte Bilder, sollte aber das sofort sichtbare Hauptbild nicht pauschal verzögern. Kandidaten, Kompression, Format und Ladestrategie beeinflussen unterschiedliche Kosten.

Dekodierter Speicher und Netzwerkgröße sind ebenfalls verschieden. Ein kleines WebP kann einen großen Pixelpuffer ergeben. Berechne Speicher aus den Maßen und miss die komprimierte Datei tatsächlich.

Die Komponente vor Veröffentlichung prüfen

Bewahre Breiten, Ausschnitt, Verhältnis, Qualität und sizes gemeinsam bei der Komponente auf. Eine Änderung des Maximums von 800 auf 1000 erfordert eine neue Kandidatenprüfung.

Kontrolliere src, alle srcset-Adressen, aussagekräftigen Alternativtext und reservierten Platz. Rechne die Tabelle mit CSS-Pixeln und DPR nach; bestimme Höhen über den Verhältnisrechner. Dateien und Layout sollen auf echten Geräten zusammenpassen.