Obrázek v zastaralém formátu bez moderní alternativy

Na každé živé stránce se hledají obrázky v zastaralém formátu (jpg, jpeg, png, gif, bmp), ke kterým zároveň není nabídnutá moderní alternativa, tedy webp nebo avif ve <picture><source>. Když se aspoň jeden takový najde, vznikne nález s počtem a příkladem.

Prázdná značka <img src=""> se nepočítá (nic nezobrazí), SVG se nepočítá a obrázky bez rozpoznatelné přípony taky ne: u vektoru ani u dat vložených přímo do stránky nedává webp alternativa smysl.

Co kontrola nedělá (a tohle je u ní obzvlášť podstatné):

• Neměří velikost souboru. Optimalizovaný JPEG o 40 kB dostane nález, zatímco špatně uložený WebP o 2 MB projde. Kontrola se dívá na formát, ne na váhu.
• Nepozná konverzi na straně serveru. Weby a CDN, které podle hlavičky Accept pošlou webp pod původní příponou .jpg, nález dostanou neprávem, a je to běžné řešení.
• Neposuzuje kvalitu ani rozměry.
• Nevidí obrázky vložené přes CSS.

Je to tedy hrubé síto na formát, ne měření výkonu. Nález je na úrovni stránky, závažnost varování.

Na viditelnost v odpovědích AI doložený vliv nemáme: obrázky v žádném formátu nezmění, co si model ze stránky přečte.

Souvislost s klasickým vyhledáváním je nepřímá a je fér ji popsat jako nepřímou: moderní formáty jsou menší, menší obrázky se stahují rychleji, a rychlost načtení hlavního obrázku měří SEO-20 (LCP), tedy metrika, kterou Google ve vlastní dokumentaci uvádí jako součást řadicích systémů. Řetěz tam je, ale je to řetěz o třech článcích, ne přímý vztah.

A upřímně k tomu, co ten nález umí a neumí: protože neměří velikost souboru, nedokáže odlišit web, který má obrázky optimalizované dobře (jen ve starším formátu), od webu, který posílá nezmenšené fotografie z foťáku. První z nich náš nález dostane a opravovat nemusí; druhý má problém, který tahle kontrola vůbec nezměří.

Praktický závěr: než podle tohohle nálezu začnete převádět obrázky, podívejte se, kolik doopravdy váží. Když je největší obrázek na stránce 80 kB, převod na WebP vám nepřinese nic. Když má 3 MB, máte problém, ale ten nevyřeší formát, ten vyřeší zmenšení.

Nejdřív změřte, pak převádějte. Ve vývojářských nástrojích prohlížeče na kartě sítě uvidíte velikosti obrázků seřazené, a obvykle zjistíte, že problém dělají dva soubory, ne padesát.

Pokud převod dává smysl, správný zápis nabídne moderní formát a nechá záložní pro starší prohlížeče:

<picture>
  <source srcset="cerpadlo.avif" type="image/avif">
  <source srcset="cerpadlo.webp" type="image/webp">
  <img src="cerpadlo.jpg" alt="Tepelné čerpadlo na severní stěně domu"
       width="1200" height="800">
</picture>

• Prohlížeč si vybere první formát, který umí: pořadí od nejúspornějšího.
• alt, width a height patří na <img>, ne na <source>. Bez nich si vyrobíte SEO-10 a SEO-21.
• Nepřevádějte ručně. Ať to dělá redakční systém nebo obrázková služba při nahrání; ručně převedená knihovna zestárne při prvním novém obrázku.
• Automatická konverze na CDN je plnohodnotné řešení: pošle webp tomu, kdo ho umí, pod původní adresou. Náš nález u ní zůstane (viz výš), a to je jeho mez, ne váš problém.
• GIF pro animace nahraďte videem. Animovaný GIF bývá desetinásobně větší než totéž jako mp4 nebo webm; tady je úspora největší ze všech.