Um einen Kandidaten für ein responsives Bild vorherzusagen, lösen Sie sizes zu einer CSS-Breite auf, multiplizieren diese mit der Geräte-Pixeldichte und vergleichen das Ergebnis mit srcset. Überprüfen Sie anschließend die ausgewählte URL: Browser haben bei der endgültigen Auswahl einen Ermessensspielraum.

Diese Anleitung richtet sich an alle, die eine erstellte Webseite in Chrome auf einem Mac überprüfen. Sie berechnen wahrscheinliche Kandidaten, testen eine lokale Seite mit eigens erstellten abstrakten Formen und unterscheiden eine irreführende Größenangabe vom normalen Auswahlverhalten des Browsers.

Was sagen sizes, srcset und DPR dem Browser jeweils?

Bei Breiten-Deskriptoren führt srcset die verfügbaren Ressourcen und ihre intrinsischen Pixelbreiten auf. Ein Deskriptor wie 800w muss ein Bild beschreiben, das tatsächlich 800 Pixel breit ist. Halten Sie Breiten-Deskriptoren und Dichte-Deskriptoren wie 2x in getrennten Quellensätzen; ihre Mischung in einem srcset ist ungültig. MDNs Referenz zum Bildelement erläutert diese Anforderungen.

sizes gibt die vorgesehene Anzeigebreite für die Ressourcenauswahl an. Der Browser wertet die Bedingungen der Reihe nach aus und verwendet den ersten passenden Eintrag. Setzen Sie den bedingungslosen Fallback an das Ende. Als Quellgrößen sind Längen wie 480px, 50vw und calc(100vw - 32px) zulässig; Prozentwerte wie 50% sind keine gültigen Slotbreiten. Verwendung responsiver Bilder in HTML

CSS steuert die angezeigten Abmessungen. Betrachten Sie Ihr CSS und die explizite sizes-Liste als zwei Beschreibungen, die Sie aufeinander abstimmen müssen: Die eine bestimmt das Layout, die andere dient der Ressourcenauswahl. Wenn Sie nur sizes ändern, wird das entsprechende Layout nicht umgesetzt. HTML-Standard: Sizes-Attribute

DPR beschreibt das Verhältnis zwischen physischen Pixeln und CSS-Pixeln. Lesen Sie window.devicePixelRatio ab, statt einen Wert anhand des Mac-Modells oder des Displaynamens anzunehmen. Die Seitenzoomstufe kann diesen Wert ändern, ebenso das Verschieben eines Fensters zwischen Displays. Pinch-Zoom ändert DPR nicht. MDN: Window.devicePixelRatio

Wie berechnen Sie den wahrscheinlichen Kandidaten?

Für eine aufgelöste Quellgröße S, eine Ressourcenbreite W und DPR D verwenden Sie diese beiden gleichwertigen Berechnungen:

Zielbreite der Ressource = S × D
Effektive Pixeldichte des Kandidaten = W ÷ S

Das HTML-Verarbeitungsmodell normalisiert Breiten-Deskriptoren, indem es die Breite jedes Kandidaten durch die Quellgröße teilt. MDN erläutert auch die praktische Vorhersage, bei der der Größenhinweis mit DPR multipliziert wird. HTML-Standard: Normalisieren der Quelldichten, MDN: HTMLImageElement.sizes

Für eine nützliche Schätzung wählen Sie den kleinsten Kandidaten, der mindestens die Zielbreite erreicht. Liegen alle Kandidaten unter dem Ziel, nennen Sie den größten verfügbaren Kandidaten und halten Sie die Differenz fest. Dies ist eine explizite Vorhersageregel für die folgenden Übungen. Der HTML-Standard überlässt die endgültige Auswahl der Implementierung; er verpflichtet nicht jeden Browser, dieser Rundungsregel zu folgen. HTML-Standard: Auswählen einer Bildquelle

Betrachten Sie diese Liste von Quellgrößen in Verbindung mit Kandidaten von 480w, 800w, 1200w und 1440w:

(max-width: 600px) calc(100vw - 32px),
(max-width: 1200px) calc(50vw - 32px),
568px

100vw steht für die Viewportbreite und 50vw für die Hälfte dieser Breite. Diese Einheiten beziehen sich auf den Viewport und nicht auf den übergeordneten Container des Bildes. CSS-Werte und -Einheiten: Viewportbezogene Längen

Die folgende Tabelle enthält beispielhafte Berechnungen, keine aufgezeichneten Browserergebnisse. Die letzte Spalte wendet die angegebene Vorhersageregel an.

Viewportbreite, CSS-px DPR Aufgelöste Quellgröße, CSS-px Zielbreite der Ressource, px Vorhergesagter Kandidat
600 1 568 568 800w
600 2 568 1,136 1200w
601 2 268.5 537 800w
1,000 1 468 468 480w
1,000 2 468 936 1200w
1,400 2 568 1,136 1200w
1,400 3 568 1,704 1440w, unter dem Ziel

Der Übergang von 600 auf 601 CSS-Pixel eignet sich besonders gut zum Testen. Bei 600 liefert die erste Bedingung einen Slot, der fast so breit wie der Viewport ist. Bei 601 liefert die zweite Bedingung einen deutlich schmaleren Slot. Ein breiterer Viewport ergibt somit ein kleineres Zielbild. Das folgt direkt aus diesem festgelegten Layout.

Bei einem Viewport von 1.000 Pixeln und DPR 2 beträgt die Quellgröße 468 CSS-Pixel. Die vier Kandidaten haben effektive Pixeldichten von ungefähr 1.03x, 1.71x, 2.56x und 3.08x. Unter unserer Vorhersageregel überschreitet der Kandidat 1200w als erster die Zieldichte von 2x.

Wie erstellen Sie einen vollständigen lokalen Test?

Verwenden Sie einen Mac mit Chrome und installiertem Python 3.8 oder neuer. Speichern Sie das folgende vollständige Programm in einem Texteditor als responsive_demo.py. Es erzeugt vier PNG-Dateien mit demselben Rechteck und Kreis, schreibt eine passende Seite und startet einen lokalen Server. Alle erzeugten Dateien werden in einem neuen temporären Verzeichnis abgelegt, sodass vorhandene Dateien nicht überschrieben werden.

Die Seite verwendet absichtlich ein sofort geladenes Bild und explizite Quellgrößen. Ihre CSS-Breiten entsprechen den drei Zweigen aus der Berechnungstabelle. Der Server nutzt Pythons dokumentiertes ThreadingHTTPServer und einen verzeichnisbasierten Anfrage-Handler. Python: http.server

from functools import partial
from http.server import SimpleHTTPRequestHandler, ThreadingHTTPServer
from pathlib import Path
import struct
import tempfile
import zlib


def chunk(kind, data):
    return (
        struct.pack("!I", len(data)) + kind + data
        + struct.pack("!I", zlib.crc32(kind + data))
    )


