Článek
Optimalizace médií webu pro rychlost a Core Web Vitals
Obrázky a videa tvoří obvykle 60 až 80 procent celkové váhy webové stránky. 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í.
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, ale WebM s VP9 je při stejné kvalitě o 20 až 40 procent menší, což je důležité pro mobilní uživatele na omezených připojeních. 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. Zdejší převodník videa využívá FFmpeg zkompilovaný do WebAssembly: převod probíhá uvnitř vašeho prohlížeče, nic se nenahrává a soubory libovolné velikosti fungují, dokud má vaše zařízení dost paměti. 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í.
Nástroje v tomto článku
- Komprimovat obrazky Zmensete velikost obrazku bez nahravani. Posuvnik kvality nebo cilova velikost v KB. Davkove zpracovani.
- Změnit velikost obrázků Změňte velikost a převeďte své obrázky (JPEG, PNG, WebP) bez jejich nahrávání.
- Optimalizátor SVG Optimalizujte a minifikujte soubory SVG pomocí SVGO přímo v prohlížeči. Bez nahrávání.
- Převodník videa Převádějte video mezi MP4, WebM, MKV a MOV (H.264/H.265/VP9) v prohlížeči. Bez nahrávání.
- Obrázek na Base64 Převádějte obrázky na datové URI Base64 (a zpět) přímo v prohlížeči. Kopírování, úryvek CSS, bez nahrávání.
Č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.