Velikost obrázků je jedním z klíčových faktorů ovlivňujících rychlost při načítání webových stránek, přičemž pochopitelně platí, že čím menší velikost souborů, tím rychleji se stránky načítají.
Rychlost načítání webových stránek je důležitá nejen z hlediska uživatelské přívětivosti, ale i z pohledu správně nastaveného SEO. Rychlejší stránky dosahují v rámci SEO lepšího hodnocení, což se může projevit vyšší návštěvností webu. Menší velikost obrázků ocení i návštěvníci z mobilních zařízení, kterým komprimované obrázky šetří datový přenos, pokud mají omezený datový tarif. Komprimované obrázky dále znamenají nižší spotřebu šířky pásma a menší zatížení serveru.
Pro komprimaci obrázků na web existují dva způsoby:
Ztrátová komprese (Lossy)
- Redukuje velikost souboru odstraněním části dat, což ovšem může snížit výslednou kvalitu
- Používá se u formátu JPEG
- Vhodná pro fotografie, u nichž menší ztráta kvality není příliš patrná.
Bezztrátová komprese (Lossless)
- Zmenšuje velikost souboru bez ztráty kvality obrázku
- Používá se u formátu PNG
- Vhodná pro obrázky s textem nebo grafiku, u níž je důležitá maximální kvalita.
Pro kompresi je možné využít online nástroje, jako je TinyPNG, JPEG-Optimizer nebo ImageOptim, případně softwarové programy typu Photoshop a GIMP či specializované aplikace ála Caesium.
Rozdíl mezi resamplingem a scalingem
Oba pojmy souvisí s úpravou rozměrů obrázků, ale jejich princip je odlišný. Scaling neboli škálování znamená změnu velikosti obrázku při zachování jeho původního počtu pixelů, tedy nemění se objem dat, které obrázek zabere.
Příklad: Když změníte velikost obrázku v HTML pomocí atributů width a height, obrázek se zobrazí v menších rozměrech, ale fyzická velikost souboru zůstává stejná.
Naopak při resamplingu se počet pixelů v obrázku mění, dochází k přepočítání pixelů při změně velikosti, což ovlivňuje fyzickou velikost souboru a kvalitu obrázku. Downsampling je pak snížením počtu pixelů (např. zmenšení obrázku z 4000×3000 pixelů na 1000×750 pixelů) a upsampling naopak zvýšením počtu pixelů (např. zvětšení obrázku z 1000×750 pixelů na 4000×3000 pixelů). Může dojít ke ztrátě kvality, protože software musí „vymýšlet“ nové pixely.
Kdy se hodí upsampling a kdy downsampling?
Upsampling znamená zvětšování obrázku přidáním nových pixelů. Při tomto procesu se musí software rozhodnout, jaké barvy budou mít nově přidané pixely, což může vést k rozmazání nebo ztrátě detailů. Naopak u downsamplingu se obrázek zmenšuje díky odstranění některých pixelů. Tento proces může vést ke ztrátě detailů, ale obvykle je méně problematický než upsampling, pokud je správně proveden. Správným využitím těchto technik můžete optimalizovat obrázky pro web tak, aby byly vizuálně atraktivní, ale zároveň měly co nejmenší dopad na výkon webových stránek.
Komprimace obrázků je důležitá pro rychlost načítání stránek a uživatelskou přívětivost. Scaling je změna rozměrů obrázku bez změny počtu pixelů, zatímco resampling mění počet pixelů v obrázku. Upsampling zvětšuje obrázek přidáním pixelů (může způsobit ztrátu kvality), zatímco downsampling zmenšuje obrázek odstraněním pixelů (může dojít ke ztrátě detailů, ale zmenší se velikost souboru).
Správným použitím těchto technik můžete optimalizovat obrázky pro web tak, aby byly vizuálně atraktivní, ale zároveň měly co nejmenší dopad na výkon webových stránek. Více obrázků nemusí vždy nutně znamenat atraktivnější obsah, naopak někdy je vhodnější použít méně a správně optimalizovaných obrázků, které mohou jak zvýšit atraktivitu webu, tak udržovat jeho konstantní SEO výkon.
