{"id":15696,"date":"2026-09-06T00:25:20","date_gmt":"2026-09-05T22:25:20","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/werkzeuge\/image-delivery-format-negotiation-auditor\/"},"modified":"2026-09-06T00:25:20","modified_gmt":"2026-09-05T22:25:20","slug":"image-delivery-format-negotiation-auditor","status":"publish","type":"page","link":"https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/image-delivery-format-negotiation-auditor\/","title":{"rendered":"Bild-Auslieferungs- und Formataushandlungs-Pr\u00fcfer: WebP, AVIF, srcset, Vary"},"content":{"rendered":"<div class=\"gtm-analyser-container\" style=\"background: var(--bg-panel, #1e1e24); padding: 25px; border-radius: 8px; border: 1px solid var(--border, #2a2a35);\">\n<p style=\"color: var(--text-secondary, #a0a0b0); margin-bottom: 20px;\">Ein Bild kann auf vier Arten auf einer Seite stehen: als schlichtes JPEG, als WebP f\u00fcr alle, als ausgehandelte Datei, die vom Accept-Kopf abh\u00e4ngt, oder in einem picture-Element, das den Browser w\u00e4hlen l\u00e4sst. Nur die zweite und die dritte Art sind im Markup unsichtbar \u2014 sie zeigen sich in den Antwortkopfzeilen. Diese Pr\u00fcfung fragt jedes Bild zweimal ab, einmal mit modernem Accept-Kopf und einmal ohne, und vergleicht, was zur\u00fcckkommt.<\/p>\n<div style=\"margin-bottom: 14px;\">\n        <label for=\"bild-url\" style=\"color: var(--text-secondary, #a0a0b0); display: block; font-size: 0.85rem; margin-bottom: 5px;\">Seitenadresse<\/label><br \/>\n        <input id=\"bild-url\" type=\"text\" value=\"https:\/\/www.lukaswojcik.com\/blog\/en\/toolbox\/\" class=\"form-control\" style=\"width: 100%; padding: 10px; background: var(--bg-body, #14141a); border: 1px solid var(--border, #2a2a35); color: var(--text-primary, #e8e8ee); border-radius: 6px; box-sizing: border-box; font-family: monospace;\">\n    <\/div>\n<p style=\"color: var(--text-secondary, #a0a0b0); font-size: 0.82rem; margin-bottom: 16px;\">Von diesem Server: eine Anfrage f\u00fcr die Seite und je Bild der ersten sechs ein GET mit 256-KB-Bremse sowie ein HEAD. Es werden keine Cookies gesendet, keine Skripte ausgef\u00fchrt und nichts gespeichert au\u00dfer dem Z\u00e4hlerstand.<\/p>\n<p>    <button id=\"bild-btn\" class=\"button\" style=\"background: var(--accent, #7ee787); color: var(--on-accent, #0b1114); border: none; padding: 12px 24px; border-radius: 6px; font-weight: 700; cursor: pointer;\">Bildauslieferung pr\u00fcfen<\/button><\/p>\n<div id=\"bild-ausgabe\" style=\"margin-top: 22px;\"><\/div>\n<p style=\"color: var(--text-secondary, #a0a0b0); font-size: 0.8rem; margin: 24px 0 0;\">Grenzen, die zu kennen sich lohnt: Gesehen werden nur Bilder im ausgelieferten HTML \u2014 was ein Skript sp\u00e4ter einf\u00fcgt, bleibt unsichtbar, ebenso Hintergrundbilder aus CSS. Gepr\u00fcft werden die ersten sechs verschiedenen Adressen, und die wirkliche Dateigr\u00f6\u00dfe stammt aus Content-Length, weil der Abruf bei 256 KB abbricht.<\/p>\n<\/div>\n<p><script>\n(function () {\n    'use strict';<\/p>\n<p>    const T = {\"einleitung\":\"Ein Bild kann auf vier Arten auf einer Seite stehen: als schlichtes JPEG, als WebP f\u00fcr alle, als ausgehandelte Datei, die vom Accept-Kopf abh\u00e4ngt, oder in einem picture-Element, das den Browser w\u00e4hlen l\u00e4sst. Nur die zweite und die dritte Art sind im Markup unsichtbar \u2014 sie zeigen sich in den Antwortkopfzeilen. Diese Pr\u00fcfung fragt jedes Bild zweimal ab, einmal mit modernem Accept-Kopf und einmal ohne, und vergleicht, was zur\u00fcckkommt.\",\"label_url\":\"Seitenadresse\",\"datenschutz\":\"Von diesem Server: eine Anfrage f\u00fcr die Seite und je Bild der ersten sechs ein GET mit 256-KB-Bremse sowie ein HEAD. Es werden keine Cookies gesendet, keine Skripte ausgef\u00fchrt und nichts gespeichert au\u00dfer dem Z\u00e4hlerstand.\",\"knopf\":\"Bildauslieferung pr\u00fcfen\",\"laeuft\":\"Seite und Bilder werden geholt...\",\"grenze\":\"Grenzen, die zu kennen sich lohnt: Gesehen werden nur Bilder im ausgelieferten HTML \u2014 was ein Skript sp\u00e4ter einf\u00fcgt, bleibt unsichtbar, ebenso Hintergrundbilder aus CSS. Gepr\u00fcft werden die ersten sechs verschiedenen Adressen, und die wirkliche Dateigr\u00f6\u00dfe stammt aus Content-Length, weil der Abruf bei 256 KB abbricht.\",\"h_bilder\":\"Gepr\u00fcfte Bilder\",\"tabelle_hinweis\":\"Geliefert ist, was ein Accept-Kopf mit AVIF und WebP bekommt; die n\u00e4chste Spalte zeigt, was dieselbe Adresse ohne ihn zur\u00fcckgibt. Zwei verschiedene Typen bedeuten: der Server handelt aus.\",\"h_befunde\":\"Befunde\",\"sp_bild\":\"Bild\",\"sp_geliefert\":\"Geliefert\",\"sp_ohne_accept\":\"Ohne Accept\",\"sp_groesse\":\"Gr\u00f6\u00dfe\",\"sp_masse\":\"Eigenma\u00df\",\"sp_markup\":\"Im Markup\",\"sp_laden\":\"loading\",\"zeile_seite\":\"Seite\",\"zeile_gefunden\":\"Bilder im Markup\",\"zeile_geprueft\":\"Bilder abgerufen\",\"zeile_dauer\":\"Dauer\",\"zeile_limit\":\"Pr\u00fcfungen in dieser Stunde \u00fcbrig\",\"wert_fehlt\":\"fehlt\",\"stufe_hoch\":\"Hoch\",\"stufe_mittel\":\"Mittel\",\"stufe_niedrig\":\"Niedrig\",\"stufe_info\":\"Hinweis\",\"stufe_gut\":\"In Ordnung\",\"keine_befunde\":\"Nichts zu melden.\",\"urteil_gut\":\"Die Bilder werden sauber ausgeliefert.\",\"urteil_warnung\":\"Die Bilder laden, aber Bytes oder Layoutruhe werden verschenkt.\",\"urteil_kritisch\":\"Ein Bild ist unerreichbar, oder eine ausgehandelte Datei wird f\u00fcr die falschen Browser zwischengespeichert.\",\"fehler_kein_token\":\"Die Pr\u00fcfung lie\u00df sich nicht starten, weil reCAPTCHA nicht geladen hat.\",\"fehler_captcha\":\"reCAPTCHA hat die Anfrage als automatisiert eingestuft. Ein Neuladen der Seite hilft meist.\",\"fehler_zu_viele\":\"Das Limit von {limit} Pr\u00fcfungen je Stunde f\u00fcr diese Adresse ist erreicht.\",\"fehler_adresse\":\"Diese Adresse l\u00e4sst sich nicht verwenden.\",\"fehler_abruf\":\"Die Seite lie\u00df sich nicht abrufen.\",\"fehler_zaehler\":\"Der Z\u00e4hler ist nicht erreichbar, deshalb wurde nichts gepr\u00fcft.\",\"fehler_pruefdienst\":\"Der reCAPTCHA-Dienst war nicht erreichbar.\",\"fehler_aufbau\":\"Der Dienst ist nicht richtig eingerichtet. Der Fehler liegt auf dieser Seite.\",\"fehler_eingabe\":\"Die Anfrage lie\u00df sich nicht lesen.\",\"fehler_methode\":\"Falsche Anfragemethode.\",\"fehler_netz\":\"Der Dienst war nicht erreichbar.\",\"fehler_antwort\":\"Die Antwort lie\u00df sich nicht lesen.\",\"fehler_unbekannt\":\"Es ist etwas schiefgegangen, wof\u00fcr es keine eigene Meldung gibt.\",\"grund_leer\":\"Es wurde nichts eingegeben.\",\"grund_zu_lang\":\"Die Eingabe ist zu lang.\",\"grund_unlesbar\":\"Das ergibt keine Adresse.\",\"grund_schema\":\"Gepr\u00fcft werden nur http- und https-Adressen.\",\"grund_benutzerinfo\":\"Eingaben mit Zugangsdaten darin werden abgewiesen.\",\"grund_kein_punkt\":\"Der Hostname braucht mindestens einen Punkt.\",\"grund_hostform\":\"Erwartet wird ein Hostname, keine IP-Adresse.\",\"grund_port\":\"Gepr\u00fcft werden nur die Ports 80, 443, 8080 und 8443.\",\"grund_gesperrter_bereich\":\"Dieser Host l\u00f6st in ein privates oder reserviertes Netz auf. Solche werden nie abgerufen.\",\"grund_kein_dns\":\"Der Hostname l\u00f6st nicht auf.\",\"grund_abruf\":\"Die Adresse hat nicht geantwortet.\",\"grund_zu_viele_spruenge\":\"Die Adresse leitet zu oft weiter.\",\"befund_status\":\"Die Seite antwortete mit Status {status} || Die Bilder wurden trotzdem aus dem gelieferten Rumpf gelesen, aber eine Seite ohne 200 zeigt selten das, was Besucher sehen.\",\"befund_keine_bilder\":\"Kein img-Element im ausgelieferten HTML || Entweder tr\u00e4gt die Seite wirklich keines, oder jedes Bild wird nach dem Laden per Skript eingef\u00fcgt. Diese Pr\u00fcfung sieht nur, was der Server sendet.\",\"befund_nur_stichprobe\":\"{gesamt} Bilder im Markup, geholt wurden die ersten {n} || Eine Stichprobe h\u00e4lt die Last auf dem gepr\u00fcften Server klein. Die Befunde gelten f\u00fcr diese {n}; der Rest kann abweichen.\",\"befund_bild_unerreichbar\":\"{url} lie\u00df sich nicht abrufen || Grund: {grund}. Ein verwiesenes Bild, das nicht antwortet, hinterl\u00e4sst eine L\u00fccke auf der Seite und kostet jedes Mal eine Anfrage.\",\"befund_bild_status\":\"{url} antwortete mit Status {status} || Die Adresse steht im Markup, liefert aber keine Datei. Browser zeigen stattdessen den Alt-Text, Crawler notieren eine kaputte Ressource.\",\"befund_aushandlung_ohne_vary\":\"{url} handelt Formate aus, sendet aber kein Vary: Accept || Mit modernem Accept-Kopf kommt {modern}, ohne ihn {klassisch} \u2014 die Antwort h\u00e4ngt also von der Anfrage ab. Vary meldete {vary}. Jeder gemeinsame Zwischenspeicher dazwischen legt die erste Antwort ab und reicht sie an alle weiter; ein Browser ohne WebP-Unterst\u00fctzung bekommt dann die WebP-Datei.\",\"befund_aushandlung_mit_vary\":\"{url} handelt Formate aus und sagt es auch || {modern} f\u00fcr einen modernen Browser, {klassisch} f\u00fcr einen alten, und Vary: Accept in der Antwort. Genau diese Kombination braucht ein Zwischenspeicher, um beides auseinanderzuhalten.\",\"befund_ohne_laenge\":\"{url} kam ohne Content-Length || Die wirkliche Dateigr\u00f6\u00dfe bleibt unbekannt, weil der Abruf bei 256 KB abbricht. H\u00e4ppchenweise gesendete Antworten verhalten sich so; die Gr\u00f6\u00dfe lie\u00dfe sich nur durch vollst\u00e4ndiges Laden messen.\",\"befund_schwer_und_klassisch\":\"{url} wiegt {kb} KB als {typ} || Eine Datei dieser Gr\u00f6\u00dfe in einem klassischen Format ist die \u00fcbliche Stelle, an der eine Seite die H\u00e4lfte ihrer Bytes verschenkt. WebP spart bei gleicher Qualit\u00e4t meist ein Viertel bis ein Drittel, AVIF mehr.\",\"befund_uebermass\":\"{url} ist {faktor}-mal gr\u00f6\u00dfer, als es angezeigt wird || Eigenbreite {eigen} px, gr\u00f6\u00dfte angegebene Anzeigebreite {anzeige} px. Der \u00dcberschuss wird \u00fcbertragen und im Browser wieder heruntergerechnet.\",\"befund_bild_ohne_cache_control\":\"{url} tr\u00e4gt kein Cache-Control || Ohne diese Angabe entscheidet jeder Zwischenspeicher selbst, wie lange die Datei gilt. Bilder \u00e4ndern sich unter fester Adresse selten und sind deshalb die sichersten Kandidaten f\u00fcr eine lange Frist.\",\"befund_bild_kurzer_cache\":\"{url} darf {sekunden} Sekunden zwischengespeichert werden || F\u00fcr ein Bild ist das kurz. Wenn die Adresse sich mit dem Inhalt \u00e4ndert, ist ein Jahr der \u00fcbliche Wert.\",\"befund_ohne_masse\":\"{n} von {gesamt} Bildern tragen keine Breite und H\u00f6he || Ohne beide Attribute kann der Browser vor dem Eintreffen der Datei keinen Platz reservieren, und der Text darunter springt, sobald sie da ist. Genau diesen Sprung misst Cumulative Layout Shift.\",\"befund_masse_vollstaendig\":\"Alle {n} Bilder tragen Breite und H\u00f6he || Der Browser kann den Platz reservieren, bevor die Datei eintrifft, dadurch springt nichts.\",\"befund_ohne_alt\":\"{n} Bilder haben kein alt-Attribut || Vorleseprogramme lesen dann den Dateinamen, und Suchmaschinen verlieren den einzigen Text, der das Bild beschreibt. Ein leeres alt ist bei Zierbildern eine g\u00fcltige Antwort, ein fehlendes nicht.\",\"befund_nur_klassisch\":\"{n} Bilder kommen als JPEG oder PNG ohne moderne Alternative || Weder eine Aushandlung noch ein picture-Element, das WebP oder AVIF anbietet. Ob das ins Gewicht f\u00e4llt, h\u00e4ngt an der Dateigr\u00f6\u00dfe.\",\"befund_aushandlung_gefunden\":\"{n} Bilder werden nach Format ausgehandelt || Der Server sieht sich den Accept-Kopf an und antwortet entsprechend.\",\"befund_schwere_bilder\":\"{n} Bilder wiegen mehr als {grenze_kb} KB in einem klassischen Format || Das sind die Kandidaten, deren Umwandlung sich zuerst lohnt.\",\"befund_erstes_lazy\":\"Das erste Bild tr\u00e4gt loading=lazy || {url}. Das Bild am Seitenanfang entscheidet meist \u00fcber Largest Contentful Paint, und faules Laden verz\u00f6gert genau dieses, bis das Layout bekannt ist.\",\"befund_spaet_ohne_lazy\":\"{n} Bilder unterhalb der ersten drei laden sofort || Bilder weit unten k\u00f6nnen warten, bis sie in Sicht kommen. Ob sie wirklich unterhalb des sichtbaren Bereichs liegen, l\u00e4sst sich am Markup allein nicht entscheiden.\"};<\/p>\n<p>    var ENDPUNKT = '\/lw-bildcheck.php';\n    var SITEKEY = '6LcrPkEtAAAAAPo1QCOf-IIM2fCL0UfdJz4y2iSY';\n    var STUFEN = ['hoch', 'mittel', 'niedrig', 'info', 'gut'];\n    var MODERN = ['image\/webp', 'image\/avif'];<\/p>\n<p>    function liste(w) { return Array.isArray(w) ? w : []; }\n    function zahl(w) { return (typeof w === 'number' && isFinite(w)) ? w : null; }\n    function zeichen(w) { return (typeof w === 'string' && w !== '') ? w : null; }\n    function text(schluessel, daten) {\n        var t = T[schluessel];\n        if (typeof t !== 'string') { return null; }\n        return t.replace(\/\\{([a-z_0-9]+)\\}\/g, function (m, k) {\n            return (daten && daten[k] !== undefined && daten[k] !== null) ? String(daten[k]) : m;\n        });\n    }\n    \/** Adresse auf das kuerzen, was in einer Tabellenzelle lesbar bleibt. *\/\n    function kurz(url) {\n        var s = String(url || '');\n        s = s.replace(\/^https?:\\\/\\\/\/, '');\n        if (s.length <= 52) { return s; }\n        return s.slice(0, 24) + '\u2026' + s.slice(-26);\n    }\n\n    function bewerten(antwort) {\n        var a = antwort || {};\n        if (a.fehler) { return { fehler: String(a.fehler), grund: a.grund || null, limit: zahl(a.limit) }; }\n        var befunde = liste(a.befunde).map(function (f) {\n            return { key: String(f.key || ''), stufe: STUFEN.indexOf(f.stufe) === -1 ? 'info' : f.stufe, daten: (f.daten &#038;&#038; typeof f.daten === 'object') ? f.daten : {} };\n        });\n        var gruppen = {};\n        STUFEN.forEach(function (s) { gruppen[s] = befunde.filter(function (f) { return f.stufe === s; }); });\n        var bilder = liste(a.bilder).map(function (z) {\n            return {\n                rang: zahl(z.rang), url: String(z.url || ''), status: zahl(z.status),\n                typ: zeichen(z.typ), altTyp: zeichen(z.alt_typ), kb: zahl(z.kb),\n                eigen: zeichen(z.eigen), markup: zeichen(z.markup),\n                srcset: z.srcset === true, loading: zeichen(z.loading), vary: zeichen(z.vary)\n            };\n        });\n        return {\n            fehler: null, url: String(a.url || ''), endurl: String(a.endurl || ''),\n            urteil: (a.urteil === 'gut' || a.urteil === 'warnung' || a.urteil === 'kritisch') ? a.urteil : 'kritisch',\n            gesamt: zahl(a.gesamt), geprueft: zahl(a.geprueft), bilder: bilder,\n            befunde: befunde, gruppen: gruppen, dauer: zahl(a.dauer_ms), limitRest: zahl(a.limit_rest)\n        };\n    }\n\n    function skriptLaden() {\n        return new Promise(function (auf) {\n            if (window.grecaptcha) { auf(true); return; }\n            var s = document.createElement('script');\n            s.src = 'https:\/\/www.google.com\/recaptcha\/api.js?render=' + SITEKEY;\n            s.onload = function () { auf(true); }; s.onerror = function () { auf(false); };\n            document.head.appendChild(s);\n            setTimeout(function () { auf(!!window.grecaptcha); }, 8000);\n        });\n    }\n    function tokenHolen() {\n        return skriptLaden().then(function (da) {\n            if (!da || !window.grecaptcha || !window.grecaptcha.ready) { return null; }\n            return new Promise(function (auf) {\n                var fertig = false;\n                function einmal(w) { if (!fertig) { fertig = true; auf(w); } }\n                setTimeout(function () { einmal(null); }, 12000);\n                try {\n                    window.grecaptcha.ready(function () {\n                        if (fertig) { return; }\n                        if (!window.grecaptcha.execute) { einmal(null); return; }\n                        window.grecaptcha.execute(SITEKEY, { action: 'bildcheck' }).then(function (t) { einmal(t || null); }, function () { einmal(null); });\n                    });\n                } catch (e) { einmal(null); }\n            });\n        }, function () { return null; });\n    }\n    function abfragen(url) {\n        return tokenHolen().then(function (token) {\n            return fetch(ENDPUNKT, { method: 'POST', headers: { 'Content-Type': 'application\/json' }, body: JSON.stringify({ url: url, token: token || '' }) })\n                .then(function (r) { return r.json().then(function (j) { return j; }, function () { return { fehler: 'antwort' }; }); }, function () { return { fehler: 'netz' }; });\n        });\n    }\n\n    window.LW_TEST = window.LW_TEST || {};\n    window.LW_TEST.BILD = { bewerten: bewerten, darstellen: null, text: text, kurz: kurz, ENDPUNKT: ENDPUNKT, STUFEN: STUFEN, T: T };\n\n    var btn = document.getElementById('bild-btn');\n    var out = document.getElementById('bild-ausgabe');\n    if (!btn || !out) { return; }\n\n    function el(tag, stil, txt) { var e = document.createElement(tag); if (stil) { e.setAttribute('style', stil); } if (txt !== undefined &#038;&#038; txt !== null) { e.textContent = txt; } return e; }\n    function wert(id) { var e = document.getElementById(id); return e ? e.value : ''; }\n    var UEBERSCHRIFT = 'font-family: \"Nunito Sans\", sans-serif; font-weight: 700; color: var(--text-primary, #e8e8ee); font-size: 0.95rem; margin: 22px 0 8px;';\n    var ZELLE = 'padding: 5px 12px 5px 0; color: var(--text-secondary, #a0a0b0); font-size: 0.87rem;';\n    var ZELLE_WERT = 'padding: 5px 12px 5px 0; color: var(--text-primary, #e8e8ee); font-size: 0.87rem; font-family: monospace; word-break: break-all;';\n    var KASTEN = 'background: var(--bg-body, #14141a); border: 1px solid var(--border, #2a2a35); border-radius: 8px; padding: 14px 16px; margin: 0 0 10px;';\n    var GUT = ' color: #7ee787;', WARN = ' color: #ffa94d;', ROT = ' color: #ff7b72;', GRAU = ' color: #8a8a99;';\n    var FARBEN = { hoch: '#ff7b72', mittel: '#ffa94d', niedrig: '#e3b341', info: '#8a8a99', gut: '#7ee787' };\n    var URTEIL = { gut: GUT, warnung: WARN, kritisch: ROT };\n    function gitter(sp) { return el('div', 'display: grid; grid-template-columns: ' + sp + '; gap: 0 18px; align-items: baseline;'); }\n    function paar(g, n, w, stil) { g.appendChild(el('div', ZELLE, n)); g.appendChild(el('div', ZELLE_WERT + (stil || ''), w)); }\n\n    \/** Eine Zeile je geprueftem Bild. Waagerecht rollbar, damit nichts umbricht. *\/\n    function tabelle(b) {\n        var huelle = el('div', 'overflow-x: auto; margin: 0 0 6px;');\n        var t = el('table', 'border-collapse: collapse; width: 100%; min-width: 620px; font-size: 0.84rem;');\n        var kopf = el('tr', '');\n        [T.sp_bild, T.sp_geliefert, T.sp_ohne_accept, T.sp_groesse, T.sp_masse, T.sp_markup, T.sp_laden].forEach(function (n) {\n            kopf.appendChild(el('th', 'text-align: left; padding: 6px 12px 6px 0; color: #8a8a99; font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.4px; border-bottom: 1px solid var(--border, #2a2a35); white-space: nowrap;', n));\n        });\n        t.appendChild(kopf);\n        b.bilder.forEach(function (z) {\n            var r = el('tr', '');\n            function zelle(txt, stil) { r.appendChild(el('td', 'padding: 7px 12px 7px 0; border-bottom: 1px solid var(--border, #2a2a35); font-family: monospace; color: var(--text-primary, #e8e8ee);' + (stil || ''), txt)); }\n            zelle(kurz(z.url), ' word-break: break-all;');\n            var modern = z.typ &#038;&#038; MODERN.indexOf(z.typ) !== -1;\n            zelle(z.status === 200 ? (z.typ || '-') : (z.status === null ? T.wert_fehlt : String(z.status)), z.status !== 200 ? ROT : (modern ? GUT : GRAU));\n            zelle(z.altTyp || '-', (z.altTyp &#038;&#038; z.typ &#038;&#038; z.altTyp !== z.typ) ? GUT : GRAU);\n            zelle(z.kb !== null ? z.kb + ' KB' : '-', GRAU);\n            zelle(z.eigen || '-', GRAU);\n            zelle(z.markup || T.wert_fehlt, z.markup ? GRAU : WARN);\n            zelle(z.loading || '-', GRAU);\n            t.appendChild(r);\n        });\n        huelle.appendChild(t);\n        return huelle;\n    }\n\n    function darstellen(b, ziel) {\n        ziel.innerHTML = '';\n        if (b.fehler) {\n            var txt = T['fehler_' + b.fehler] || T.fehler_unbekannt;\n            if (b.grund &#038;&#038; T['grund_' + b.grund]) { txt = txt + ' ' + T['grund_' + b.grund]; }\n            if (b.limit !== null) { txt = txt.replace('{limit}', String(b.limit)); }\n            ziel.appendChild(el('p', ZELLE + WARN + ' margin: 0;', txt));\n            return;\n        }\n        ziel.appendChild(el('div', 'font-size: 1.05rem; font-weight: 700; margin: 0 0 12px;' + URTEIL[b.urteil], T['urteil_' + b.urteil]));\n\n        var g = gitter('auto auto');\n        paar(g, T.zeile_seite, b.endurl || b.url, GRAU);\n        paar(g, T.zeile_gefunden, (b.gesamt !== null ? b.gesamt : '-') + '', GRAU);\n        paar(g, T.zeile_geprueft, (b.geprueft !== null ? b.geprueft : '-') + '', GRAU);\n        if (b.dauer !== null) { paar(g, T.zeile_dauer, b.dauer + ' ms', GRAU); }\n        if (b.limitRest !== null) { paar(g, T.zeile_limit, String(b.limitRest), GRAU); }\n        ziel.appendChild(g);\n\n        if (b.bilder.length) {\n            ziel.appendChild(el('div', UEBERSCHRIFT, T.h_bilder));\n            ziel.appendChild(tabelle(b));\n            ziel.appendChild(el('p', ZELLE + ' margin: 0 0 6px; font-size: 0.8rem;', T.tabelle_hinweis));\n        }\n\n        ziel.appendChild(el('div', UEBERSCHRIFT, T.h_befunde));\n        var irgendwas = false;\n        STUFEN.forEach(function (s) {\n            var gr = b.gruppen[s];\n            if (!gr.length) { return; }\n            irgendwas = true;\n            ziel.appendChild(el('div', 'font-weight: 700; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.5px; margin: 14px 0 6px; color: ' + FARBEN[s] + ';', T['stufe_' + s] + ' (' + gr.length + ')'));\n            gr.forEach(function (f) {\n                var k = el('div', KASTEN + ' border-left: 3px solid ' + FARBEN[s] + ';');\n                var daten = {};\n                Object.keys(f.daten).forEach(function (n) { daten[n] = (n === 'url') ? kurz(f.daten[n]) : f.daten[n]; });\n                var t = text('befund_' + f.key, daten) || f.key;\n                var teile = t.split(' || ');\n                k.appendChild(el('div', 'color: var(--text-primary, #e8e8ee); font-size: 0.9rem; font-weight: 700;', teile[0]));\n                if (teile[1]) { k.appendChild(el('div', ZELLE + ' padding: 6px 0 0; line-height: 1.55;', teile[1])); }\n                ziel.appendChild(k);\n            });\n        });\n        if (!irgendwas) { ziel.appendChild(el('p', ZELLE + ' margin: 0;', T.keine_befunde)); }\n    }\n    window.LW_TEST.BILD.darstellen = darstellen;\n\n    var laeuft = false;\n    btn.addEventListener('click', function () {\n        if (laeuft) { return; }\n        laeuft = true; btn.disabled = true;\n        out.innerHTML = '';\n        out.appendChild(el('p', ZELLE + GRAU + ' margin: 0;', T.laeuft));\n        abfragen(wert('bild-url')).then(function (a) { darstellen(bewerten(a), out); laeuft = false; btn.disabled = false; },\n            function () { darstellen(bewerten({ fehler: 'netz' }), out); laeuft = false; btn.disabled = false; });\n    });\n})();\n<\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Holt eine Seite, nimmt die ersten Bilder aus dem Markup und fragt jedes zweimal ab: einmal als Browser, der WebP und AVIF annimmt, einmal als einer, der es nicht tut. Der Vergleich zeigt, ob \u00fcberhaupt ausgehandelt wird und ob die Antwort Vary: Accept tr\u00e4gt \u2014 ohne das reicht ein Zwischenspeicher die moderne Datei an einen Browser weiter, der sie nicht lesen kann. Das Markup wird mitgepr\u00fcft: Breite und H\u00f6he, srcset, loading und alt.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":9283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-tool-base.php","meta":{"footnotes":""},"tags":[92289,92759,92292],"class_list":["post-15696","page","type-page","status-publish","hentry","tag-seo-de","tag-web-development-de","tag-web-performance-de"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Bild-Auslieferungs- und Formataushandlungs-Pr\u00fcfer: WebP, AVIF, srcset, Vary - Lukas Wojcik - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/image-delivery-format-negotiation-auditor\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Bild-Auslieferungs- und Formataushandlungs-Pr\u00fcfer: WebP, AVIF, srcset, Vary - Lukas Wojcik - Blog\" \/>\n<meta property=\"og:description\" content=\"Holt eine Seite, nimmt die ersten Bilder aus dem Markup und fragt jedes zweimal ab: einmal als Browser, der WebP und AVIF annimmt, einmal als einer, der es nicht tut. Der Vergleich zeigt, ob \u00fcberhaupt ausgehandelt wird und ob die Antwort Vary: Accept tr\u00e4gt \u2014 ohne das reicht ein Zwischenspeicher die moderne Datei an einen Browser weiter, der sie nicht lesen kann. Das Markup wird mitgepr\u00fcft: Breite und H\u00f6he, srcset, loading und alt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/image-delivery-format-negotiation-auditor\/\" \/>\n<meta property=\"og:site_name\" content=\"Lukas Wojcik - Blog\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/08\/og-default.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/werkzeuge\\\/image-delivery-format-negotiation-auditor\\\/\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/werkzeuge\\\/image-delivery-format-negotiation-auditor\\\/\",\"name\":\"Bild-Auslieferungs- und Formataushandlungs-Pr\u00fcfer: WebP, AVIF, srcset, Vary - Lukas Wojcik - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#website\"},\"datePublished\":\"2026-09-05T22:25:20+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/werkzeuge\\\/image-delivery-format-negotiation-auditor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/werkzeuge\\\/image-delivery-format-negotiation-auditor\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/de\\\/werkzeuge\\\/image-delivery-format-negotiation-auditor\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Toolbox\",\"item\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/toolbox-2\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Bild-Auslieferungs- und Formataushandlungs-Pr\u00fcfer: WebP, AVIF, srcset, Vary\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/\",\"name\":\"Lukas Wojcik - Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#\\\/schema\\\/person\\\/895f7604f9b6b71aad9bba33af28d0f9\",\"name\":\"luky\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"contentUrl\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\",\"width\":424,\"height\":636,\"caption\":\"luky\"},\"logo\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/wp-content\\\/uploads\\\/2026\\\/07\\\/lw-x2.jpg\"},\"sameAs\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Bild-Auslieferungs- und Formataushandlungs-Pr\u00fcfer: WebP, AVIF, srcset, Vary - Lukas Wojcik - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/image-delivery-format-negotiation-auditor\/","og_locale":"en_US","og_type":"article","og_title":"Bild-Auslieferungs- und Formataushandlungs-Pr\u00fcfer: WebP, AVIF, srcset, Vary - Lukas Wojcik - Blog","og_description":"Holt eine Seite, nimmt die ersten Bilder aus dem Markup und fragt jedes zweimal ab: einmal als Browser, der WebP und AVIF annimmt, einmal als einer, der es nicht tut. Der Vergleich zeigt, ob \u00fcberhaupt ausgehandelt wird und ob die Antwort Vary: Accept tr\u00e4gt \u2014 ohne das reicht ein Zwischenspeicher die moderne Datei an einen Browser weiter, der sie nicht lesen kann. Das Markup wird mitgepr\u00fcft: Breite und H\u00f6he, srcset, loading und alt.","og_url":"https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/image-delivery-format-negotiation-auditor\/","og_site_name":"Lukas Wojcik - Blog","og_image":[{"width":1200,"height":630,"url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/08\/og-default.jpg","type":"image\/jpeg"}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/image-delivery-format-negotiation-auditor\/","url":"https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/image-delivery-format-negotiation-auditor\/","name":"Bild-Auslieferungs- und Formataushandlungs-Pr\u00fcfer: WebP, AVIF, srcset, Vary - Lukas Wojcik - Blog","isPartOf":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#website"},"datePublished":"2026-09-05T22:25:20+00:00","breadcrumb":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/image-delivery-format-negotiation-auditor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/image-delivery-format-negotiation-auditor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.lukaswojcik.com\/blog\/de\/werkzeuge\/image-delivery-format-negotiation-auditor\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.lukaswojcik.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Toolbox","item":"https:\/\/www.lukaswojcik.com\/blog\/toolbox-2\/"},{"@type":"ListItem","position":3,"name":"Bild-Auslieferungs- und Formataushandlungs-Pr\u00fcfer: WebP, AVIF, srcset, Vary"}]},{"@type":"WebSite","@id":"https:\/\/www.lukaswojcik.com\/blog\/#website","url":"https:\/\/www.lukaswojcik.com\/blog\/","name":"Lukas Wojcik - Blog","description":"","publisher":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.lukaswojcik.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/www.lukaswojcik.com\/blog\/#\/schema\/person\/895f7604f9b6b71aad9bba33af28d0f9","name":"luky","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","url":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","contentUrl":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg","width":424,"height":636,"caption":"luky"},"logo":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/wp-content\/uploads\/2026\/07\/lw-x2.jpg"},"sameAs":["https:\/\/www.lukaswojcik.com\/blog"]}]}},"_links":{"self":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/pages\/15696","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/comments?post=15696"}],"version-history":[{"count":0,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/pages\/15696\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/pages\/9283"}],"wp:attachment":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/media?parent=15696"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/tags?post=15696"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}