WEBOVÉ STRÁNKY, KTERÉ REPREZENTUJÍ
ZPRACOVÁNÍ RYCHLÉ A PERFEKTNÍ

Obrázky na webu - správná SEO a UX metodika

Obrázky jsou extrémně důležitou součástí každého webu. Mohou být použity jako dekorace, pro usnadnění pochopení sdělení pro uživatele, nebo pro přímé předání informace.

Je mnoho důvodů, proč využívat na svém webu obrázky. Je ale také třeba být při jejich použití opatrní. Špatně použité obrázky mohou zavinit ztrátu návštěvníka webu a v horším případě ztrátu pozic ve vyhledávačích.

Jak s obrázky na webu pracovat? Co je potřeba, aby byly vyhledatelné, dobře použité a rychle načtené? Jak by měl vypadat váš HTML kód?

Všechny body zmíněné v článku jsou pro ty, kteří obrázky nahrávají přes administraci svého webu, ale i pro webové vývojáře.

Pokud používáte administraci a ta obrázky přejmenovává nebo je svou komprimací znekvalitňuje, kontaktujte vývojáře webu s žádostí o změnu, protože tím může být zabráněno růstu webu a získávání návštěvníků.

Rychlé načítání obrázků

Obecně je rychlost spojována s úspěchem webu a jeho umístěním ve vyhledávačích. Obrázky běžně hrají obrovskou roli ve výsledném rychlostním skóre vašeho webu.

Co můžete pro zvýšení rychlosti udělat?

Malá velikost souboru obrázku

Velikost souboru musí být co nejmenší. Pokud se obrázek zobrazuje přímo na stránce (tedy ne až jako galerie po kliknutí), velikost nemůže překračovat párset kilobytů. Jsou případy, kde je velikost v pár MB nevyhnutelná. To bývají často pozadí a jiná grafika ze strany na stranu. V takových případech by obrázek měl být stahovaný na pozadí a po stažení zobrazený příjemnou animací.

Menší velikosti můžete dosáhnout tak, že:

  • zkusíte uložit obrázek jako .png i .jpg a použijete ten, který je menší,
  • snížíte kvalitu obrázku na 70 % (zvýšíte kompresi), při které obvykle není vidět rozdíl mezi originálem (NEKOMPRIMUJTE obrázek opakovaně),
  • změňte rozměry obrázku.

Čím je obrázek menší, tím menší bude rozdíl jeho výsledné velikosti. Počítejte každý kilobyte.

Zobrazujte obrázky z jiné domény

Každý prohlížeč má svůj limit souběžných spojení na jeden server. Každé "src" v HTML kódu, každý AJAX a iframe, je nový požadavek na server, který naplňuje limit.

Tyto limity se liší dle prohlížeče. Google Chrome má limit nastaven na 6 spojení, což je aktuálně nejvyšší. To není moc.

Pokud načítáte obrázek z jiné domény, budou stahovány bez ohledu a hlavně bez čekání na ostatní součásti webu, jako jsou scripty a styly.

Příklad:

Tento web je https://web.profit-visions.com/
obrázky se načítají z https://f.profit-visions.com/ ("f" značí "files", tedy "soubory").

Využívejte moderní WEBP formát

WEBP je nový formát obrázkových souborů vytvořený Googlem, jehož týmu se podařilo v některých případech až drasticky snížit velikost souboru bez ztráty kvality oproti klasickým .jpg a .png. WEBP podporuje "alpha kanál", tedy úplnou i částečnou průhlednost a to z něj dělá univerzální formát obrázkových souborů.

Buďte ale obeztřetní - WEBP není zatím podorováno v Safari, Internet Exploreru (Edge ale WEBP podporuje) a ve webových náhledech z mobilních aplikací, jako Twitter nebo Skype.

Zobrazujte WEBP tam, kde víte, že je podporován. Vkládejte ho i do Sitemap pro Google i do OG tagů pro sdílení na Facebooku.

Používejte správné obrázky pro správnou situaci

