Co je vlastně velikost obrázků?
V našem případě nejde o fyzický obrázek v tištěné podobě, ale jeho počítačovou formu, přičemž ji definuje:
- rozměr – šířka a výška
- datová velikost – měřená v kB nebo MB
- 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 předem si 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ůžete zvolit jeden rozměr fotografií v galerii a další pro ikony. Odlišně velký bude i obrázek v záhlaví webové stránky.
Jak by měly obrázky vypadat před předáním grafikům?
- 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 webstránky nedostaneme v kvalitním stavu
Ilustrační fotografie, zdroj: saerasoft.com/caesium
Co bych měl 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 také je dobré, aby se obsah webové stránky načetl co nejrychleji. Nechcete-li tedy web zbytečně přehltit, potřebujete obrazovou složku optimalizovat.
Jak na optimalizaci webových stránek?
Proč a kdy optimalizovat obrázky?
Jaký druh obsahu zabírá při stahování průměrného webu nejvíce místa? Pokud si myslíte, že obrazová část, tak máte rozhodně pravdu! Když chcete u webové prezentace s průměrným rozložením poměrů a velikostí obsahu dosáhnout zrychlení, vhodným řešením je právě optimalizace obrázků. Rychlost www stránek výrazně ovlivňuje SEO (jak dobře budou umístěné v internetových vyhledávačích).
Pokud vaše obrazová složka tvoří jen malou část celkové datové velikosti webu, nemá v prvotní fázi optimalizace smysl. V takovém případě je důležité zjistit, co jiného vaše webstránky zpomaluje.
Jak tedy poznám, že můj web potřebuje optimalizaci?
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í webstrá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á. Jaký typ je třeba, zjistíte pod celkovým skóre v sekci Příležitosti.
Co dělat před nahráním obrázků na server?
To nejjednodušší, co můžete udělat, je ruční optimalizace obrázků před jejich nahráním na server. Nástroje pro optimalizaci obrázků existují jak v podobě webových aplikací, tak aplikací, které si nainstalujete na svůj počítač. Doporučujeme buď webaplikaci CompressJPEG, nebo aplikaci Caesium, přičemž obě jsou kompletně zdarma. Obecně řečeno, doporučujeme nastavit maximální šířku obrázků na 1 920 px a kvalitu na 60–80 % (pro JPEG).
Správné datové velikosti / rozměry obrázků pro web
Datová 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.
Jak se rozměr obrázků přiřazuje 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í. Určitě je také dobré aplikovat nástroj Lazyloading, který spouští načítání obrazového obsahu ze serveru ke klientovi, až když bude skutečně potřeba ho zobrazit. Existují i specializovanéjší metody, jež velmi rychle na serveru připraví nejvhodnější rozměr obrázku podle toho, z jakého zařízení (s velikostí rozlišení) přichází požadavek, ale to už je opravdu téma pro specialisty.
Pokud nemáte na webových stránkách správnou datovou velikost / náležitý rozměr obrazových částí (počet kB, šířka obrázku), například Googlu se to nebude líbit a posune ho ve vyhledávači na nižší pozice. Když není web na internetu dobře vidět, je to škoda. Nejvíce vydělávají webstránky, 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:
