Obrázky jsou přirozenou součástí každé webové prezentace, ale pokud s nimi nepracujete správně, dokážou dramaticky zpomalit načítání webu a připravit vás tak o většinu návštěvníků.
Rychlost načítání webu
Díky službě Google PageSpeed Insights si můžete sami ověřit, jak na tom s optimalizací obrázků (a nejen s ní) váš web je. Jedná se o bezplatný online nástroj, prostřednictvím kterého snadno zjistíte, kde jsou příležitosti pro zlepšení rychlosti načítání vaší webové stránky.
Nevhodná velikost či formát obrázku jsou jednou z nejčastějších příčin, proč je web pomalý, dlouho se načítá, a návštěvník to radši rovnou vzdá. A v lásce takové weby nemají rády ani vyhledávače.
Rastry vs. vektory
Z hlediska správného výběru obrázku pro váš web je nezbytně nutné se seznámit s rozdíly mezi rastrovou a vektorovou grafikou.
RASTRY – tento typ grafiky je zastoupen především mezi fotografiemi či jinými obrázky, kde je kladen důraz na co nejvěrnější zachycení detailní scény. Obrázky jsou tvořeny jednotlivými obrazovými body (tzn. pixely). I většina laiků se již v praxi jistě setkala s příponami .jpg, .png, .gif či .bmp, které jsou naprosto typické právě pro soubory s rastrovými obrázky.
Soubory .jpg jsou nejčastěji využívané pro fotografie. Často se v těchto případech můžeme setkat i s formátem .png (např. při stahování fotografií z některých fotobank). Tento formát má však u nich smysl pouze v případě průhledného pozadí (to .jpg soubory neumožňují), jinak je vždy vhodnější dát přednost formátu .jpg, který zabírá výrazně méně místa a oproti .png souborům web tolik nezpomaluje.
Mezi hlavní výhody rastrové grafiky patří především již zmíněné věrné zachycení skutečnosti. Nevýhodou je však fakt, že při jejich nadměrném zvětšení dochází ke ztrátě kvality, a to se pak projeví viditelností jednotlivých pixelů. Další nevýhodou oproti vektorům je i výrazně větší velikost.
VEKTORY – vektorové obrázky jsou tvořeny jednotlivými křivkami, které jsou matematicky definovány, a při jejich zvětšování tak nedochází ke ztrátě kvality a při jakékoliv velikosti jsou stále stejně ostré. Na rozdíl od rastrů není tento typ grafiky vhodný pro fotografie, ale výborně se hodí pro loga, ikony, podklady pro velkoformátové tisky a veškerou reklamní grafiku.
Vektorové obrázky najdeme skryté především pod příponami .svg, .cdr či .ai. Oproti svým rastrovým protějškům mají výrazně menší velikost a pokud máme na výběr (např. při stahování ikon či obrázků tvořených křivkami), vždy volíme tuto variantu.
Pěkné vektorové ikony ve formátu .svg obsahuje třeba Flaticon.
Nové formáty obrázků
Jak je již uvedeno výše, rastrová grafika je datově výrazně objemnější a pokud potřebujeme obrázek zachovat ve vysokém rozlišení, může se to promítnout na pomalejším načítání webu. Jedním z řešení je pak využití některých z nových formátů rastrové grafiky, které oproti klasickým .jpg nebo .png souborům zabírají výrazně méně místa.
Jedná se o soubory formátů WebP, JPEG 2000 či JPEG XR, které jsou výrazně úspornější variantou a naprosto ideálními kandidáty pro použití na webu. Převod obrázků z klasických formátů je velmi snadný, a existuje pro něj celá řada bezplatných online služeb (viz např. https://convertio.co/jpg-webp/ a mnoho dalších).
Ideální velikost
Jak je již uvedeno výše, vhodná velikost je jednou ze základních věcí, které bychom si měli při vkládání obrázků na web (a nejen tam) hlídat.
Velmi častou chybou bývá, že člověk, který si vytváří web svépomocí, na něj nahrává fotografie v originální velikosti. I fotoaparáty v mobilech přitom již dnes běžně zvládají pořizovat fotky v obrovském rozlišení a bohužel se to pak projeví i na velikosti jednotlivých souborů.
Ale jaká je tedy ideální velikost fotografií pro web? Je potřeba říct, že je to záležitost vysoce individuální. Velmi záleží na tom, jestli se jedná o obrázky ilustračního charakteru nebo např. o fotografii v rámci portfolia profesionálního fotografa.
Obecně však lze říct, že u fotek, které mají zabírat celou obrazovku, by šířka ve většině případů neměla překročit 1920 px. U ilustračních fotografií postačí menší velikost do 1200 px, která je dostatečná i pro použití ve fotogaleriích, v drtivé většině případů stačí i výrazně menší.
Vždy je potřeba si zvážit, jakým způsobem bude obrázek použitý, a podle toho zvolit jeho optimální velikost.
Komprese
Kompresí se u rastrové grafiky zjednodušeně rozumí shlukování jednotlivých pixelů do větších celků, čímž ve finále sice dojde ke ztrátě kvality, ale pokud je prováděna s citem, pouhým okem je rozdíl téměř nepoznatelný. Odměnou nám pak je výrazně menší výstupní velikost jednotlivých souborů a rychlejší načítání webu.
Z online nástrojů pro kompresi zde zmíním např. Squoosh, kam můžete jednoduše nahrát jednotlivé soubory, a kromě úrovně komprese si navíc můžete rovnou vytvořit soubor v novém formátu WebP, což Vám pomůže obrázek ještě více optimalizovat. Pro weby ve WordPressu je možné využít i některého z dostupných pluginů, který kompresi provede za vás – výborně hodnocený je např. Smush.
Grafické editory
Velmi často se stává, že nám dostupná fotografie pro použití na webu nevyhovuje z důvodu své orientace na šířku/výšku, popř. pro nevhodný ořez (např. když na fotografii máme zachyceno i širší okolí, ale potřebujeme použít pouze výřez, na kterém je konkrétní postava).
Pokud potřebujeme použít pouze konkrétní výřez a docílit tak třeba i jiného poměru stran, je potřeba fotografii upravit. Kromě placených aplikací, jako je třeba obecně známý Adobe Photoshop, existuje i celá řada obdobných nástrojů, které jsou zdarma a splní prakticky stejnou službu. Asi nejznámější bezplatnou alternativou k právě zmíněnému Photoshopu je aplikace Gimp.
Velmi dobrý je ale také PhotoScape, který kromě možnosti úprav velikosti, ořezů či natočení nabízí i poměrně široké možnosti retuší a barevných úprav fotografií.
Z online nástrojů stojí za zmínku třeba resize.live nebo resizeimage.net.
Pro práci s vektorovými obrázky lze kromě placených aplikací typu CorelDraw či Adobe Illustrator velice dobře využít např. Inkscape.
Výborná je také Canva, která i ve své bezplatné verzi nabízí online formou nepřeberné množství možností pro vytváření grafiky, jako jsou vizitky, loga či plakáty, a to včetně mnoha inspirativních vzorů.
Správné pojmenování
Úprava obrázků pro web má kromě optimalizace velikosti i svá další specifika. Velmi důležitá je i vhodná volba názvu. Většina lidí si s pojmenováváním obrázků (a zejména fotek) příliš hlavu neláme, a na web je vkládají pojmenované názvem, který jim přidělí fotoaparát.
Pojmenování změtí znaků a čísel není problémem jen z důvodu, že se pak v souborech hůře orientujete, takovým názvům totiž nebudou rozumět ani vyhledávače.
Např. Google umožňuje kromě klasického textového vyhledávání také vyhledávání obrázků, a pokud bude název vašeho souboru nesrozumitelný, máte jistotu, že takový obrázek nikdo pod zvoleným heslem nenajde.
Ideální je pojmenovávat soubory stručným názvem, ze kterého bude na první pohled patrné, co se na něm nachází. Samozřejmostí by pak mělo být pojmenovávání bez diakritiky, v případě víceslovných názvů bez mezer a jednotlivá slova oddělená pomlčkami či podtržítky.
Alternativní text
Alternativní text neboli ALT tag či ALT atribut, je často opomíjenou součástí každého obrázku, který umisťujeme na webové stránky. Je velmi důležitý z hlediska SEO a optimalizace pro vyhledávače.
Jedná se o textový popis obrázku, pomocí kterého se vyhledávače orientují. Jeho nepřítomnost nebo špatná formulace tak budou mít za následek výrazně horší pozici při vyhledávání.
Asi každému z nás se už navíc jistě někdy stalo, že na některém z webů se z různého důvodu nějaký obrázek nenačetl a zobrazila se pouze ikonka a jeho popis. Tím popisem je právě ALT tag, který sice standardně běžný návštěvník nevidí, ale právě ve zmíněném případě s ním i on může přijít do styku, i proto je potřeba ho nepodcenit.
ALT tag je důležitý i z hlediska přístupnosti vašeho webu, protože pomocí něj mohou i zrakově postižené osoby prostřednictvím čteček zjistit, co se na něm nachází. Je naprosto jasné, že takto hendikepovanému člověku nikdy nemůžete nahradit zrakový dojem, ale můžete mu alespoň poskytnout informaci o tom, čeho se obrázek týká.
Ideální obrázek pro web
A jaký je tedy vlastně ten ideální obrázek pro váš web? Měl by být optimálně velký, ve vhodném formátu, ideálním výřezu, správně pojmenovaný a především dostatečně kvalitní na to, aby dokázal návštěvníky vašeho webu zaujmout.
Na závěr si ještě dovolím zmínit dnes již obecně známou věc – není možné používat na svém webu bez souhlasu autora obrázky, které „někde stáhneme“ a nemáme k nim autorská práva. Je jasné, že při tvorbě svého webu časem narazíte na situaci, kdy budete potřebovat obrázek, který není možné nahradit žádnou z vašich vlastních fotografií.
Pro tyto účely jsou řešením fotobanky, které obsahují nepřeberné množství fotek na nejrůznější témata, a vybere si v nich skutečně každý. Z bezplatných variant můžeme využít např. Pixabay nebo Pexels.
S ohledem na fakt, že podmínky užití se často mění, je potřeba si vždy před stažením jakéhokoliv obrázku ověřit, zda se jedná o bezplatnou licenci, popř. je možnost využít obrázek např. s uvedením zdroje.
Jak je vidět ze všeho uvedeného, volba optimálních parametrů obrázků, které vkládáme na web, není úplně jednoduchá záležitost. Pokud si ale zautomatizujete uvedené postupy a informace, stanou se pro vás postupem času běžnou součástí celého procesu, vaše webové stránky se budou výrazně rychleji načítat a začnou je mít mnohem radši i vyhledávače.
Miluju vše, co se točí kolem webů, a úplně nejvíc mě naplňuje, když do toho kolotoče můžu sem tam vtáhnout i někoho jiného. Učím své klienty dívat se na web očima druhých a ukazuji jim, že své stránky si zvládnou vylepšit i sami, bez obřích investic.
Přečtěte si Můj příběh