Situace se liší podle projektu. Obvykle ale figurují minimálně dvě - zobrazení webu na desktopu / notebooku a na telefonu. Pro každý z těchto případů se hodí použít jinak formátované obrázky.

Je zbytečné načítat fullHD obrázek na maličký telefon, který s nepříliš jemným displejem. Weby na telefonech jsou obecně pomalejší z hlediska rychlosti a stability stahování i zpracování, takže ušetřit data je jen dobré.

Je na vás, vývojáři, identifikovat jednotlivé situace a poslat do webu ten nebo jiný obrázek.

HTTP cache obrázků

Standardní způsob načítání obrázků je požadavek na server, který vrátí data obrázku. Během toho může server vrátit i informaci o cache.

Pokud nastavíte cache na nějaký požadavek, prohlížeč požádá server o dodání obrázku pouze jednou a v budoucnu, až by si o něj zažádal znovu, bude pamatovat na jeho minulé uložení  a načte ho z místní paměti. Je to skvělý způsob, jak ušetřit serverové zdroje, ale především data uživatele a připravit pro něj web mnohem rychleji.

Načíst obrázek z místní paměti je vždy mnohem rychlejší, než ze vzdáleného místa.

Nastavte cache na tak dlouho, jak jen můžete, klidně nekonečně. Protože obrázky stejně nesmíte přepisovat novými, na žádný problém nenarazíte.

Kvalita obrázků

Jako první nás napadne kvalita obrázku samotného, jeho obsahu, jak dobře je vyfocený. To jsou body pro jiný článek.

Kdykoliv používáte obrázek, mějte na paměti, že se bude zobrazovat na mnoha různých displejích. Napříč vašimi uživateli budou nejrůznější velikosti, rozlišení i jemnosti displejů.

Čím má displej vyšší hustotu pixelů, tím větší obrázek musí být. Nejnáročnější displeje pro optimalizaci jsou obvykle Retiny od Apple.

V článku je výše zmíněna komprese obrázků. Komprese je skvělý pomocník, ale nesmí být příliš vysoká jen proto, že to sníží velikost souboru. Čím vyšší je komprese, tím větší bude mít dopad na dojem uživatele na některých displejích.

Rozměry obrázku musí být vždy větší, než jaké jsou nastavené v HTML / CSS. Na desktopech doporučujeme mít fyzicky obrázek nejméně 1,5x větší a 2 - 2,5x větší na telefonech. Důvodem je jeho škálování. Telefony a dnes již mnoho notebooků mají větší rozlišení, než na které zobrazují obsah.

Vysvětlíme. Telefon má fullHD (1920 x 1080 pixels) rozlišení displeje na malé 5" velikosti. Notebook má fullHD rozlišení na 15" displeji. Obsah na telefonu je zvětšovaný, jinak by byl nečitelně malinký. Takže to, co by správně mělo být přes 50 pixelů, na telefonu zabírá 200 pixelů. Můžete si to představit jako přiblížení - čím více zoomujete na obrázek, tím horší se zdá být.

Vyhledávání obrázků

Google říká, že vyhledávání obrázků stále roste a někdy dokonce přesahuje vyhledávání webů a informací textově. Při SEO optimalizaci byste neměli tento fakt vynechat.

Díky čemu je obrázek dohledatelný?

Pracujeme se dvěma typy obrázků - obsahový a dekorativní.

Dekorativní se používají pouze pro zkrášlení webu a nemívají žádnou obsahovou hodnotu. Takové obrázky nám neřeknou nic o tom, co je na té stránce, bývají to často pouze piktogramy, čárky, tečky. Takové obrázky by měly být v kódu použité jako pozadí. Pozadí Google roboti neindexují a ve vyhledávání se neobjeví.

Ty obsahové obrázky jsou tím důležitým prvkem a musíte udělat vše pro jejich zviditelnění ve vyhledávání na internetu.

Sitemap

Už je to nějakou dobu, kdy se Sitemap rozšířila o možnost přidat kromě standardních stránek i obrázky. Obrázky se pojí na standardní adresy, aby vyhledávač věděl, kam má uživatele odkázat pro více informací.

