Optimalizováním a správným vkládáním obrázků a fotek na web můžeme velmi pomoci našim webovým stránkám v jejich výkonu. Navíc tyto kroky nezaberou příliš mnoho času. Stačí pouze znát jednoduchá pravidla, kterými se řídit.
Tento článek se bude soustředit na vkládání a optimalizaci obrázků v nejrozšířenějším redakčním systému WordPress, ale mnohé tipy lze uplatnit i u jiných CRM.
Ještě než se pustíme do optimalizace obrázků, tak si můžeme říci, jaké jsou nejčastější zdroje náhledových obrázků do článků.
- Vlastní fotky či obrázky – ideální varianta, kdy si obrázky vytvoříte sami, ovšem zde je potřeba, abyste měli alespoň základní grafický i fotografický cit. Druhým předpokladem je alespoň průměrný fotoaparát či mobilní telefon.
- Fotobanky – nejčastější způsob získávání fotek. Osobně doporučuji tyto fotobanky zdarma Pixabay, Unsplash, Pexels, Stocksnap, Burst.
- Obrázky pro další užití – ve vyhledávačích si můžete nastavit vyhledávání pouze fotek pro další nekomerční užití.
Jak na optimalizaci a správné nahrání obrázků a fotek krok za krokem?
Nahrání obrázků či fotky na web začíná stažením fotografie z internetu nebo přesunutím vlastní fotografie na web.
- Zde je dobré vybrat správný formát obrázku. Stále nejvíce se používá JPEG, jelikož PNG obrázky jsou datově větší.
- Obrázek byste měli pojmenovat tak, abyste podle samotného názvu tušili, o čem obrázek je. Znamená to často přepsat pořadové číslo z foťáku na krátký text.
- Pokud obrázek před nahráním na web ještě upravujete v grafickém editoru, tak můžete rovnou optimalizovat rozlišení obrázku. U obrázků do blogu Vám stačí bohatě šířka 900 pixelů.
- Pokud chcete mít obrázky v opravdu top formě, tak můžete využít některý z pluginů (WP Smush), které dokáží obrázky upravit do formátu WebP.
Optimalizace velikosti obrázku
Velké obrázky zpomalují web a rychlost webu je dnes velmi důležitá. U eshopů i desetinky opoždění oproti konkurenci mění počty konverzí v řádu jednotek procent! Navíc rychlost webu patří k hodnotícím parametrům Googlu.
Jednou možností je optimalizace či zmenšení obrázku před nahráním, avšak u WordPressu můžete obrázek zmenšit i v samotném systému na několik kliků.
Značným problémem jsou obrázky či fotky ve velikosti MB. Zšechny obrázky by se měly pohybovat v jednotkách kb a to nejlépe pod 150 kb.
Pokud vkládáte obrázek v příspěvku/článku, tak je ideální postupovat tak, že dáte na konci nového řádku +, kam chcete obrázek vložit a vyberete modul Obrázek.
Následně obrázek nahrajete do knihovny médií. Zde můžete obrázek zmenšit a přidat ALT, titulek, popis a přejmenovat (to se doporučuje udělat ale již před nahráním na web).
Nejlepší WordPress plugin na optimalizaci obrázků WP Smush
WP Smush patří k nejoblíbenějším pluginům na optimalizaci obrázků pro WordPress hned z několika důvodů. Snižuje datovou velikost obrázků, ale při tom nesnižuje samotnou kvalitu obrázku. Dále komprese obrázku probíhá mimo web a tím ho nezatěžuje.
Můžete si také nastavit maximální velikost v px, která je povolená na web nahrát. V této maximální velikosti se Vám následně budou obrázky na web nahrávat, pokud vložíte větší.
Tip: Pokud potřebujete zrychlit web na WordPressu, tak se nebojte vyhledat zkušeného profesionála. Já jsem se například při optimalizaci rychlosti webu spojil s pocitacovo.sk.
Identita webu
Obrázky na výšku, na šířku, malé nebo velké. Webu prospěje, pokud budou mít obrázky podobnou velikost a tvar. Dojem pro čtenáře je následně mnohem lepší.
Dobrou přidanou hodnotou jsou také obrázky, které ještě na internetu nikde nejsou. V případě, že pouze kopírujete obrázky z fotobank, tak ztrácíte autenticitu a pro pokročilé uživatele to může působit až podezřele.
Do článků a blogových příspěvků je lepší volit obrázky a fotky na šířku.
Alternativní popisek či ALT text obrázku
ALT obrázku slouží k popisu obrázku, pokud se obrázek nenačte. Alternativní popisek obrázku patří k SEO faktorům a rozhodně se doporučuje jej doplnit u všech obrázků na webu, kde má co vyjádřit. Jak jsme popisovali již výše, tak je vhodnější ALT vepsat v Knihovně médií. Další variantou je vepsání při označení bloku, to se ale vztahuje pouze k umístění obrázku v daném příspěvku/článku.
Jak tvořit ALT obrázku?
ALT by měl popisovat obrázek. To je jeho hlavní účel. Případně by měl obsahovat klíčová slova, na která se daná stránka či článek soustředí. Když chcete naspat dobrý ALT popisek k mikrovlnné troubě SAMSUNG ME 83 M/XEO, tak by ALT neměl obsahovat pouze jméno produktu SAMSUNG ME 83 M/XEO nebo naopak mikrovlnná trouba.
alt=“SAMSUNG ME 83 M/XEO“ 🥺
alt=“mikrovlnka“ 🥺
alt=“SAMSUNG ME 83 M/XEO – Mikrovlnná trouba“ ✔️
alt=“SAMSUNG ME 83 M/XEO – Nerezová mikrovlnná trouba“ 😎 ✔️
alt=“SAMSUNG ME 83 M/XEO – Volně stojící mikrovlnná trouba“ 😎 ✔️
Když vytváříte ALT, tak si představte, jak byste ve třech až šesti slovech nejlépe popsali daný obrázek slepci. Za tímto účelem koneckonců ALT texty kdysi vznikly.
Jak by měl být ALT text dlouhý? Uvádí se do 125 znaků, ale ideálně byste podstatu obrázku měli vystihnout v 3-6 slovech.
Neuvádějte seznam klíčových slova, ale opravdu výstižně popište obrázek.
Titulek a popis obrázku
WordPress nabízí také vyplnění titulku a popisu obrázku. Tyto dva atributy nejsou z hlediska SEO tak důležité jako velikost a ALT obrázku.
Titulek by měl být stručnějším textem, který se zobrazuje při najetí myší na daný obrázek.
Popis se naopak nejčastěji propisuje pod obrázek a je s ním svázán. Slouží k doplnění informací k obrázku nebo sdělení informace, která se přímo k obrázku váže. Na některých webech se popisy zobrazují pouze při rozkliknutí, listování v galerií a jsou tak jediným textovým vodítkem čtenáře.
Na příkladu mikrovlnky bychom do titulku mohli uvést pouze přesný typ mikrovlnné trouby „SAMSUNG ME 83 M/XEO“. Naopak v popisku bychom mohli rozvést některé vlastnosti, které mohou uživatele při pohledu na fotku napadnout. Například o objemu mikrovlnky nebo materiálu zpracování. Popis je dobré tvořit celými větami a popisně.
U WordPressu ale velmi záleží na šabloně, která nemusí popisy a titulky zobrazovat vůbec nebo v jiných pozicích.
Určitě si přečtěte také náš článek o anchor textech a internetovém podnikání.
Komentovat