Nezpomalujte si web zbytečně velkými obrázky!

Příprava obrázků je jednou z důležitých, i když asi ne moc oblíbených činností. Jde samozřejmě o jejich velikost.

Proč hlídat velikost obrázků?

Velikost obrázků zásadním způsobem ovlivňuje rychlost webu, zejména, pokud je obrázků na webu hodně. Příliš velké obrázky zbytečně zpomalují načítání stránek webu, zbytečně zatěžují web a v ne poslední řadě spotřebovávají zbytečně mobilní data.

Důležité je vědět, že máme dva druhy velikosti obrázků. První je rozměr, což je velikost obrázku v pixelech, druhá je datová velikost, což je objem dat souboru s obrázkem v kB (nebo MB). A my musíme zajistit optimální rozměr pro daný typ obrázku a co nejmenší datovou velikost.

Doporučený rozměr pro jednotlivé druhy obrázků:

obrázek přes celou obrazovku – šířka 1920 px
obrázek přes půl obrazovky šířka 900 px
malý ilustrační obrázek nebo profilovka – 300 px
favikon – má velikost 16 x 16 px – pro nahrání použijte obrázek velikosti 512 x 512 px
logo – čtverec šířky 512 px nebo obdélník 200 x 100 px
obrázek náhledu stránek na Facebooku – velký náhled 1200×628 px, v tomto případě je lepší využít malý náhled 400 x 400 px, který se zobrazuje v komentářích u příspěvků.

Jak upravit velikost obrázků?

U každého obrázku upravte nejprve rozměry a potom datovou velikost ještě před tím, než ho nahrajete na web. Doporučuji použít tento šikovný online nástroj https://iloveimg.com/, který je zdarma a velmi dobře poslouží. Použijte zde Resize Image a Compresse Image.

Formát souboru s obrázkem

Důležitý je také formát souboru, nejčastěji se používá .jpg nebo .png. Formát jpg.
úplně postačí, pouze pokud chcete mít na obrázku průhledné pozadí, použijte formát
.png, který to umožňuje. Můžete také zvolit novější formát .webp, který umožňuje webovým stránkám zobrazovat obrázky ve vysoké kvalitě, ale s mnohem menší velikostí souborů, a ušetřit si starosti se zmenšováním obrázků.