Správné velikosti obrázků na web

Co to vlastně je ta velikost obrázků?

Nejde o fyzický obrázek v tištěné podobě, ale o jeho "počítačové" rozměry.

Každý obrázek má 

  • rozměry - šířku a výšku
  • datovou velikost měřenou v kB nebo MB

Upravovat se dá obojí. Nejdůležitější je si předem určit, jak velké obrázky chci na svém webu mít. Kdyby byl každý jiný, nemuselo by to vypadat hezky.

Samozřejmě si můžeme zvolit jinou velikost fotek v galerii a další velikost pro ikony. Odlišně velký bude i obrázek v záhlaví stránky.

Co potřebuji vědět o datové velikosti obrázků?

Datová velikost obrázků je důležitá, protože web má většinou omezený datový prostor. Nechceme tedy web zbytečně přehltit. Potřebujeme grafiku optimalizovat.

Jak optimalizovat obrázky pro webové stránky?

Proč a kdy optimalizovat? 

Jaký typ obsahu zabírá při stahování průměrného webu nejvíc místa?

Pokud máte na mysli obrázky, tak máte rozhodně pravdu! Když chceme web s průměrným rozložením poměrů a velikostí obsahu zrychlit, tak vhodným řešením je právě optimalizace obrázků. Rychlost webu výrazně ovlivňuje SEO ( jak dobře se dá web vyhledat).

Pokud Vaše obrázky tvoří jen malou část celkové velikosti webu, nemá v prvotní fázi optimalizace smysl. V takovém případě je důležité zjistit, co jiného Vaše webovky zpomaluje.

Jak tedy poznám, že můj web potřebuje optimalizaci? 

Dobrá otázka! :-) 

Pokud je Váš web pocitově pomalý, nebo návštěvníci webu hlásí, že je pomalý, nebo se na Googlu špatně hledá, tak je to jasné znamení, že nějaké vylepšení je třeba. 

Doporučujeme vložit adresu Vašeho webu do Pagespeed insights .

Pokud je Vaše celkové skóre na mobilu, nebo na desktopu oranžové, nebo dokonce červené, tak je optimalizace opravdu třeba. Jaký typ optimalizace je třeba zjistíte pod celkovým skóre v sekci “Příležitosti”.

Co dělat před nahráním obrázku na server?

To nejjednodušší, co můžete udělat je ručně optimalizovat obrázky před jejich nahráním na web. Nástroje na optimalizaci obrázků existují jak v podobě webových aplikací, tak aplikací, které si nainstalujete na Váš počítač. Doporučujeme buď webovou aplikaci CompressJpeg , nebo aplikaci Caesium, přičemž obě aplikace jsou kompletně zdarma. Obecně řečeno doporučujeme nastavit maximální šířku obrázku na 1920px a kvalitu na 60-80%.

Správná velikost obrázků

Velikost obrázku o šířce 1920px by neměla přesáhnout 200kb, přičemž by se ideálně měla pohybovat kolem 150kb. Velmi důležité je nenačítat obrázky širší, než je potřeba.

Na monitoru o šířce 1366px by se měl načíst obrázek široký třeba 1400px a na mobilu o šířce 480px obrázek široký třeba 500px. 

Jak se velikosti obrázků přiřazují automaticky? Doporučujeme používat podmínky na úrovni PHP pro zjištění velikosti zobrazovacího zařízení a podle něho zvolit co nejbližší rozměr obrázku k zaslání. Velmi dobré je též používat Lazyloading, který spouští nahrávání obrázku ze serveru ke klientovi, až když bude opravdu potřeba ho zobrazit..

Pokud nemáte na webových stránkách správnou velikost obrázků (počet kB, šířka obrázku), Googlu se to nebude líbit a posune ho ve vyhledávači na nižší pozici. Když není web na netu dobře vidět, je to škoda. Nejvíce vydělávají weby, které lidé snadno najdou.

Nevíte si s něčím rady? Kontaktujte naše grafiky, poradí Vám.

Mohlo by Vás také zajímat:

Potřebujete-li od nás získat více informací, nebo nám zadat realizaci projektu...

kontaktujte nás

Více referencí z oblastíDTP a Design Tvorba webových stránek Výběrové