def make_png(width):
    height = width // 2
    rows = []
    for y in range(height):
        row = bytearray()
        for x in range(width):
            color = (242, 244, 248)
            if width // 8 <= x < width // 2 and height // 4 <= y < 3 * height // 4:
                color = (70, 100, 160)
            if (x - 3 * width // 4) ** 2 + (y - height // 2) ** 2 < (height // 5) ** 2:
                color = (220, 160, 60)
            row.extend(color)
        rows.append(b"\x00" + row)
    header = struct.pack("!IIBBBBB", width, height, 8, 2, 0, 0, 0)
    return (
        b"\x89PNG\r\n\x1a\n"
        + chunk(b"IHDR", header)
        + chunk(b"IDAT", zlib.compress(b"".join(rows)))
        + chunk(b"IEND", b"")
    )


page = '''<!doctype html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shape A candidate test</title>
<style>
  body { margin: 0; padding: 16px; font-family: sans-serif; }
  #shape { display: block; width: calc(100vw - 32px); height: auto; }
  @media (min-width: 600.01px) {
    #shape { width: calc(50vw - 32px); }
  }
  @media (min-width: 1200.01px) {
    #shape { width: 568px; }
  }
</style>
<p>Shape A: rectangle and circle</p>
<img id="shape" src="shape-a-800.png" width="1440" height="720"
     alt="Blue rectangle and amber circle on a pale background"
     srcset="shape-a-480.png 480w, shape-a-800.png 800w,
             shape-a-1200.png 1200w, shape-a-1440.png 1440w"
     sizes="(max-width: 600px) calc(100vw - 32px),
            (max-width: 1200px) calc(50vw - 32px), 568px">
</html>
'''

root = Path(tempfile.mkdtemp(prefix="responsive-shapes-"))
for width in (480, 800, 1200, 1440):
    (root / f"shape-a-{width}.png").write_bytes(make_png(width))
(root / "index.html").write_text(page, encoding="utf-8")
handler = partial(SimpleHTTPRequestHandler, directory=str(root))
with ThreadingHTTPServer(("127.0.0.1", 0), handler) as server:
    print(f"Files: {root}", flush=True)
    print(f"Open http://127.0.0.1:{server.server_port}/", flush=True)
    try:
        server.serve_forever()
    except KeyboardInterrupt:
        pass

Wechseln Sie im Terminal in den Ordner, in dem Sie das Programm gespeichert haben, und führen Sie Folgendes aus:

python3 responsive_demo.py

Öffnen Sie in Chrome die vom Programm ausgegebene lokale Adresse. Lassen Sie das Terminal während des Tests geöffnet und drücken Sie dort nach Abschluss Control+C. Das Programm fordert einen verfügbaren Port an. Verwenden Sie deshalb die ausgegebene Adresse, statt von einer festen Portnummer auszugehen.

Für die ganzzahligen Viewportbreiten des Desktop-Tests verwenden die CSS-Schwellenwerte 600.01px und 1200.01px. Testen Sie die exakten ganzzahligen Werte aus der Tabelle. Wenn Sie das Beispiel an ein Produktivlayout anpassen, stimmen Sie Ihre tatsächlichen CSS-Haltepunkte und Quellgrößenbedingungen aufeinander ab und berücksichtigen Sie dabei auch Breiten mit Nachkommastellen.

Wie überprüfen Sie die Auswahl in Chrome auf einem Mac?

Klicken Sie mit der rechten Maustaste auf die Form und wählen Sie Inspect, um DevTools mit ausgewähltem Bildelement zu öffnen. Chrome dokumentiert dies als direkte Möglichkeit, ein Element und die darauf angewendeten Stile zu untersuchen. Chrome DevTools öffnen

  1. Klicken Sie auf Toggle device toolbar und wählen Sie unter Dimensions die Option Responsive.
  2. Stellen Sie die Viewportbreite auf 1000 ein.
  3. Wählen Sie im Menü More options der Symbolleiste Add device pixel ratio und dann DPR 2 aus.
  4. Wählen Sie bei Bedarf unter More options die Option Add device type und anschließend Desktop.
  5. Öffnen Sie Network, aktivieren Sie Disable cache und laden Sie die Seite bei geöffneten DevTools neu.
  6. Suchen Sie das angeforderte Bild, indem Sie nach shape-a filtern.

Chrome dokumentiert die Steuerelemente für Viewport, DPR und Gerätetyp in seiner Anleitung zum Gerätemodus und die Cache-Steuerung in seiner Referenz zu Netzwerkfunktionen.

Führen Sie nach dem Laden der Seite diesen vollständigen Diagnoseausschnitt in der DevTools-Console aus:

(() => {
  const image = document.getElementById("shape");
  if (!image) throw new Error("The Shape A image was not found.");

  const viewport = window.innerWidth;
  const slot = window.matchMedia("(max-width: 600px)").matches
    ? viewport - 32
    : window.matchMedia("(max-width: 1200px)").matches
      ? viewport / 2 - 32
      : 568;

  console.table({
    viewportCSSPixels: viewport,
    devicePixelRatio: window.devicePixelRatio,
    declaredSlotCSSPixels: slot,
    renderedWidthCSSPixels: image.getBoundingClientRect().width,
    targetResourcePixels: slot * window.devicePixelRatio,
    selectedURL: image.currentSrc,
    naturalWidthCSSPixels: image.naturalWidth
  });
})();

Dieser Ausschnitt berechnet den angegebenen Slot speziell für diese Demo. Er ist kein allgemeiner Parser für sizes. Vergleichen Sie den angegebenen Slot mit der dargestellten Breite und anschließend den ausgewählten Dateinamen mit der Vorhersagetabelle.

currentSrc gibt die vollständige URL zurück, die der Browser ausgewählt hat. Daraus geht nicht hervor, ob die Ressource erfolgreich geladen wurde. Prüfen Sie daher auch die Bildanfrage und das angezeigte Ergebnis. Wenn Sie src auslesen, sehen Sie in diesem Beispiel lediglich das Fallback-Attribut. MDN: HTMLImageElement.currentSrc

Interpretieren Sie naturalWidth nicht als kodierte PNG-Breite. Es handelt sich um eine dichtekorrigierte Breite in CSS-Pixeln. Bei diesem kontrollierten Testaufbau geben die Abmessungen und der Dateiname der erzeugten Datei ihre Ressourcenbreite an. MDN: HTMLImageElement.naturalWidth

Wiederholen Sie den Test bei 600 und 601 CSS-Pixeln und laden Sie die Seite für jede Bedingung neu. Halten Sie Viewport, gemeldete DPR, Slot, ausgewählten Dateinamen und den Abschluss der Anfrage fest. Anhand dieser Aufzeichnungen lässt sich ein reproduzierbares Ergebnis beim Neuladen von einer Abfolge von Auswahlentscheidungen beim Ändern der Größe einer bereits geladenen Seite unterscheiden.

Was sollten Sie überprüfen, wenn die Vorhersage abweicht?

Gehen Sie die Eingaben durch, bevor Sie die Kandidatenliste ändern:

  1. Prüfen Sie die Deskriptorfamilie. Verwenden Sie bei Dichte-Deskriptoren wie 1x und 2x die Berechnung für Breiten-Deskriptoren nicht über sizes.
  2. Prüfen Sie die erste passende Bedingung. Eine frühere passende Bedingung hat Vorrang vor späteren Einträgen.
  3. Vergleichen Sie angegebene und dargestellte Breite. Die Angabe 100vw kann einen Slot größer erscheinen lassen, den CSS auf eine schmale Spalte begrenzt.
  4. Lesen Sie die tatsächliche DPR ab. Prüfen Sie sie nach einer Änderung der Seitenzoomstufe oder des Displays erneut.
  5. Vergleichen Sie kontrollierte Neuladungen. Behalten Sie beim Wiederholen des Tests Viewport, DPR und Ladebedingungen bei.
  6. Prüfen Sie die Verfügbarkeit der Ressource. Eine ausgewählte URL und ein erfolgreich angezeigtes Bild sind zwei getrennte Beobachtungen.

Fehlende oder unbrauchbare explizite Quellgrößen können dazu führen, dass der HTML-Parser auf den Standardwert 100vw zurückgreift. Das kann ein überraschend großes Ziel für ein schmales Bild erklären. Geben Sie eine genaue Liste von Quellgrößen an, statt anzunehmen, der Browser könne die beabsichtigte Spaltenbreite anhand Ihres CSS ableiten. HTML-Standard: Parsen eines sizes-Attributs

Wenn eine Seite ein picture-Element verwendet, bestimmen Sie vor der Berechnung der Pixeldichten, welcher Quellzweig gilt. Die Auswahl der Quelle erfolgt vor der Auswahl unter den Kandidaten dieses Zweigs; unterschiedliche Bildausschnitte gehören zu diesem Mechanismus für Art Direction. Verwendung responsiver Bilder in HTML

Welche Einschränkungen bei der Unterstützung wirken sich auf diese Methode aus?

MDN kennzeichnet die Eigenschaft sizes als in allen Browsern weitgehend verfügbar. Das bedeutet jedoch nicht, dass jedes neuere Schlüsselwort gleichermaßen unterstützt wird. Die hier verwendeten expliziten Bedingungen ermöglichen einen unkomplizierten Test ohne automatische Größenbestimmung. MDN: HTMLImageElement.sizes

sizes="auto" ist für verzögert geladene Bilder gültig und ermöglicht die Auswahl anhand ihrer Layoutbreite. Wenn Sie es verwenden, behalten Sie explizite Ersatzgrößen nach auto bei, damit Browser, die das Schlüsselwort nicht unterstützen, darauf zurückgreifen können. Geben Sie außerdem Bildabmessungen an. Ersetzen Sie in diesem Beispiel mit sofortigem Laden nicht einfach den bisherigen Wert dadurch, ohne diese Voraussetzungen zu erfüllen. MDNs Referenz zum Bildelement

Die Gerätesteuerungen von Chrome testen das Verhalten von Chrome unter emulierten Bedingungen. Sie belegen nicht, welche Kandidaten Safari oder Firefox auswählt. Chrome beschreibt den Gerätemodus außerdem als Näherung. Testen Sie deshalb einen anderen Browser direkt, wenn dessen Verhalten relevant ist. Chrome DevTools: Einschränkungen des Gerätemodus

Eine nützliche Vorhersage endet mit einer überprüfbaren Aufzeichnung: dem zutreffenden Quellensatz, der aufgelösten Quellgröße, der gemeldeten DPR, dem berechneten Ziel und dem beobachteten currentSrc. Stimmen diese Eingaben mit dem festgelegten Layout überein, können Sie die Ressourcenauswahl klar erklären und erkennen, ob die nächste Änderung in CSS, sizes oder den verfügbaren Bildbreiten vorgenommen werden sollte.

Quellen