Dáte obrázky do Sitemap a musíte hlídat její velikost. Sitemap s obrázky dokáže rychle naplnit limity pro jeden soubor.

Abyste vytěžili co nejvíce, vložte do Sitemap 4 různé velikosti téhož obrázku:

  • originál
  • poměr 16:9
  • poměr 4:3
  • poměr 1:1

IMG v HTML

Abyste z vyhledávání obrázků získali maximum, je třeba správně naplnit IMG značky v HTML každého jednotlivého obrázku.

Všechny tyto obsahové obrázky musí mít "alt" a "title" parametry. Ale ne je pouze obsahovat, musí být naplněné popisným textem toho, co je na obrázku vidět. Takový text by neměl být dlouhý, ale pouze v rozsahu desítek znaků.

Pod obrázek můžete dát delší a i formátovaný text pro další popis, klidně i částečně stejný se zmíněnými parametry. Vyhledávače si pak spojí obrázek s blízkým textem a umožňují tím přesnější vyhledání.

Vše jsou to skvělé rady pro SEO, ale zároveň slouží pro uživatele se sníženou schopností, například nevidomé.

Pojmenujte obrázkový soubor

Tyto odstavce by mohly být pod nadpisem "Vyhledávání obrázků". Jde ale o tolik důležitý bod, že nesmí být přehludnutý.

Jakmile vyfotíte svého kolegu, kterého máte umístit na web, obrázek je automaticky pojmenován například takto "IMG_2035.jpg". Když vám grafik pošle připravený obrázek, je pojmenovaný nějakým pracovním názvem. Nic z toho není popisné.

Pojmenujte soubor obrázku tak, aby název popisoval obsah.

Vyhledávače čtou název souboru a používají ho pro identifikaci obsahu.

Lazy load (líné načítání)

Lazy load je technika, díky které se obrázky nenačítají okamžitě po zobrazení webu, ale až když jsou potřeba - když se má měnit obrázek v banneru nebo uživatel k některému scrolluje. Obrovsky to pomáhá v téměř každém případě, na každém webu. Každý obrázek, který není vidět a nenačítá se, šetři čas, data a zdroje.

Takové načítání se dá vyřešit mnoha způsoby a žádný z nich není jediný správný.

Pokud použijete lazy load (měli byste), je nezbytné mít obrázky zapsané v Sitemap. Při načtení stránky tyto obrázky nejsou jako IMG tagy v HTML dokumentu. Google roboti dokážou i přes to obrázky v kódu najít, ale Google není jediný vyhledávač a nemůžeme spoléhat na to, že každý robot umí zpracovat JavaScript.

Správa obrázků na serveru

Obrázky nikdy nepřepisujte novými.

V článku výše je popsána cache. I když přímo váš web nebo server cache nenastavuje, neznamená to, že se nic necachuje. Programy, aplikace i veškerá zařízení fungují nezávisle a nemají povinnost respektovat informace z vašeho webu. Například naše telefony si cache dělají, ať už jim to řekneme či nikoliv.

To znamená, že pokud pouze přehrajete původní obrázek novým a název zůstane stále stejný, mnoho lidí, vyhledávačů a další nástroje mohou starý obrázek vidět měsíce.

Vždy obrázek pojmenujte jedinečným názvem, nepoužívejte názvy dříve použité.

Pokud nechcete, aby starý obrázek byl dále viditelný při zadání jeho přímé adresy, jednoduše ho smažte ze serveru. Je možné použít i jiné metody pro zakázání přístupu. Cílem je, aby snaha načíst obrázek neukázala ten skutečný soubor, ale pouze HTTP stav 404 (nenalezeno).

I po té, co obrázek smažete, Google ještě pár měsíců bude obrázek nabízet ve vyhledávání, než zjistí, že už neexistuje a z výsledků zmizí.

Naše služby

Máte-li webovou stránku, která má potíže s rychlostí nebo ji potřebujete dostat na vyšší pozice v Google, ozvěte se nám. Vytvoříme pro Váš případ speciální audit, navrhneme úpravy webu a rovnou je můžeme i provést.