Základy Core Web Vitals: Metriky, které opravdu důležitou
Pochopte tři klíčové metriky — LCP, FID a CLS. Proč jsou důležité a jak je měřit na svém webu.
Přečtěte si článekSnižte velikost obrázků o 40–60 procent. Naučte se používat WebP, optimalizovat JPEG a PNG formáty správně.
Obrázky jsou největším viníkem pomalých webů. Když uživatel čeká na načtení stránky, často čeká právě na obrázky. Nejsou to zbytečné informace — jsou to skutečná data, která musíte přenášet.
Dobrá zpráva? Můžete zmenšit velikost obrázků o 40 až 60 procent a téměř nikdo to nepozná. Obrázky budou vypadat stejně, ale vaše web se bude otevírat o sekundy rychleji. Pro uživatele to znamená lepší zážitek. Pro vás to znamená lepší hodnocení v Google.
Ne všechny formáty jsou stejné. WebP je nejmodernější, ale JPEG a PNG stále dominují. Věděli jste, že mnoho webů používá stále PNG pro fotografie? To je chyba.
Nejlepší poměr kvality a velikosti. Je až o 30 procent menší než JPEG. Prohlížeče ho podporují od roku 2018.
Ideální pro fotografie. Podporuje miliony barev a je kompatibilní všude. Kvalita se nastavuje — vy říkáte, jak moc chcete zmenšit.
Nejlepší pro obrázky s průhledností a ikony. Ale pro fotografie? Používejte JPEG nebo WebP místo toho.
Komprese není tajemství. Je to věda. Tady je přesný postup, který vám pomůže.
Máte spoustu možností. Tady jsou nejlepší.
Online nástroj, který kompresi zvládne bez selhání. Nahrajete až 20 obrázků najednou. Není to ideální pro hromadné zpracování, ale výsledky jsou skvělé.
Bezplatný webový nástroj od Google. Vidíte náhled v reálném čase. Můžete měnit kvalitu a srovnávat velikost před a po.
Desktopová aplikace, kterou jednoduše přetáhnete obrázky. Automaticky je zoptimalizuje. Pro Mac uživatele je to nejrychlejší řešení.
Pro vývojáře. Příkazový řádek, který vám umožní automatizovat kompresi. Nakalibrujete jednou, pak běží pro stovky obrázků.
Když správně kompresi nastavíte, uvidíte velké rozdíly. Tady je příklad z reálného projektu.
Původní JPEG fotografie: 2.4 MB
Kvalita 85 procent: 680 kB (snížení o 71 procent)
Převedeno na WebP: 420 kB (snížení o 82 procent)
A rozdíl v kvalitě? Skoro žádný. Uživatel fotku vidí stejně ostrý. Ale web se otevírá výrazně rychleji.
Komprese je důležitá. Ale chytrá volba obrázků je ještě důležitější. Existují dva způsoby, jak posílat správný obrázek správnému zařízení.
Použijte
srcset
pro jednoduché případy. Atribut vám umožní poskytnout více verzí
obrázku v různých rozlišeních. Mobilní zařízení dostane menší
verzi, desktop dostane větší. Všechny jsou zkomprimované, ale
každé zařízení dostane přesně to, co potřebuje.
Pro komplexnější scénáře? Element
picture
vám dá úplnou kontrolu. Můžete posílat WebP prohlížečům, které
ho podporují, a PNG těm, které ne. Tím kombinujete nejlepší
kvalitu s největší kompatibilitou.
Komprese obrázků není věda. Je to jednoduchý krok, který můžete udělat dnes. Nebude vás to trvat dlouho — pár hodin a vaši obrázky budou připravené.
Výhody? Váš web se otevírá rychleji. Uživatelé jsou spokojení. Google vás lépe hodnotí. Je to snadné. Začněte s TinyPNG a zkomprimujte první obrázky. Pak můžete jít dál.
Komprese obrázků je jen jeden krok. Zjistěte, jak vylepšit Core Web Vitals a zrychlit váš web ještě více.
Přečtěte si další článekTato příručka je určena pro vzdělávací účely. Cílem je poskytnout vám znalosti o kompresi obrázků a optimalizaci webu. Postupy popsané zde jsou běžné praktiky používané profesionály. Výsledky se mohou lišit v závislosti na typu obrázku, formátu a nastavení komprese. Doporučujeme vždy testovat kompresi na vlastních obrázcích a ověřit si, že výsledná kvalita vám vyhovuje. Každý projekt je jedinečný a to, co funguje pro jednu stránku, nemusí fungovat stejně pro druhou.