Optimalizace obrázků na webu je důležitá, i když se vám to na první pohled nemusí tak jevit. Jak na to?
Proč a kdy optimalizovat obrázky?
Dobrá otázka! 🙂 Pokud jsou vaše webové stránky pocitově pomalé nebo jejich návštěvníci hlásí, že se dlouho načítají či se na internetu špatně hledají, jasně to znamená potřebu nějakého vylepšení.
Doporučujeme vložit adresu URL svého webu do Google PageSpeed Insights (PSI), nástroje pro testování a analýzu obsahu, který pomáhá optimalizovat rychlost načítání webových stránek na všech zařízeních. Pokud má vaše celkové skóre na mobilu nebo desktopu oranžovou či dokonce červenou barvu, je optimalizace opravdu nutná
Nebo nám jednoduše napište na e-mail a test vám uděláme zdarma s kódem RYCHLOSTWEBU. Optimalizace obrázků na webu je důležitá, i když se vám to na první pohled nemusí tak jevit. Jak na to?
Optimalizace obrázků na webu:
Rozlišení a velikost obrázků
Rozlišení obrázku mluví o tom, jak detailní obrázek je. Ale pozor, na webu není potřeba mít obrázky v plném rozlišení, jak přijdou z fotoaparátu. Velikost souboru pak říká, kolik místa obrázek na webu zabere a jak dlouho se bude načítat.
Pokud je moc obrázek velký a má klidně několik MB, tak se načítá na webu velmi pomalu.
Na mobilu i na webu je to pak velmi pomalé.
Obecné doporučení pro velikosti optimalizovaných obrázků
Zachování co možná nejvyšší kvality s co možná nejmenší velikostí souboru. Vždy tedy volte rozumné rozlišení, přičemž by šířka neměla přesáhnout 1920 px (typická šířka webové stránky).
Vzhledem k tomu, že webová stránka ani na ní umístěné prvky nejsou prioritně určené pro tisk, vám bude stačit 72 DPI, čili rozlišení s jakým pracují displeje a monitory. Celková velikost souboru by pak neměla přesáhnout 400 kB, ideálně by se měla pohybovat kolem 100 kB. K tomu, abyste takové velikosti dosáhli, budete muset fotku zmenšit.
Body:
Velikost 200 – 400 kb – velké fotografie
Velikost 100 – 200 kb – malé fotografie
Optimální šířka 1920 px
Rozlišení pro monitory 72 DPI
Formáty obrázků vhodně pro web
Ne všechny formáty obrázků jsou pro web vhodné stejně.
Doporučuji proto použít osvědčené formáty JPG, PNG, a WebP jsou vaši přátelé pro různé typy obrázků.
WebP je ideální pro webovky má totiž dobrou komprimaci, ale lehce ztrácí kvalitu.
PNG – používat na webu minimálně na příklad u loga
JPG – takové optimum, ale používá se v 85% kvality obrázků a bude vše hezké
SVG – velmi a malé a vhodné pro loga nebo obrázky. Vektorový formát, ale nedá se používat všechno.
Jak by měly být ideálně fotky dodány od fotografa nebo grafika?
- každý samostatně – 1 obrázek = 1 soubor
- nejvhodnější formáty – kvalitní (méně komprimované) bitmapové JP(E)G, PNG, WEBP, TIFF, PSD, případně vektorové SVG, EPS, CDR, AI
- rozlišení – v dnešní době (2020) nejméně 1 600 pixelů/bodů na šířku pro bitmapy
Rozhodně ne dohromady (DOC, XLS, PDF) – potom je na webovky nedostaneme v kvalitním stavu.
Co dělat před nahráním obrázku na server?
Mít obrázek komprimovaný:
Velikost obrázků o šířce 1 920 px by neměla přesáhnout 200 kb, přičemž ideálně se pohybuje kolem 150 kb. Velmi důležité je nenačítat obrázky širší, než je nezbytné. Na monitoru o šířce 1 366 px by se měl načíst obrázek široký například 1 400 px a na mobilu o šířce 480 px obrázek široký dejme tomu 500 px.
Správné pojmenování obrázku:
Optimalizace obrázků pro web tedy úzce souvisí s optimalizací pro vyhledávače (SEO).
Správná název pojmenování obrázků a také pojmenování souborů s alt tagy.
Obrázky na webu nejsou optimalizovány, co mám dělat?
Můžete si všimnou nežádoucích efektů webové stránky. Návštěvníci vaší stránky se mohou setkat s pomalým načítáním, což vede k frustraci a možná i k tomu, že vaši stránku opustí dříve, než najdou to, co hledali. Vyhledávače jako Google také dávají přednost rychlejším stránkám, může to negativně ovlivnit vaše pozice ve výsledcích vyhledávání. Kromě toho, nadměrná velikost obrázků zatěžuje váš hostingový prostor, což může vést k zbytečně vyšším nákladům.
Ano opravit se to dá, ale chce to značnou snahu. Jak tedy postupovat a vše opravit?
TIP: nejprve si udělat zálohu webu
- Roztřiďte obrázky na webu a nepoužité smažte
- Změňte rozlišení obrázku. Obrázky by neměly být větší, než je nezbytně nutné.
- Komprimujte obrázky a talk zmenšete velikost.
- Vyberte správný formát obrázků (PNG, JPG nebo WebP)
- Odložte načítání nepostatných obrázků, použijte “lazy-load” tím oddálit načítání a web se tak zrychlí.
- Dálší možností je web optimalizovat a mimifikovat načítání skriptů, JS nebo CSS.
Kompletní návod na zrychlení webu najdete zde.
V dalším článku se také dozvíte, kde brát krásné fotky z fotobanky a jaké pravidle je potřeba dodržovat, stejně jako tipy a rady, jak vybrat ty správné fotky.
