WebP v PrestaShopu je zapnuté, ale obrázky jsou stále těžké. Jak to zkontrolovat?

Zapnutá konverze WebP nerozhoduje o tom, jaký obrázek prohlížeč stáhne. Zkontrolujte skutečný požadavek na kartě Network: vybranou URL, hlavičku Content-Type, rozměry a velikost odpovědi. Teprve potom určíte, zda je problémem chybějící správná varianta, pravidlo serveru, cache nebo příliš velká fotografie.

Tento návod je pro majitele obchodů PrestaShop, kteří už mají WebP, ale stále vidí těžké obrázky nebo slabý výsledek výkonu. Obsahuje skutečný, kontrolovaný test tří ilustrací a způsob, jak oddělit konverzi souboru od jeho doručení klientovi.

1. Začněte fotografií viditelnou na konkrétní stránce

Vyberte jeden obrázek na kartě produktu nebo v seznamu produktů. Nezačínejte náhodným souborem v adresáři serveru: šablona může používat jiný náhled, variantu pro obrazovku s vyšší hustotou pixelů nebo adresu z CDN. WebP originálu automaticky nenahrazuje všechny potřebné velikosti.

Otevřete vývojářské nástroje, přejděte do Network, po dobu testu vypněte cache a obnovte stránku. Vyberte filtr obrázků. U líně načítaných fotografií sjeďte na zkoumané místo. Zapište si URL, typ odpovědi, velikost a informaci, zda byla data skutečně stažena ze sítě. Tyto možnosti popisuje dokumentace Network v Chrome DevTools.

Neporovnávejte úplné stažení JPEG s řádkem WebP označeným jako memory cache. Takový výsledek popisuje jiné podmínky. Podobně malý přenos při odpovědi 304 neznamená, že samotný grafický soubor má najednou několik bajtů.

2. Adresa .jpg může vracet WebP

Ve zdrojových kódech WebP Pro 2.1.3 může doručování obrázku fungovat přes pravidla Apache: požadavek na JPG nebo PNG je přepsán na existující variantu WebP, pokud prohlížeč deklaruje její podporu. Adresa viditelná v HTML tedy může stále končit na .jpg, zatímco odpověď má typ image/webp.

Proto samotný náhled kódu stránky nestačí k závěru „WebP nefunguje“. Zkontrolujte formát přijaté odpovědi. Na druhou stranu nápis .webp v nastavení nebo existence souboru na disku nedokazují, že se příslušné pravidlo vykonává na serveru obsluhujícím obchod.

3. Zkontrolujte srcset, picture a vybranou variantu

U responzivních obrázků prohlížeč vybírá zdroj s ohledem na podmínky stránky a zařízení. Zkontrolujte prvek img, případné srcset a sizes, a u picture také prvky source. Vlastnost currentSrc pomáhá určit skutečně vybranou adresu, místo abyste se řídili prvním záznamem v kódu.

Prvek picture umožňuje doručovat alternativní zdroje, například podle formátu nebo podmínky media; pravidla výběru popisuje dokumentace prvku picture. Ne každá šablona tento mechanismus využívá a ne každý obchod potřebuje změnu HTML, pokud správně funguje vyjednávání formátu na straně serveru.

Opakujte test pro telefon. Fotografie o šířce 2000 px použitá v malém náhledu zůstává zbytečnou zátěží i po konverzi. Volba velikosti a volba formátu jsou dvě samostatná nastavení.

4. Vlastní měření: tři ilustrace JPEG a WebP

Pro kontrolovaný test jsme použili tři existující blogové ilustrace o velikosti 700 × 400 px. Každý JPEG jsme převedli pomocí PHP 8.1.34 a GD 2.3.3 do WebP s parametrem kvality 80. Neměnili jsme rozměry ani ořez. Chromium stáhl šest souborů z lokálního HTTP serveru s vypnutou cache a bez CDN.

Zdrojem náhledů byla lokální kopie PrestaShop 8.2.8 s Warehouse 4.7.2. Samotné měření proběhlo na samostatné srovnávací stránce, takže neměří čas otevření karty produktu ani efekt nasazení modulu. Uvádíme bajty obsahu přijatých odpovědí bez transportních hlaviček. Všech šest požadavků skončilo HTTP 200 a správným typem obrázku.

Výsledek ukazuje velikosti konkrétních souborů. Nedokazuje, že každý WebP bude menší o stejnou hodnotu ani že obě kódování mají totožnou vizuální kvalitu. Parametry kvality různých formátů nejsou společnou škálou. Prohlédněte si fotografie v reálné velikosti použití a věnujte pozornost textům, jemným texturám a ostrým hranám.

5. Zkontrolujte frontu a teprve potom opakujte konverzi

Ve WebP Pro 2.1.3 může uložení nebo přepočítání velikosti obrázku přidat úlohu do fronty. Hotová varianta vznikne až po jejím zpracování. Při diagnostice zkontrolujte, zda byl vybrán správný rozsah, zda byla úloha obsloužena a zda neskončila chybou. Samotné uložení harmonogramu automaticky nespouští systémovou úlohu CRON.

Změna kvality také nemusí hned změnit existující soubory. V prověřeném kódu může být čerstvý WebP mimo režim přepsání přeskočen. Pokud vědomě měníte kvalitu, naplánujte opětovné vygenerování potřebného rozsahu a potom ověřte výsledek. Nespouštějte úplnou regeneraci celého obchodu při každé drobné odchylce.

Pokud potřebujete návod k samotnému procesu vytváření náhledů, přečtěte si návod o generování a regenerování obrázků. Zde je cílovým bodem obrázek přijatý klientem.

6. Cache, CDN a LCP kontrolujte odděleně

Při vyjednávání formátu je důležité, aby mezivrstva rozlišovala varianty odpovědi. Pravidla WebP Pro počítají s Vary: Accept při dostupném modulu hlaviček Apache. To však neznamená automatickou konfiguraci libovolného CDN nebo Nginx. Zkontrolujte skutečnou odpověď z místa, odkud ji prohlížeč stahuje.

Po změně obrázku obnovte správnou cache a opakujte stejný test. Zapište si vybrané zařízení, stav cache, URL a rozměry. Bez těchto údajů srovnání „před a po“ snadno smíchá různé fotografie nebo různé podmínky.

Menší soubor může omezit dobu stahování, ale LCP zahrnuje i další fáze, včetně čekání na server, objevení zdroje a jeho zobrazení. Návod Google k optimalizaci LCP ukazuje, proč samotná komprese neřeší každé zpoždění. Neslibujte výsledek PageSpeed 100 jen na základě samotného formátu.

Další krok: pokud chybí generování nebo doručování správných variant, podívejte se na WebP Pro pro PrestaShop. Pokud jsou obrázky správné a stránka je stále pomalá, připravte výsledky Network a objednejte si diagnostiku výkonu obchodu.

Zkontrolováno 13.09.2026. Mechanismy modulu: kód WebP Pro 2.1.3. Měření ilustrací: samostatný kontrolovaný HTTP test; nejde o měření rychlosti produkčního obchodu.