Optimalizace obrázků 2
LEKCE 11
Jak na optimalizaci obrázků?
V předchozí kapitole jsme zmínili, že optimalizace obrázků může být chápána ve dvou dimenzích.
- klasická SEO optimalizace (probrali jsme v předešlé kapitole)
- optimalizace obrázků z pohledu jejich velikostí
Tentokrát si posvítíme na druhý bod, a to ze dvou zásadních důvodů:
- čím větší obrázky (resp. toky dat) - tím pomaleji se každý web/e-shop načítá a zákazník není ochotný počkat. Takže uteče dřív než byste řekli švec (teda než se váš web vůbec načte)
- čím větší obrázky (resp. toky dat) - tím pomaleji se každý web/e-shop načítá a rychlost (resp. pomalost) tohoto načítání považují vyhledávače za nepřípustné, a rozdávají "mínusové" body (a každý mínusový bod posouvá váš e-shop ve výsledcích vyhledávání směrem dozadu).
1) Nejpoužívanější formáty
Hned na začátku by bylo fajn si říct, jaké základní formáty obrázků vůbec existují a které z nich jsou vhodné pro ukládání na webové stránky (potažmo e-shop).
Existuje spousta formátů, nejznámější jsou:
- RAW, TIFF - tyto formáty používají hlavně profi-otografové
- výhody: velká barevná škála, oba formáty jsou editovatelné
- nevýhody: obrovská velikost a nevhodnost použití na jakoukoli webovou stránky
- GIF - je předchůdce PNG formátu a tyto formáty mají spolu spoustu společného.
V současnosti se využívá na tvorbu krátkých animovaných obrázků s nízkou datovou velikostí a malou škálou barevnosti - JPEG - formát využitelný jak pro fotografy (stále relativně velká barevná škála), tak i pro ukládání obrázků na web či e-shopvýhody: velikost (<1MB)
- PNG - také velmi vhodný formát pro ukládání obrázků na web nebo váš e-shop, kdy velikost obrázků je také stále malá (<3MB). Oproti JPEG je to editovatelný formát s bezstrátovou kompresí a navíc má možnost transparentního zobrazení (vhodné např. pro loga).
Příklad jak vypadá logo s transparentním a netransparentním pozadí uvádíme níže:
2) Správné rozměry obrázků
Toto je problém vícero webových stránek - eshopů. E-shop zobrazuje fotografii majitele/obchodního zástupce apod. v rozměrech 400x250px, ale jeho skutečná velikost je často desetinásobná (tzn. 4000x2500px) a tudíž datová velikost může být klidně i 6MB.
Použít správné rozměry obrázků je velký oříšek u sociálních sítí, protože každá část sociální sítě (příspěvek, úvodní fotka nebo story) mají rozdílné formáty. A pokud je nepřizpůsobíte, pak sociální síť nemá problém obrázek "ořezat" podle toho, jak se jí to hodí. Což kolikrát přinese nepříjemnost v tom, že vám usekne kus grafiky, písmo textu apod. - ale více o tom až v kurzu Marketing pro e-shopy.
Pozor - Nahrávejte na svůj e-shop obrázky v takovém rozměru, v jakém se budou ve skutečnosti zobrazovat. Každý nahraný obrázek na stránce se načítá celý (tzn. celá jeho datová velikost) - i přesto, že ho zobrazujete v malém poměru. Díky tomu můžete zrychlit načítání stránky.
3) Velikost obrázků
Velikost obrázků se snažte držet co nejmenší - ideálně v rozmezí 500-100 kB. Super - ale jak to máte udělat, když nemáte žádné sofistikované softwary, které vám obrázek nejen zmenší, ale zároveň neubere na kvalitě tohoto obrázku? (Obrázek nebude rozmazaný, neztratí barvy, hrany linií nebudou rozmazané?)
Instalace, platba za licence některých nástrojů a zároveň umění s některými složitějšími nástroji pracovat může být nepříjemná záležitost. Proto přinášíme malou radu - existují SW, které jsou k dispozici volně, jsou jednoduché na ovládání a navíc ještě online.
Jedním z takových případů může být nástroj s (naším) pracovním názvem "Panda" - vyzkoušejte, budete překvapeni s jakou lehkostí můžete zmenšit velikost obrázků. více - https://tinypng.com/
Věříme, že na své cestě potkáte i další šikovné nástroje, které vám pomohou k vaší cestě vybudovat ten nejlepší e-shop.
SHRNUTÍ: Optimalizace obrázků je, vzhledem k jejich množství, v e-shopech nutnost. V tomto případě si hlídejte pečlivě velikosti a rozměry. Čím menší, čím optimalizovanější, tím rychleji se bude váš e-shop načítat.
CHECKLIST A ÚKOLY
DALŠÍ KROKY MODULU:
ZPĚT NA MODUL 1