{"id":15697,"date":"2026-09-06T00:25:23","date_gmt":"2026-09-05T22:25:23","guid":{"rendered":"https:\/\/www.lukaswojcik.com\/blog\/narzedzia\/image-delivery-format-negotiation-auditor\/"},"modified":"2026-09-06T00:25:23","modified_gmt":"2026-09-05T22:25:23","slug":"image-delivery-format-negotiation-auditor","status":"publish","type":"page","link":"https:\/\/www.lukaswojcik.com\/blog\/pl\/narzedzia\/image-delivery-format-negotiation-auditor\/","title":{"rendered":"Audyt dostarczania obraz\u00f3w i negocjacji formatu: 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;\">Ten sam obraz mo\u017ce trafi\u0107 na stron\u0119 na cztery sposoby: jako zwyk\u0142y JPEG, jako WebP dla wszystkich, jako plik negocjowany zale\u017cnie od nag\u0142\u00f3wka Accept albo w elemencie picture, kt\u00f3ry wyb\u00f3r zostawia przegl\u0105darce. Drugi i trzeci spos\u00f3b s\u0105 w kodzie niewidoczne \u2014 wida\u0107 je dopiero w nag\u0142\u00f3wkach odpowiedzi. Ta kontrola pyta o ka\u017cdy obraz dwukrotnie, raz z nowoczesnym nag\u0142\u00f3wkiem Accept i raz bez niego, a potem por\u00f3wnuje wyniki.<\/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;\">Adres strony<\/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;\">Z tego serwera: jedno zapytanie o stron\u0119 oraz dla ka\u017cdego z pierwszych sze\u015bciu obraz\u00f3w jedno GET z limitem 256 KB i jedno HEAD. \u017badne ciasteczka nie s\u0105 wysy\u0142ane, \u017cadne skrypty nie s\u0105 wykonywane, nic nie jest zapisywane poza stanem licznika.<\/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;\">Sprawd\u017a dostarczanie obraz\u00f3w<\/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;\">Granice, kt\u00f3re warto zna\u0107: widoczne s\u0105 tylko obrazy w dostarczonym HTML \u2014 to, co skrypt dodaje p\u00f3\u017aniej, pozostaje niewidoczne, podobnie jak t\u0142a z CSS. Sprawdzanych jest pierwszych sze\u015b\u0107 r\u00f3\u017cnych adres\u00f3w, a rzeczywisty rozmiar pliku pochodzi z Content-Length, poniewa\u017c pobieranie zatrzymuje si\u0119 na 256 KB.<\/p>\n<\/div>\n<p><script>\n(function () {\n    'use strict';<\/p>\n<p>    const T = {\"einleitung\":\"Ten sam obraz mo\u017ce trafi\u0107 na stron\u0119 na cztery sposoby: jako zwyk\u0142y JPEG, jako WebP dla wszystkich, jako plik negocjowany zale\u017cnie od nag\u0142\u00f3wka Accept albo w elemencie picture, kt\u00f3ry wyb\u00f3r zostawia przegl\u0105darce. Drugi i trzeci spos\u00f3b s\u0105 w kodzie niewidoczne \u2014 wida\u0107 je dopiero w nag\u0142\u00f3wkach odpowiedzi. Ta kontrola pyta o ka\u017cdy obraz dwukrotnie, raz z nowoczesnym nag\u0142\u00f3wkiem Accept i raz bez niego, a potem por\u00f3wnuje wyniki.\",\"label_url\":\"Adres strony\",\"datenschutz\":\"Z tego serwera: jedno zapytanie o stron\u0119 oraz dla ka\u017cdego z pierwszych sze\u015bciu obraz\u00f3w jedno GET z limitem 256 KB i jedno HEAD. \u017badne ciasteczka nie s\u0105 wysy\u0142ane, \u017cadne skrypty nie s\u0105 wykonywane, nic nie jest zapisywane poza stanem licznika.\",\"knopf\":\"Sprawd\u017a dostarczanie obraz\u00f3w\",\"laeuft\":\"Pobieranie strony i obraz\u00f3w...\",\"grenze\":\"Granice, kt\u00f3re warto zna\u0107: widoczne s\u0105 tylko obrazy w dostarczonym HTML \u2014 to, co skrypt dodaje p\u00f3\u017aniej, pozostaje niewidoczne, podobnie jak t\u0142a z CSS. Sprawdzanych jest pierwszych sze\u015b\u0107 r\u00f3\u017cnych adres\u00f3w, a rzeczywisty rozmiar pliku pochodzi z Content-Length, poniewa\u017c pobieranie zatrzymuje si\u0119 na 256 KB.\",\"h_bilder\":\"Sprawdzone obrazy\",\"tabelle_hinweis\":\"Dostarczono to, co otrzymuje nag\u0142\u00f3wek Accept z AVIF i WebP; nast\u0119pna kolumna pokazuje, co ten sam adres zwraca bez niego. Dwa r\u00f3\u017cne typy oznaczaj\u0105 negocjacj\u0119 po stronie serwera.\",\"h_befunde\":\"Ustalenia\",\"sp_bild\":\"Obraz\",\"sp_geliefert\":\"Dostarczono\",\"sp_ohne_accept\":\"Bez Accept\",\"sp_groesse\":\"Rozmiar\",\"sp_masse\":\"Wymiary\",\"sp_markup\":\"W kodzie\",\"sp_laden\":\"loading\",\"zeile_seite\":\"Strona\",\"zeile_gefunden\":\"Obrazy w kodzie\",\"zeile_geprueft\":\"Obrazy pobrane\",\"zeile_dauer\":\"Czas\",\"zeile_limit\":\"Pozosta\u0142e kontrole w tej godzinie\",\"wert_fehlt\":\"brak\",\"stufe_hoch\":\"Wysoki\",\"stufe_mittel\":\"\u015aredni\",\"stufe_niedrig\":\"Niski\",\"stufe_info\":\"Informacja\",\"stufe_gut\":\"W porz\u0105dku\",\"keine_befunde\":\"Nie ma nic do zg\u0142oszenia.\",\"urteil_gut\":\"Obrazy s\u0105 dostarczane poprawnie.\",\"urteil_warnung\":\"Obrazy si\u0119 \u0142aduj\u0105, ale marnowane s\u0105 bajty albo spok\u00f3j uk\u0142adu strony.\",\"urteil_kritisch\":\"Obraz jest nieosi\u0105galny albo negocjowany plik trafia do pami\u0119ci podr\u0119cznej dla niew\u0142a\u015bciwych przegl\u0105darek.\",\"fehler_kein_token\":\"Kontrola nie mog\u0142a ruszy\u0107, poniewa\u017c reCAPTCHA si\u0119 nie wczyta\u0142a.\",\"fehler_captcha\":\"reCAPTCHA uzna\u0142a zapytanie za zautomatyzowane. Zwykle pomaga ponowne wczytanie strony.\",\"fehler_zu_viele\":\"Limit {limit} kontroli na godzin\u0119 dla tego adresu zosta\u0142 osi\u0105gni\u0119ty.\",\"fehler_adresse\":\"Tego adresu nie da si\u0119 u\u017cy\u0107.\",\"fehler_abruf\":\"Strony nie uda\u0142o si\u0119 pobra\u0107.\",\"fehler_zaehler\":\"Licznik jest niedost\u0119pny, dlatego nic nie zosta\u0142o sprawdzone.\",\"fehler_pruefdienst\":\"Us\u0142uga reCAPTCHA by\u0142a nieosi\u0105galna.\",\"fehler_aufbau\":\"Us\u0142uga nie jest poprawnie skonfigurowana. B\u0142\u0105d le\u017cy po tej stronie.\",\"fehler_eingabe\":\"Zapytania nie da\u0142o si\u0119 odczyta\u0107.\",\"fehler_methode\":\"Niew\u0142a\u015bciwa metoda zapytania.\",\"fehler_netz\":\"Us\u0142uga by\u0142a nieosi\u0105galna.\",\"fehler_antwort\":\"Odpowiedzi nie da\u0142o si\u0119 odczyta\u0107.\",\"fehler_unbekannt\":\"Co\u015b posz\u0142o nie tak i nie ma na to osobnego komunikatu.\",\"grund_leer\":\"Nic nie zosta\u0142o wpisane.\",\"grund_zu_lang\":\"Wpis jest za d\u0142ugi.\",\"grund_unlesbar\":\"To nie uk\u0142ada si\u0119 w adres.\",\"grund_schema\":\"Sprawdzane s\u0105 tylko adresy http i https.\",\"grund_benutzerinfo\":\"Wpisy zawieraj\u0105ce dane logowania s\u0105 odrzucane.\",\"grund_kein_punkt\":\"Nazwa hosta potrzebuje co najmniej jednej kropki.\",\"grund_hostform\":\"Oczekiwana jest nazwa hosta, nie adres IP.\",\"grund_port\":\"Sprawdzane s\u0105 tylko porty 80, 443, 8080 i 8443.\",\"grund_gesperrter_bereich\":\"Ten host wskazuje na sie\u0107 prywatn\u0105 lub zarezerwowan\u0105. Takie nigdy nie s\u0105 pobierane.\",\"grund_kein_dns\":\"Nazwa hosta nie jest rozwi\u0105zywana.\",\"grund_abruf\":\"Adres nie odpowiedzia\u0142.\",\"grund_zu_viele_spruenge\":\"Adres przekierowuje zbyt wiele razy.\",\"befund_status\":\"Strona odpowiedzia\u0142a statusem {status} || Obrazy zosta\u0142y mimo to odczytane z otrzymanej tre\u015bci, ale strona bez statusu 200 rzadko pokazuje to, co widz\u0105 odwiedzaj\u0105cy.\",\"befund_keine_bilder\":\"Brak elementu img w dostarczonym HTML || Albo strona rzeczywi\u015bcie \u017cadnego nie ma, albo ka\u017cdy obraz wstawia skrypt po wczytaniu. Ta kontrola widzi tylko to, co wysy\u0142a serwer.\",\"befund_nur_stichprobe\":\"{gesamt} obraz\u00f3w w kodzie, pobrano pierwszych {n} || Pr\u00f3bka utrzymuje obci\u0105\u017cenie sprawdzanego serwera na niskim poziomie. Ustalenia dotycz\u0105 tych {n}; reszta mo\u017ce wygl\u0105da\u0107 inaczej.\",\"befund_bild_unerreichbar\":\"{url} nie da\u0142 si\u0119 pobra\u0107 || Pow\u00f3d: {grund}. Obraz, do kt\u00f3rego strona si\u0119 odwo\u0142uje, a kt\u00f3ry nie odpowiada, zostawia luk\u0119 i za ka\u017cdym razem kosztuje jedno zapytanie.\",\"befund_bild_status\":\"{url} odpowiedzia\u0142 statusem {status} || Adres jest w kodzie, ale nie dostarcza pliku. Przegl\u0105darki pokazuj\u0105 wtedy tekst alternatywny, a roboty notuj\u0105 zepsuty zas\u00f3b.\",\"befund_aushandlung_ohne_vary\":\"{url} negocjuje formaty, lecz nie wysy\u0142a Vary: Accept || Z nowoczesnym nag\u0142\u00f3wkiem Accept przychodzi {modern}, bez niego {klassisch} \u2014 odpowied\u017a zale\u017cy wi\u0119c od zapytania. Vary zg\u0142osi\u0142o {vary}. Ka\u017cda wsp\u00f3lna pami\u0119\u0107 podr\u0119czna po drodze zapisze pierwsz\u0105 odpowied\u017a i poda j\u0105 wszystkim; przegl\u0105darka bez obs\u0142ugi WebP dostanie wtedy plik WebP.\",\"befund_aushandlung_mit_vary\":\"{url} negocjuje formaty i m\u00f3wi o tym || {modern} dla nowoczesnej przegl\u0105darki, {klassisch} dla starej, a w odpowiedzi Vary: Accept. Dok\u0142adnie tego po\u0142\u0105czenia potrzebuje pami\u0119\u0107 podr\u0119czna, aby rozdzieli\u0107 oba przypadki.\",\"befund_ohne_laenge\":\"{url} przyszed\u0142 bez Content-Length || Rzeczywisty rozmiar pliku pozostaje nieznany, poniewa\u017c pobieranie ko\u0144czy si\u0119 na 256 KB. Odpowiedzi wysy\u0142ane porcjami zachowuj\u0105 si\u0119 w ten spos\u00f3b; rozmiar da\u0142oby si\u0119 zmierzy\u0107 tylko przy pe\u0142nym pobraniu.\",\"befund_schwer_und_klassisch\":\"{url} wa\u017cy {kb} KB jako {typ} || Plik tej wielko\u015bci w klasycznym formacie to typowe miejsce, w kt\u00f3rym strona oddaje po\u0142ow\u0119 swoich bajt\u00f3w. WebP oszcz\u0119dza przy tej samej jako\u015bci zwykle jedn\u0105 czwart\u0105 do jednej trzeciej, AVIF wi\u0119cej.\",\"befund_uebermass\":\"{url} jest {faktor} razy wi\u0119kszy, ni\u017c jest wy\u015bwietlany || Wymiar w\u0142asny {eigen} px, najwi\u0119ksza podana szeroko\u015b\u0107 wy\u015bwietlania {anzeige} px. Nadwy\u017cka zostaje przes\u0142ana i dopiero w przegl\u0105darce pomniejszona.\",\"befund_bild_ohne_cache_control\":\"{url} nie niesie Cache-Control || Bez tej wskaz\u00f3wki ka\u017cda pami\u0119\u0107 podr\u0119czna sama decyduje, jak d\u0142ugo plik obowi\u0105zuje. Obrazy pod sta\u0142ym adresem zmieniaj\u0105 si\u0119 rzadko i s\u0105 najbezpieczniejszymi kandydatami do d\u0142ugiego terminu.\",\"befund_bild_kurzer_cache\":\"{url} mo\u017ce by\u0107 przechowywany {sekunden} sekund || Dla obrazu to kr\u00f3tko. Gdy adres zmienia si\u0119 razem z tre\u015bci\u0105, zwyk\u0142\u0105 warto\u015bci\u0105 jest rok.\",\"befund_ohne_masse\":\"{n} z {gesamt} obraz\u00f3w nie ma szeroko\u015bci i wysoko\u015bci || Bez obu atrybut\u00f3w przegl\u0105darka nie zarezerwuje miejsca przed nadej\u015bciem pliku, a tekst poni\u017cej podskoczy, gdy plik dotrze. W\u0142a\u015bnie ten skok mierzy Cumulative Layout Shift.\",\"befund_masse_vollstaendig\":\"Wszystkie {n} obrazy maj\u0105 szeroko\u015b\u0107 i wysoko\u015b\u0107 || Przegl\u0105darka rezerwuje miejsce przed nadej\u015bciem pliku, dzi\u0119ki czemu nic nie podskakuje.\",\"befund_ohne_alt\":\"{n} obraz\u00f3w nie ma atrybutu alt || Czytniki ekranu odczytuj\u0105 wtedy nazw\u0119 pliku, a wyszukiwarki trac\u0105 jedyny tekst opisuj\u0105cy obraz. Puste alt jest przy ozdobnikach poprawn\u0105 odpowiedzi\u0105, brakuj\u0105ce nie.\",\"befund_nur_klassisch\":\"{n} obraz\u00f3w przychodzi jako JPEG lub PNG bez nowoczesnej alternatywy || Ani negocjacji, ani elementu picture z WebP czy AVIF. To, czy ma to znaczenie, zale\u017cy od rozmiaru pliku.\",\"befund_aushandlung_gefunden\":\"{n} obraz\u00f3w jest negocjowanych pod wzgl\u0119dem formatu || Serwer patrzy na nag\u0142\u00f3wek Accept i odpowiada stosownie do niego.\",\"befund_schwere_bilder\":\"{n} obraz\u00f3w wa\u017cy ponad {grenze_kb} KB w klasycznym formacie || To kandydaci, kt\u00f3rych konwersja op\u0142aca si\u0119 w pierwszej kolejno\u015bci.\",\"befund_erstes_lazy\":\"Pierwszy obraz ma loading=lazy || {url}. Obraz na pocz\u0105tku strony zwykle decyduje o Largest Contentful Paint, a leniwe \u0142adowanie op\u00f3\u017ania w\u0142a\u015bnie ten do czasu ustalenia uk\u0142adu.\",\"befund_spaet_ohne_lazy\":\"{n} obraz\u00f3w poni\u017cej pierwszych trzech \u0142aduje si\u0119 od razu || Obrazy daleko w dole mog\u0105 poczeka\u0107, a\u017c wejd\u0105 w pole widzenia. Tego, czy naprawd\u0119 s\u0105 poni\u017cej widocznego obszaru, nie da si\u0119 rozstrzygn\u0105\u0107 na podstawie samego kodu.\"};<\/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>Narz\u0119dzie pobiera stron\u0119, bierze pierwsze obrazy z jej kodu i pyta o ka\u017cdy dwa razy: raz jako przegl\u0105darka przyjmuj\u0105ca WebP i AVIF, raz jako taka, kt\u00f3ra ich nie przyjmuje. Por\u00f3wnanie pokazuje, czy w og\u00f3le zachodzi negocjacja i czy odpowied\u017a niesie Vary: Accept \u2014 bez tego wsp\u00f3lna pami\u0119\u0107 podr\u0119czna poda nowoczesny plik przegl\u0105darce, kt\u00f3ra go nie odczyta. Sprawdzany jest te\u017c kod: szeroko\u015b\u0107 i wysoko\u015b\u0107, srcset, loading oraz alt.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":9284,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-tool-base.php","meta":{"footnotes":""},"tags":[92295,92762,92283],"class_list":["post-15697","page","type-page","status-publish","hentry","tag-seo-pl","tag-web-development-pl","tag-web-performance-pl"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.1 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Audyt dostarczania obraz\u00f3w i negocjacji formatu: 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\/pl\/narzedzia\/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=\"Audyt dostarczania obraz\u00f3w i negocjacji formatu: WebP, AVIF, srcset, Vary - Lukas Wojcik - Blog\" \/>\n<meta property=\"og:description\" content=\"Narz\u0119dzie pobiera stron\u0119, bierze pierwsze obrazy z jej kodu i pyta o ka\u017cdy dwa razy: raz jako przegl\u0105darka przyjmuj\u0105ca WebP i AVIF, raz jako taka, kt\u00f3ra ich nie przyjmuje. Por\u00f3wnanie pokazuje, czy w og\u00f3le zachodzi negocjacja i czy odpowied\u017a niesie Vary: Accept \u2014 bez tego wsp\u00f3lna pami\u0119\u0107 podr\u0119czna poda nowoczesny plik przegl\u0105darce, kt\u00f3ra go nie odczyta. Sprawdzany jest te\u017c kod: szeroko\u015b\u0107 i wysoko\u015b\u0107, srcset, loading oraz alt.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.lukaswojcik.com\/blog\/pl\/narzedzia\/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\\\/pl\\\/narzedzia\\\/image-delivery-format-negotiation-auditor\\\/\",\"url\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/narzedzia\\\/image-delivery-format-negotiation-auditor\\\/\",\"name\":\"Audyt dostarczania obraz\u00f3w i negocjacji formatu: WebP, AVIF, srcset, Vary - Lukas Wojcik - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/#website\"},\"datePublished\":\"2026-09-05T22:25:23+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/narzedzia\\\/image-delivery-format-negotiation-auditor\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/narzedzia\\\/image-delivery-format-negotiation-auditor\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.lukaswojcik.com\\\/blog\\\/pl\\\/narzedzia\\\/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-3\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Audyt dostarczania obraz\u00f3w i negocjacji formatu: 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":"Audyt dostarczania obraz\u00f3w i negocjacji formatu: 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\/pl\/narzedzia\/image-delivery-format-negotiation-auditor\/","og_locale":"en_US","og_type":"article","og_title":"Audyt dostarczania obraz\u00f3w i negocjacji formatu: WebP, AVIF, srcset, Vary - Lukas Wojcik - Blog","og_description":"Narz\u0119dzie pobiera stron\u0119, bierze pierwsze obrazy z jej kodu i pyta o ka\u017cdy dwa razy: raz jako przegl\u0105darka przyjmuj\u0105ca WebP i AVIF, raz jako taka, kt\u00f3ra ich nie przyjmuje. Por\u00f3wnanie pokazuje, czy w og\u00f3le zachodzi negocjacja i czy odpowied\u017a niesie Vary: Accept \u2014 bez tego wsp\u00f3lna pami\u0119\u0107 podr\u0119czna poda nowoczesny plik przegl\u0105darce, kt\u00f3ra go nie odczyta. Sprawdzany jest te\u017c kod: szeroko\u015b\u0107 i wysoko\u015b\u0107, srcset, loading oraz alt.","og_url":"https:\/\/www.lukaswojcik.com\/blog\/pl\/narzedzia\/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\/pl\/narzedzia\/image-delivery-format-negotiation-auditor\/","url":"https:\/\/www.lukaswojcik.com\/blog\/pl\/narzedzia\/image-delivery-format-negotiation-auditor\/","name":"Audyt dostarczania obraz\u00f3w i negocjacji formatu: WebP, AVIF, srcset, Vary - Lukas Wojcik - Blog","isPartOf":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/#website"},"datePublished":"2026-09-05T22:25:23+00:00","breadcrumb":{"@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/narzedzia\/image-delivery-format-negotiation-auditor\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.lukaswojcik.com\/blog\/pl\/narzedzia\/image-delivery-format-negotiation-auditor\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.lukaswojcik.com\/blog\/pl\/narzedzia\/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-3\/"},{"@type":"ListItem","position":3,"name":"Audyt dostarczania obraz\u00f3w i negocjacji formatu: 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\/15697","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=15697"}],"version-history":[{"count":0,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/pages\/15697\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/pages\/9284"}],"wp:attachment":[{"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/media?parent=15697"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lukaswojcik.com\/blog\/wp-json\/wp\/v2\/tags?post=15697"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}