{"id":15779,"date":"2026-11-14T13:00:00","date_gmt":"2026-11-14T12:00:00","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/?p=15779"},"modified":"2026-10-26T12:18:52","modified_gmt":"2026-10-26T11:18:52","slug":"welches-bildformat-der-browser-erhalt-formatauswahl-und-cache-regeln-prufen","status":"publish","type":"post","link":"https:\/\/www.lukaswojcik.com\/blog\/de\/web-entwicklung\/tutorials-de-web-entwicklung\/welches-bildformat-der-browser-erhalt-formatauswahl-und-cache-regeln-prufen\/","title":{"rendered":"Welches Bildformat der Browser erh\u00e4lt: Formatauswahl und Cache-Regeln pr\u00fcfen"},"content":{"rendered":"

Ein Server kann unter derselben Bildadresse unterschiedliche Formate liefern. Der Anfrageheader Accept<\/code> nennt bevorzugte Medientypen; der Antwortheader Vary<\/code> hilft Zwischenspeichern bei der Auswahl einer passenden gespeicherten Antwort. Ein anderer Inhaltstyp oder ein fehlender Header beweist allerdings noch keine fehlerhafte Bildanzeige.<\/p>\n

Eine historische Pr\u00fcfung von zwanzig Startseiten am 6. September 2026 erfasste 1.345 Bildeintr\u00e4ge und untersuchte 76 Bildadressen. Die gespeicherten Ergebnisse bleiben n\u00fctzlich, doch die urspr\u00fcngliche Auswertung \u00fcbersch\u00e4tzte das Verfahren: Die Implementierung verglich eine GET- mit einer HEAD-Anfrage, keine zwei ansonsten gleichen GET-Anfragen. GET fordert neben den Headern auch den Antwortinhalt an; HEAD fordert die Header ohne Antwortinhalt an. Deshalb werden gespeicherte Werte und Aussagen, die einen neuen kontrollierten Test erfordern, hier getrennt.<\/p>\n

\"Historische
Gespeicherte Ergebnisse vom 6. September 2026; unterschiedliche Methoden verhindern einen isolierten Accept-Nachweis.<\/figcaption><\/figure>\n

Was die historische Stichprobe tats\u00e4chlich erfasste<\/h2>\n

Bei vierzehn der 76 Paare unterschieden sich die deklarierten Medientypen. Sechs Proben der New York Times meldeten WebP gegen\u00fcber JPEG mit Vary: Accept<\/code>. Sechs Zeit-Proben meldeten WebP gegen\u00fcber JPEG ohne gespeicherten Vary-Wert; zwei Onet-Proben AVIF gegen\u00fcber PNG ebenfalls ohne diesen Wert. Bei den \u00fcbrigen 62 Paaren war der deklarierte Medientyp gleich. Identische Dateiinhalte sind damit nicht nachgewiesen.<\/p>\n

Die Anfragen unterschieden sich sowohl in der Methode als auch in Accept. Zudem verwendete die alternative Anfrage Accept: image\/*<\/code>. Dieser Platzhalter erlaubt auch AVIF und WebP und bildet deshalb keinen Browser ohne diese Formate ab. Die vierzehn Unterschiede liefern Anhaltspunkte f\u00fcr eine Nachpr\u00fcfung, aber keinen isolierten Nachweis einer Accept-basierten Aushandlung. Der Datensatz enth\u00e4lt Zusammenfassungen, keine beiden Antwortdateien samt vollst\u00e4ndigen Rohheadern.<\/p>\n

Ein aussagekr\u00e4ftigerer Vergleich<\/h2>\n

Ein kontrollierter Vergleich verwendet zweimal GET, dieselbe Adresse und bis auf Accept dieselben Optionen. Eine Basisanfrage kann AVIF und WebP mit q=0<\/code> ausdr\u00fccklich ausschlie\u00dfen; image\/*<\/code> schlie\u00dft keines dieser Formate aus. Accept bleibt eine Anforderung an die Antwort. Ob die tats\u00e4chlich gelieferte Datei dazu passt, muss gepr\u00fcft werden.<\/p>\n

Zur Auswertung geh\u00f6ren endg\u00fcltige URL, Status, deklarierter Medientyp, tats\u00e4chliches Dateiformat, Bytezahl, Hashwert des Inhalts und vollst\u00e4ndige Antwortheader. Gleicher Typ und gleiche L\u00e4nge beweisen keine gleichen Bytes. Abweichende Bytes k\u00f6nnen auch durch ein ver\u00e4ndertes Motiv, CDN-Verhalten oder unterschiedliche Abrufzeitpunkte entstehen. Wiederholungen und gegebenenfalls die Serverkonfiguration liefern belastbarere Hinweise auf die Ursache.<\/p>\n

Vary steuert die Wiederverwendung<\/h2>\n

Wird eine zwischenspeicherbare Antwort anhand von Accept ausgew\u00e4hlt, teilt Vary: Accept<\/code> normalerweise dieses Auswahlkriterium mit. Ein Cache darf die gespeicherte Antwort nicht einfach f\u00fcr eine Anfrage mit unpassendem Accept-Wert wiederverwenden. HTTP erlaubt beim Vergleich eine Normalisierung; eine eigene Kopie f\u00fcr jede unterschiedliche Schreibweise ist keine unvermeidliche Vorgabe.<\/p>\n

Ob Speicherung und Wiederverwendung zul\u00e4ssig sind, h\u00e4ngt zus\u00e4tzlich von Cache-Vorgaben, Aktualit\u00e4t und Konfiguration ab. Fehlendes Vary kann eine falsche Wiederverwendung beg\u00fcnstigen. Ein tats\u00e4chlich fehlerhafter CDN-Abruf wurde mit der historischen Probe jedoch nicht nachgewiesen. Vorgaben wie no-store<\/code> und ein bewusst konfigurierter Cache-Schl\u00fcssel ver\u00e4ndern die Bewertung. Vary: *<\/code> verhindert eine unmittelbare Wiederverwendung ohne Validierung.<\/p>\n

Die Pr\u00fcfung muss vollst\u00e4ndige Headernamen vergleichen. Vary: Accept-Encoding<\/code> betrifft die Inhaltskodierung und bedeutet etwas anderes als Vary: Accept<\/code>. Eine blo\u00dfe Suche nach der Zeichenfolge accept<\/code> kann beide F\u00e4lle verwechseln.<\/p>\n

Eine belegbare Lehre aus dem Pr\u00fcfer<\/h2>\n

Eine \u00e4ltere lokale Implementierung \u00fcbergab den gew\u00fcnschten Header als Option accept<\/code>. Die gemeinsame Abrufbibliothek erwartet daf\u00fcr kopfzeilen<\/code>. Der Vergleich dieser Quelldateien best\u00e4tigt die Schnittstellenverwechslung: \u00dcber die falsche Option wurde der gew\u00fcnschte Header nicht weitergereicht. Ein Test muss deshalb neben simulierten Antworten auch die ausgehende Anfrage untersuchen. Gleiche Antworten allein schlie\u00dfen Aushandlung nicht aus.<\/p>\n

Ma\u00dfe, Ladeverhalten und Alternativtexte<\/h2>\n

Die gespeicherte Markup-Auswertung z\u00e4hlt 783 von 1.345 Bildeintr\u00e4gen, bei denen mindestens eine g\u00fcltige numerische Ma\u00dfangabe fehlt. Das bedeutet nicht, dass jeweils beide Attribute fehlen. Sechs untersuchte Seiten enthielten f\u00fcr jedes erkannte Bild g\u00fcltige Ma\u00dfe. Bei Heise fehlte bei 423 von 426 Eintr\u00e4gen ein vollst\u00e4ndiges g\u00fcltiges Ma\u00dfpaar.<\/p>\n

Passende Werte f\u00fcr width<\/code> und height<\/code> helfen, das Seitenverh\u00e4ltnis vor dem Laden zu reservieren. Auch CSS kann geeigneten Platz freihalten. Fehlende Attribute sind daher ein Pr\u00fcfhinweis und keine gemessene Layoutverschiebung. Cumulative Layout Shift misst, wie stark sich sichtbare Inhalte unerwartet auf der Seite verschieben. Daf\u00fcr ist die tats\u00e4chlich dargestellte Seite zu beobachten.<\/p>\n

Auch die Zahl 762 beruht auf einer N\u00e4herung: Diese Eintr\u00e4ge stehen im Quelltext hinter den ersten drei Bildern und tragen kein loading=\"lazy\"<\/code>. Sichtfeld und CSS-Layout wurden nicht gemessen. Die Quelltextreihenfolge beweist keine Unsichtbarkeit; ein wichtiges anfangs sichtbares Bild sollte nicht allein wegen der vierten Position im HTML verz\u00f6gert laden.<\/p>\n

Bei 27 Eintr\u00e4gen fehlt das alt-Attribut. Ein leeres alt=\"\"<\/code> kann bei rein dekorativen Bildern oder bereits daneben vermittelten Bildinformationen angemessen sein. Entscheidend ist der Zweck im Kontext. Informative und funktionale Bilder ben\u00f6tigen eine passende zug\u00e4ngliche Alternative.<\/p>\n

Die Grenzen der Stichprobe<\/h2>\n

Der Pr\u00fcfer w\u00e4hlte je Seite h\u00f6chstens sechs unterschiedliche Bildadressen aus erkanntem Markup. CSS-Hintergr\u00fcnde, per Skript erzeugte Bilder und tats\u00e4chlich vom Browser ausgew\u00e4hlte responsive Varianten wurden damit nicht vollst\u00e4ndig erfasst. Sechs Proben belegen auch nicht das Verhalten eines gesamten Auslieferdienstes.<\/p>\n

Drei Datens\u00e4tze enthalten keine erkannten Bilder: Stack Overflow antwortete mit 429, Allegro mit 403, und die gespeicherte Bund-Antwort lieferte keine Bildeintr\u00e4ge. Daraus folgt weder eine generell bildlose Seite noch ein Nachweis, dass zwei Seiten JavaScript ben\u00f6tigen. Ein verweigerter oder begrenzter Abruf beschreibt diesen Zugriffsversuch und keinen vollst\u00e4ndigen Browserbesuch.<\/p>\n

Eine Bildadresse begrenzt vergleichen<\/h2>\n

Das folgende Bash-Beispiel ben\u00f6tigt curl ab Version 8.4, file<\/code> und GNU coreutils. Die Beispieladresse ist ein Platzhalter. Beide Anfragen verwenden GET, Weiterleitungen bleiben bei HTTPS, und jeder Download ist auf 10 MiB und 30 Sekunden begrenzt. Die Ergebnisse bleiben zur Auswertung in einem neu angelegten tempor\u00e4ren Verzeichnis.<\/p>\n

Shell<\/span>