Jak na obrázky na webu

Pokud spravujete web, určitě jste se dostali do situace, kdy jste chtěli na svůj web nahrát nějakou fotku, obrázek nebo použít ikonu. 

V dnešním návodu vám chci shrnout několik pravidel, díky kterým si ušetříte hodně práce v budoucnosti a nezatížíte tak výkon svého webu. Pro zjednodušení textu budu v tomto návodu používat slovo obrázek souhrnně pro fotky, ikony, ilustrace, grafy, infografiky apod.

V tomto článku se podíváme na to:

1. v jakém formátu dávat obrázky na web
2. v jaké velikosti dávat obrázky na web
3. v jakých rozměrech dávat obrázky na web
4. jak na pojmenování obrázků na webu (název a alternativní popisek) 
5. proč vůbec obrázky na webu používat
6. kde obrázky na web sehnat

Formát

Nejčastěji se asi setkáte s fotkami v tzv. JPG nebo JPEG formátu, což je naprosto v pořádku. Obecně jsou menší než formát PNG, takže pokud vybíráte, zdali obsah nahrajete v PNG nebo v JPG (a kvalitativně vám je to jedno), volte soubor menší velikosti. 

Na webu se můžete dále setkat s formátem SVG, což je formát pro vektorovou grafiku a často se v něm nahrávají na web např. loga. 

Loga nebo favicony můžete mít i v PNG formátu s transparentním pozadím, doporučuji to například pro favicon webu (ikonku webu v záložce prohlížeče). 

Pokud chcete svému webu ještě ulehčit a zlepšit mu výkon, můžete formáty JPG/JPEG nebo PNG konvertovat na formát WEBP, např. přes tento nástroj: Convertio

Velikost

Nahrávání příliš velkých fotek je asi nejčastějším problémem, se kterým se na webech klientů setkávám. Vaším cílem je na web nahrát fotky co nejmenší, protože tak nezhoršíte výkon webu. Já osobně mám pravidlo, že cokoliv, co má nad 500 kB, na web nesmí (jen ve vzácných případech), ale to je subjektivně stanovený limit. 

Velikost fotky (nikoliv její rozměry, na to se podíváme níže) můžete jednoduše zmenšit např. pomocí tohoto nástroje TinyPNG. Fotky jednoduše nahrajete ze svého počítače a poté si zpět stáhnete jejich zkomprinovanou (zmenšenou) verzi. 

Rozměry

Podobně jako u velikosti, nahrávat na web fotku o šířce 5000 px není úplně dobrou cestou. Pokud si nejste jisti, v jakých rozměrech na web fotku nahrát, můžete se držet univerzálního schématu dole, kde hlavním kritériem je šířka fotky. 

Pojmenování obrázků

Obrázky můžete využít i ke svému prospěchu v rámci SEO svého webu. Pokud při nahrání fotky na webu upravíte název fotky a její alternativní popisek podle svých klíčových slov (vaše téma, značka nebo jméno), Google a jemu podobné vyhledávače vás za to v dlouhodobém horizontu ocení. Nemluvě o tom, že alternativní popisek pomáhá např. nevidomým, co váš web (včetně obrázků) čtou pomocí čtečky a místo fotek se jim přečte právě to, co do alternativního popisku napíšete. 

Ve WordPressové administraci vyplňujete alternativní popisek a název do těchto políček.

Jak tyto dvě části vyplnit? 

V názvu fotky nepoužívejte diakritiku a mezery, místo mezer využijte podtržítko _ nebo pomlčku -.
U alternativního popisku se už nenechte limitovat, použijte diakritiku, mezery a klidně obrázek popište do větších detailů. Pokud je fotka pouze dekorativní, můžete alternativní popisek vynechat. Pokud je obrázek zároveň odkazem např. na jinou část webu, můžete to také v alternativním popisku zmínit. 

Příklad, jak na dobrý alternativní text, si můžete prohlédnout níže:

Proč vlastně obrázky využívat?

Obrázky na webu určitě chcete. 

Pomáhají nám doplňovat textové sdělení o další obsah, někdy vysvětlují a znázorňují to, co bychom si jen čtením těžko představili. Vyvolávají emoce, vyprávějí příběh. 

Bohužel musíme dnes na webu počítat s tím, že hodně textu čtenáře spíš odradí – doladění atmosféry fotkou, která vyvolává tu správnou emoci, vám může několik odstavců ušetřit. 

Vždy se ale zamyslete nad tím, jestli obrázky plní svou funkci a jsou v souladu s celým vizuálem webu a vašeho brandu. Pomáhají vám předat čtenáři to, co jste chtěli? Vysvětlují? Nebo jen odvádějí pozornost jiným směrem? Odráží vaše hodnoty? Jsou v souladu s obsahem textu? 

A kde je sehnat?

To, že obrázky nemůžete jen tak zkopírovat z Google, je vám asi jasné. Můžete využít fotobank, ať už placených (Adobe Stock, ShutterStock) nebo zdarma (Unsplash). Poměrně slušná zásoba se dá najít i v Canvě, ať už ve zdarma nebo placené verzi. 

Dá se nicméně říci, že čím autentičtější fotky budete mít, tím lépe pro vás. Ideální scénário je mít fotky na míru (třeba z focení, kdy fotíte cíleně pro web a sítě – takové balíčky se snažím svým klientům poskytnout i já). V dnešní době si nicméně poradíte i s dobrým foťákem na telefonu. Nebojte se tak na web zakomponovat i fotky, které si vyfotíte sami – pokud splňují kritéria uvedená výše, pomohou vás v záplavě webů s fotkami z fotobank odlišit a přiblížit vás tak vašim klientům. 

Závěr

Pokud si u obrázků budete dávat pozor na výše zmíněné, posunete svůj web zase o úroveň výše. Určitě to stojí za to. Ráda bych ještě v závěru poukázala na článek z mého blogu, který se obrázků také týká, a to Jak na náhledy webu na Facebooku. Pokud byste svůj web rádi probrali na individuální konzultaci, bude mi potěšením.