Optimalizace obrázků pro web – 10 tipů

Optimalizace obrázků pro web

Správně optimalizované fotky na webové stránce dokáží přivést na web podstatnou část organických návštěv. Při tvorbě nebo úpravě webové stránky je tedy nezbytné věnovat této problematice dostatek času. Existuje spousta nástrojů a kroků, kterými lze zpracování a přípravu fotek urychlit. Níže se dočtete několik nejdůležitějších bodů, které vám pomohou mít fotky na webu správně optimalizované a pro Google a další vyhledavače tak snadno čitelné.

1. Vhodný formát obrázku nebo fotky pro web

Nejpoužívanější formáty obázků na webových stránkách jsou PNG a JPEG.

  • PNG – lepší kvalita fotky, ale také větší velikost
  • JPEG – mírně horší kvalita fotka, která ale nemusí být vůbez znatelná

 2. Komprimace obrázků

Rozdíl mezi komprimovanými a nekomprimovanými obrázky může být v desítkách procent. Komprimace obrázků tak dokáže podstatně zrychlit načítání webu. Proto důrazně doporučuji kompresi obrázků před nahráním na váš web. Můžete to udělat ve Photoshopu nebo můžete použít nástroj jako TinyPNG. Pro systémy jako WordPress nebo Drupal pak existují pluginy a moduly, které tuto funkci optimalizace obrázků vykonávají přímo na webu.

 3. Pojmenování fotky/obrázku – využití klíčových slov

Většina fotek z fotoaparátů je pojménována jako například „IMG47712“ nebo nějak podobně. Takové pojmenování ale Googlu moc neřekne. Vlastně neřekne vůbec nic. Je proto důležité věnovat čas i této části optimalizace. V open source systémech jako např. v Drupalu jde nastavit, aby se fotka přejmenovala v momentě, kdy je nahrávána do příspěvku nebo k produktu. Fotka pak může být pojmenována stejně jako produkt nebo nadpis článku (viz. např. „Kolečkové brusle vel.39“ – název fotky je: koleckove-brusle-vel-39).

Pokud potřebujete zpracovat fotky hromadně předem, ve Photoshopu existuje velmi užitečný nástroj, který fotky přejmenuje (ale provede i jiné případné úpravy) najednou a ušetří tak opravdu hodně času.

Při pojmenování obrázku vždy zvažte klíčová slova, která mohou obrázek nejlépe vystihovat.

4. Alternativní popis obrázků neboli Alt

Podobně jako nadpis článku obsahuje krátky popis toho o čem článek je, Alt tag informuje prohlížeč co je obsahem obrázku. Alternativní popis obrázku by tak měl skutečně obsahovat informace vystihující obsah obrázku. Google absenci Alt popisů u obrázku hodnotí negativně. Stejně jako v případě pojmenování fotky, lze tuto funkci nastavit automaticky, aby se vyplnila dle názvu příspěvku nebo názvu produktu při vkládání na web.

 5. Optimalizované umístění obrázku

Nejdůležitější obrázek by měl být umístěn poblíž horního okraje stránky a co nejblíže relevantnímu textu.

 6. Umístění obázků ve složkách

Snažte se, aby se obrázky ukládali do správné struktury URL, např.: media/panske/kalhoty/…

 7. Responzivní web

Většina uživatelů navštěvuje web přes mobilní telefon. Je proto velice důležité mít responzivní obrázky a responzivní webovou stránku, tzn. takovou, která se přizpůsobí zařízení na kterém je otevřena. Zda je vaše stránka vhodná pro mobilní telefony si můžete ověřit zde: https://search.google.com/test/mobile-friendly

 8. Strukturovaná data

U produktových obrázků nebo obrázků receptů je doporučené mít nastavená strukturovaná data, která vylepší uživatelský dojem a poskytují další relevatní informace.

 9. Sitemap pro obrázky

U velkých webů nebo eobchodů kde jsou stovky a tisíce obrázků je vhodné mít samostatný plugin nebo modul sitemap pro obrázky, který poskytne vyhledavačům další informace, které by jinak nemusely najít.

 10. Použití fotek z fotobank

Ne vždy je použití fotek z fotobank vhodné řešení. V mnoha fotobankách se dají získat sice krásné fotografie zdarma, ale takovou fotku pak můžete najít na spoustě jiných webů. Pokud chcete mít originální obsah, snažte se získat vlastní fotografie.

 

Potřebujete nový web, SEO optimalizaci nebo PPC kampaň?

Neváhejte mne kontaktovat pro nezávaznou konzultaci nebo kalkulaci.

Klienti

bravo_consulting_logo_email_new
Mosaic House Design Hotel Prague
Logo-stonemania
logo balonove mistrovstvi
MOOo apartments
TAXPROM
CUKRARNA-ANICKA.CZ-(Logo)
staj hostenice
logo-svitilplus
bytjakmabyt
detskybazar-logo
logo autosklo maja
Nicole Machová
logo balonove mistrovstvi
Apartmany-Medvědín
Bydlení Zbýšov
motorestnavyhlidce
balonem
logo nabytek feriboot
logo skyballoon
logo agnesviliam
logo poncho.cz

Seo novinky

Volba fontu na webové stránce nemá pro Google žádný význam

Volba fontu na webové stránce nemá pro Google žádný významPokud vybíráte pro web nový font tak vězte, že Googlu je jedno jaký font použijete. Jak řekl ve svém Tweetu John Mueller z Googlu , měli byste především zvážit, jaký font by se mohl líbit vašim zákazníkům....

Font Awesome vydal sadu nových ikon se vztahem ke COVID-19

Font Awesome vydal sadu nových ikon se vztahem ke COVID-19Tým stojící za Font Awesome vydal novou sadu ikon na pomoc proti šíření COVID-19. Nové ikony jsou dostupné v aktualizaci Awesome 5.13 zdarma ve FREE verzi. Rozšířené verze ikon jsou pak součástí placené PRO...

WordPress 5.5 bude mít automatické aktualizace šablon a pluginů

WordPress 5.5 bude mít automatické aktualizace šablon a pluginůAutomatická aktualizace je v současné době dostupná pouze pro jádro systému WordPress. V nadcházející verzi WordPressu 5.5 bude možné nastavit také nastavit automatické aktualizace šablon a pluginů....

Ověření webové stránky přes W3C je pro Google bezvýznamné

Ověření webové stránky přes W3C je pro Google bezvýznamnéW3C neboli World Wide Web Consortium je mezinárodní sdružení jehož členové vyvíjejí webové standardy pro World Wide Web. „Cílem konsorcia je rozvíjet World Wide Web do jeho plného potenciálu vývojem protokolů a...

Kontaktujte mne

Potřebujete nezávaznou konzultaci nebo cennovou kalkulaci? Neváhejte mne kontaktovat.