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
  • dále i formát souboru (s tím úzce souvisí i kvalita a komprimace), ale o tom zase jinde - např. Nové formáty obrázků

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.

Jak by měl obrázek/fotka vypadat před předáním grafikům?

  • každá fotka samostatně = jedna fotka = jeden soubor
  • nejvhodnější formáty: kvalitní méně kompresované JPG, PNG, WEBP, TIFF, PSD, případně vektorové formáty SVG, CDR, AI, EPS
  • rozlišení: v dnešní době (2020) nejméně 1600 bodů na šířku u bitmap
  • obrázky rozhodně neposílat v již "sesazených" formátech na A4 nebo v letáku (DOC, XLS, PDF), protože my je nedostaneme ven v kvalitním stavu

Ilustrační obrázek, zdroj: https://saerasoft.com/caesium/

Screenshot Caesium komprimovany

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 a též je dobré, aby se obsah webové stránky zobrazil co nejrychleji. Nechceme-li 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 bude Váš web umístěný ve vyhledávačích).

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% (pro JPEG).

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. Existují i specializovanéjší metody, které velice rychle na serveru připraví nejvhodnější velikost obrázku podle toho z jakého zařízení (s velikostí rozlišení) přichází požadavek, ale to je již opravdu téma pro specialisty.

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:

Možná již nyní máte dostatek informací a mohla by se vám hodit „rychlá tlačítka“:
Pokud jste zvídavější, pokračujte dále ... kompletní menu nebo na Úvodní stranu