Článek

Optimalizace médií webu pro rychlost a Core Web Vitals

Obrázky obvykle tvoří přibližně 40 procent celkové váhy webové stránky, více než jakýkoli jiný typ zdroje, a video na stránkách bohatých na média přidává mnohem víc. Mít je v pořádku je to nejúčinnější, co můžete udělat pro rychlost načítání, skóre Core Web Vitals a pozici ve vyhledávání. Dobrá zpráva: nic z toho nevyžaduje specializovaný software ani server a vaše soubory nikdy nemusí opustit vaše zařízení.

Napsal Bastien Sulyan · Publikováno dne 16. června 2026

Nejdřív ze všeho zvolte správný formát

Volba formátu záleží víc než kterýkoli posuvník kvality. Pro fotografie na webové stránce je správnou výchozí volbou WebP: je o 25 až 35 procent menší než JPEG při stejné vizuální kvalitě a podporuje jej každý moderní prohlížeč. AVIF komprimuje ještě více, až o 50 procent lépe než JPEG, za cenu pomalejšího kódování. AVIF používejte pro hlavní obrázky a fotky produktů, které komprimujete jednou; WebP pro vše, co zpracováváte dávkově nebo potřebujete rychle. PNG má místo jen tam, kde potřebujete bezztrátovou přesnost nebo průhledné pozadí. SVG je jedinou rozumnou volbou pro loga, ikony a ilustrace: škáluje do libovolné velikosti a často váží pár kilobajtů proti stovkám u rastrového ekvivalentu.

Komprese obrázků bez viditelné ztráty kvality

Začněte zmenšením na skutečné rozměry zobrazení: hlavní obrázek, který se zobrazuje v šířce 1280 pixelů, nepotřebuje 4000 pixelů dat. Nejprve zmenšete, poté komprimujte. U fotografií je praktickým dnem kvalita 80 ve WebP nebo JPEG, pod kterou si běžní návštěvníci začínají všímat rozdílu, takže mířte na 75 až 85 a před publikováním si prohlédněte výstup při plném přiblížení. U grafiky s textem a plochými oblastmi zachová ostrost, kterou ztrátové formáty rozmažou, bezztrátový PNG nebo SVG. Kompresor obrázků na tomto webu zvládá všechny tyto formáty, běží výhradně ve vašem prohlížeči a používá stejné algoritmy jako dedikované desktopové nástroje.

Převod videa pro web bez jeho nahrávání

Smyčky na pozadí a vložené video jsou místem, kde optimalizace webových médií často selhává. MP4 s H.264 se přehraje všude a WebM je bezlicenční alternativa podporovaná každým moderním prohlížečem. Převodník videa na tomto webu kóduje WebM pomocí VP8, který je ve stejné třídě komprese jako H.264: pouhá změna kontejneru tedy soubor nezmenší, skutečným přínosem je zcela bezlicenční řetězec kodeků a nativní podpora alfa kanálu. Praktickým přístupem je převést jednou na WebM, servírovat jej v prvku video jako preferovaný zdroj a MP4 ponechat jako záložní variantu pro starší prohlížeče. Převod probíhá uvnitř vašeho prohlížeče pomocí FFmpeg zkompilovaného do WebAssembly: nic se nenahrává a soubory do 500 MB se převedou bez čekání ve frontě. U vloženého videa na pozadí zvažte také ořezávač videa pro vystřižení mrtvých sekund před kódováním: délka je největším faktorem velikosti souboru.

Vložené prostředky: base64 a SVG

Velmi malé obrázky, ikony a favikony vložené přímo do HTML nebo CSS jako řetězce base64 odstraňují jeden síťový roundtrip na každý prostředek. To dává smysl u prostředků pod zhruba 2 KB, které se objevují na každé stránce, jako je sprite loga nebo indikátor načítání. Větší prostředky by měly zůstat samostatnými soubory, protože base64 kóduje o 33 procent větší než binární data a prohlížeče ukládají do mezipaměti odkazy na soubory, ale samostatně nikoli vložená data. Optimalizátor SVG odstraní z exportovaných SVG editorové zbytky, aniž by sáhl na vizuální výstup. Převodník obrázku na base64 vygeneruje ve vašem prohlížeči datové URI připravené k vložení.

Kompromis mezi samostatným souborem v mezipaměti vyžadujícím další HTTP požadavek a vloženým Base64 objektem, který je asi o 33 % větší a znovu odesílán s každou stránkou

Posílejte správnou velikost a načtěte ji jako první

Dvě podrobnosti při doručování jsou stejně důležité jako samotné soubory. První je responzivní velikost. Při použití srcset se seznamem deskriptorů šířky (image-400.webp 400w, image-800.webp 800w a tak dále) prohlížeč vybere nejmenší soubor, který stále pokryje obrazovku, přičemž před odesláním požadavku vynásobí šířku v CSS hodnotou device pixel ratio (poměr fyzických a CSS pixelů). Telefon s rozvržením širokým 390px a 3x obrazovkou potřebuje přibližně 1170 pixelů, takže stáhne verzi 1200w a přeskočí původní desktopový soubor. Druhou podrobností je priorita. Prohlížeče spouštějí preload scanner (předběžný skener zdrojů), který čte dopředu a začíná stahovat obrázky ještě před tím, než k nim hlavní parser dojde; přidáním fetchpriority="high" k největšímu obrázku v části stránky viditelné bez scrollování (above-the-fold) sdělíte prohlížeči, aby jej stáhl jako první, což obvykle rozhoduje o hodnotě Largest Contentful Paint.

Sloupce porovnávající originál z fotoaparátu o 4000 pixelech, velikost 1200 pixelů použitou rozvržením a náhled o 480 pixelech, ukazující, že změna velikosti šetří více než nastavení kvality

Nástroje v tomto článku

Časté dotazy

Ovlivňuje komprese obrázků mou pozici ve vyhledávání?

Google používá Core Web Vitals jako signál pro hodnocení a Largest Contentful Paint je téměř vždy obrázek nebo náhled videa. Stránka, jejíž hlavní obrázek se načte do jedné sekundy, dosahuje lepšího skóre než ta, kde to trvá tři sekundy. Komprese a správný formát tuto metriku přímo ovlivňují, takže ano, optimalizace obrázků má měřitelný dopad na SEO. Účinek je nejsilnější na mobilu, kde jsou připojení pomalejší a postih za těžké obrázky větší.

Proč zpracovávat média lokálně místo používání webové služby?

Většina online mediálních nástrojů vyžaduje nahrání vašich souborů na vzdálený server, což zabírá čas, spotřebovává přenosové pásmo a znamená, že kopie vašeho souboru existuje na infrastruktuře, kterou nemáte pod kontrolou. Nástroje na tomto webu běží výhradně ve vašem prohlížeči: vaše obrázky a videa se zpracují na vašem zařízení a výstup se stáhne přímo. Není potřeba účet, žádné čekání na nahrání a o vašich souborech se na server nikdy nic neodešle.