Nejčastější chyby při nahrávání obrázků na web

Jistě víte, že každý web se skládá ze spousty obrázků. Bylo tomu tak již od počátku webů. Každý web obsahoval spousty fotek nebo třeba jen ilustrací, ale byly tam.

Jenže postupem času se obrázky staly stále kvalitnější a tím pádem i datově mnohem náročnější. Google proto po nějakém čase řekl „A dost!“. Neznamená to ale, že by obrázkům na webech odzvonilo, jen se stanovila pravidla, která se musí dodržovat a která se každým rokem zpřísňují.

Důvody, proč tak Google učinil, jsou dva:

  • Špatná optimalizace obrázků vedla k masivnímu zpomalování webů
  • Google vytvořil možnost zvýhodnit ty, kteří svůj web správně nastaví a dává jim „plusové body“ do SEO (optimalizace pro vyhledávače)

Optimalizace pro vyhledávače (SEO)

Krátce vysvětlím, oč vlastně jde. Google má sestavený algoritmus (určitý vzoreček), kterým hodnotí weby. Můžete si ho představit například jako A+B+C= 85 (konečné číslo hodnotí, jak kvalitní máte web a podle toho se posouváte ve vyhledávačích výše nebo níže).

Samozřejmě, že algoritmus je mnohem složitější, ale my si to ukážeme na tomto příkladu, kdy A je například kvalita kódu, B je obsah a C je rychlost načítání webové stránky. A právě rychlost načítání stránky nám nejvíce na našich stránkách ovlivňují obrázky.

Optimalizaci děláme nejen pro Google, ale samozřejmě i pro naše návštěvníky, protože spoustu lidí odradí, když se web načítá nekonečně dlouho (nebo se dokonce nenačte vůbec!). Je tedy třeba myslet na vaše návštěvníky i na Google 😊.

Teď už se ale pojďme podívat na to, jak obrázky pro vaše weby optimalizovat.

V koláči v pravo nahoře najdete vše, co je třeba k tomu, aby váš web fungoval. „Zbytek“ jsou obrázky. Obrázky tedy nejvíce ovlivňují rychlost vašeho webu. Zdroj: Wplama

Více o SEO optimalizaci si můžete přečíst zde

Velikost obrázku

Je potřeba dobře si uvědomit, kde obrázek chcete použít. Pokud máte v plánu jej použít třeba ve stránce Galerie, je předpoklad, že obrázek budete potřebovat ve větší velikosti, tj. například FullHD rozlišení (1920x1080px). Naopak, pokud budete chtít dát jen nějaký ilustrační obrázek na váš web nebo k článku, mnohdy stačí jeho velikost kolem 600px na šířku, a to máte hned o třetinu menší obrázek.

Samozřejmě s tím souvisí i datová velikost obrázku, protože čím menší obrázek je, tím méně zabírá dat = menší náročnost na zobrazení webu a tedy i vyšší rychlost načtení webu.

Jestliže fotíte nějaké fotky mobilem nebo foťákem rozhodně tyto fotky vždy upravujte. Obě dvě zařízení se totiž snaží vyfotit fotku v co nejvyšší kvalitě a mnohdy ve velikosti, kterou vy nikdy nepoužijete. Například, dnešní mobily dokáží fotit ve 4K rozlišení, což je zhruba 4096 px na šířku obrázku. Sami si můžete spočítat, že kdybyste tento obrázek použili byť jen někam do článku, bude váš web x krát pomalejší, než by mohl být, kdyby obrázek prošel optimalizací.

Kde měnit velikost obrázků?

Na úpravu rozměrů obrázků existuje spousta nástrojů. Osobně používám Photoshop, ale je mi jasné, že tohle není program, který má každý, takže doporučuji využít online appku http://picresize.com.

Jde o nástroj, kam nahrajte fotku a zvolíte velikost, a můžete stahovat. Rychle a jednoduše.

Formát obrázku

Ve stejném nástroji si taktéž můžete upravit formát obrázku. Nejčastějšími formáty jsou JPG a PNG.

PNG formát s sebou nese více dat a můžete jej použít pokud máte průhledný obrázek nebo obrázek bez pozadí. V jiném případě se ale vyplatí použít formát JPG, protože PNG jinak moc daty nešetří a naopak je náročnější.

JPG formát je nejrozšířenějším formátem obrázků, používajících se na webech. Zároveň většina fotek z mobilů vám právě „leze ven“ v tomto formátu. Doporučuji tedy v drtivé většině používat tento formát.

Pokud by se ale stalo, že váš obrázek je v PNG, například obrázek z fotobanky, neváhejte použít znovu program picresize.com a v posledním korku editace si nastavit, že chcete JPG.

Datová velikost obrázku

Každý obrázek musíme ještě datově přizpůsobit, a to samozřejmě bez ztráty kvality obrázku. Obrázky totiž mnohdy obsahují tolik pixelů, že i když některé z nich odstraníme, tak si toho naše oko nevšimne, a proto není potřeba je tam mít. Tím opět snížíme datovou náročnost obrázku. Samozřejmě nebudeme pixely mazat ručně, ale použijeme aplikaci https://tinypng.com.

Je to jedna z nejlepších aplikací pro optimalizaci obrázků. Jednoduše vyberete, nahrajete a jen stáhnete, protože o zbytek se postará aplikace. A vy uvidíte, kolik jste tak vlastně ušetřili dat.

Název obrázku

Jednou z dalších chyb je to, že obrázky nesou nesmyslné názvy. I na to Google dává pozor, zahrnuje to do svého vzorečku a ohodnocuje tak vaše SEO. Když mu tam dáte obrázek se jménem DIC016841v.jpg , tak z toho moc moudrý nebude a nějaký ten bodík vám strhne. Proto raději vždy obrázky logicky pojmenujte. Ideálně podle toho, co je na obrázku, ale pamatujte, že je dobře tam mít klíčové slovo.

Tedy, pokud mám stránku o autech a na obrázku mám modré auto, dám název třeba modre_auto.jpg. A určitě vždy bez mezer a diakritiky!

Více o SEO optimalizaci si můžete přečíst zde

Závěr

No, a to je celé. Možná se vám zdá, že je to trochu zdlouhavý proces, věřte ale, že po pár opakováních si to tak zažijete, že vám optimalizace zabere jen pár desítek vteřin navíc. A na závěr malý příklad:

Můj telefon pořídil fotku o velikost 4,91 MB. Na stránku jsem potřeboval 5 těchto fotek. V případě, kdy jsem se vykašlal na optimalizaci, museli návštěvníci, aby si web prohlédli, stáhnout minimálně 24,55 MB. S optimalizací fotek se číslo zmenšilo na 415 kb. Stránka se tak mým návštěvníkům načte o 59 % rychleji. To za to stojí, ne? 😊

V kostce:

  1. Rozmyslete si, kam obrázek umístíte
  2. Zmenšete velikost obrázku
  3. Změnete formát obrázku na JPG (pokud nepotřebujeme mít průhledné nebo žádné pozadí)
  4. Zmenšete datovou velikost obrázku
  5. Logicky obrázek pojmenujte

A TIP NAKONEC:

Obrázky zdarma můžete získat například na pixabay.com nebo unsplash.com.

Nejčastější chyby při nahrávání obrázků na web
4 (80%) 4 Hodnocení
Honza Tipmann
Grafik, webař a UX designér. Grafika mě jednoduše baví a pokud jí smícháme ještě s psychologií, jsem ve svém živlu :)
Komentáře

Přidat komentář

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Vaše osobní údaje budou použity pouze pro účely zpracování tohoto komentáře.