Optimalizáciou a správnym vkladaním obrázkov a fotiek na web môžeme výrazne pomôcť výkonu našich webových stránok. Navyše tieto kroky nezaberú príliš veľa času. Stačí poznať jednoduché pravidlá, ktorými sa treba riadiť.
Tento článok sa zameria na vkladanie a optimalizáciu obrázkov v najrozšírenejšom redakčnom systéme WordPress, no mnohé tipy môžete uplatniť aj v iných CRM.
Skôr než sa pustíme do optimalizácie obrázkov, povedzme si, aké sú najčastejšie zdroje náhľadových obrázkov do článkov.
- Vlastné fotky alebo obrázky – ideálna varianta, keď si obrázky vytvoríte sami, no na to potrebujete aspoň základný grafický a fotografický cit. Druhým predpokladom je aspoň priemerný fotoaparát alebo mobilný telefón.
- Fotobanky – najčastejší spôsob získavania fotiek. Osobne odporúčam tieto bezplatné fotobanky: Pixabay, Unsplash, Pexels, Stocksnap, Burst.
- Obrázky na ďalšie použitie – vo vyhľadávačoch si môžete nastaviť vyhľadávanie iba fotiek na ďalšie nekomerčné použitie.
Ako optimalizovať a správne nahrať obrázky a fotky krok za krokom?
Nahrávanie obrázkov alebo fotiek na web začína stiahnutím fotografie z internetu alebo presunutím vlastnej fotografie na web.
- Tu je dobré zvoliť správny formát obrázka. Stále sa najviac používa JPEG, pretože PNG obrázky sú dátovo väčšie.
- Obrázok by ste mali pomenovať tak, aby ste už podľa samotného názvu vedeli, čo zobrazuje. Často to znamená prepísať poradové číslo z fotoaparátu na krátky text.
- Ak obrázok pred nahraním na web ešte upravujete v grafickom editore, môžete rovno optimalizovať jeho rozlíšenie. Pri obrázkoch do blogu Vám bohato stačí šírka 900 pixelov.
- Ak chcete mať obrázky naozaj v top forme, môžete využiť niektorý z pluginov (WP Smush), ktoré dokážu obrázky upraviť do formátu WebP.
Optimalizácia veľkosti obrázka
Veľké obrázky spomaľujú web a rýchlosť webu je dnes veľmi dôležitá. Pri e-shopoch aj desatiny sekundy oneskorenia oproti konkurencii menia počet konverzií v rádoch jednotiek percent! Navyše rýchlosť webu patrí medzi hodnotiace parametre Googlu.
Jednou z možností je optimalizácia alebo zmenšenie obrázka pred nahraním, no vo WordPresse môžete obrázok zmenšiť aj priamo v systéme na pár kliknutí.
Veľkým problémom sú obrázky alebo fotky s veľkosťou v MB. Všetky obrázky by sa mali pohybovať v jednotkách kb, a to najlepšie pod 150 kb.
Ak vkladáte obrázok do príspevku/článku, je ideálne postupovať tak, že na konci nového riadka, kam chcete obrázok vložiť, kliknete na + a vyberiete modul Obrázok.
Následne obrázok nahráte do knižnice médií. Tu môžete obrázok zmenšiť, pridať ALT, titulok, popis a premenovať ho (to sa však odporúča urobiť už pred nahraním na web).
Čo je optimalizácia obrázkov pre web a ako funguje
Optimalizácia obrázkov pre web znamená upraviť obrázok tak, aby sa načítal čo najrýchlejšie a pritom stále vyzeral dobre. Skladá sa z troch krokov. Prvým sú správne rozmery v pixeloch, druhým vhodný formát súboru a tretím kompresia.
Stratová a bezstratová kompresia
Bezstratová kompresia odstráni zo súboru nepotrebné údaje, napríklad metadáta z fotoaparátu. Obraz zostane úplne rovnaký, no úspora býva menšia. Stratová kompresia zníži kvalitu do miery, ktorú oko pri bežnom prezeraní väčšinou nepostrehne, a súbor zmenší výraznejšie. Pri fotografiách sa zvyčajne oplatí stratová kompresia. Pri grafikách s textom a ostrými hranami buďte opatrnejší, pretože na nich sa zhoršenie kvality prejaví skôr.
Ktorý formát kedy zvoliť
- JPEG je vhodný na fotografie s množstvom farieb a prechodov.
- PNG použite, ak potrebujete priehľadné pozadie alebo ostrý text, napríklad pri snímkach obrazovky.
- WebP je moderný formát, ktorý pri porovnateľnej kvalite býva menší ako JPEG aj PNG. Podporujú ho všetky bežné prehliadače.
- AVIF dokáže súbory zmenšiť ešte viac, no jeho spracovanie je náročnejšie a nie každý nástroj s ním pracuje.
- SVG je vektorový formát vhodný na logá a ikony. Zostane ostrý pri akejkoľvek veľkosti.
WordPress pri nahratí obrázka automaticky vytvorí niekoľko jeho zmenšených verzií a prehliadač si potom vyberie tú, ktorá zodpovedá veľkosti obrazovky. Preto nemá zmysel nahrávať obrázky výrazne väčšie, než ich web dokáže zobraziť.
Najlepší WordPress plugin na optimalizáciu obrázkov WP Smush
WP Smush patrí medzi najobľúbenejšie pluginy na optimalizáciu obrázkov pre WordPress hneď z niekoľkých dôvodov. Znižuje dátovú veľkosť obrázkov, no pritom neznižuje samotnú kvalitu obrázka. Kompresia obrázka navyše prebieha mimo webu, takže ho nezaťažuje.
Môžete si tiež nastaviť maximálnu veľkosť v px, ktorú je povolené nahrať na web. Ak vložíte väčší obrázok, nahrá sa na web v tejto maximálnej veľkosti.
Tip: Ak potrebujete zrýchliť web na WordPresse, nebojte sa vyhľadať skúseného profesionála. Ja som sa napríklad pri optimalizácii rýchlosti webu spojil s pocitacovo.sk.
Ako vybrať nástroj na optimalizáciu obrázkov
WP Smush nie je jediná možnosť. Medzi ďalšie známe pluginy patria napríklad EWWW Image Optimizer, ShortPixel alebo Imagify. Ktorý z nich je pre Vás najlepší, závisí od veľkosti webu a od toho, čo od nástroja očakávate. Pri výbere si všímajte tieto vlastnosti:
- hromadnú optimalizáciu obrázkov, ktoré už máte v knižnici médií,
- automatickú konverziu do formátu WebP,
- možnosť nastaviť úroveň kompresie,
- zálohu pôvodných súborov pre prípad, že by ste s výsledkom neboli spokojní,
- obmedzenia bezplatnej verzie, napríklad počet alebo veľkosť obrázkov.
Ak nechcete inštalovať ďalší plugin, obrázky môžete upraviť ešte pred nahraním. Poslúži online nástroj ako Squoosh alebo TinyPNG, prípadne export v grafickom editore. Výhodou pluginu je, že pracuje automaticky a na nič nezabudne.
Nepoužívajte naraz viac pluginov na rovnakú úlohu. Môžu sa navzájom rušiť a opakovaná kompresia obrázky zbytočne zhorší.
Identita webu
Obrázky na výšku, na šírku, malé alebo veľké. Webu prospeje, ak budú mať obrázky podobnú veľkosť a tvar. Dojem čitateľa je potom oveľa lepší.
Dobrou pridanou hodnotou sú aj obrázky, ktoré ešte na internete nikde nie sú. Ak len kopírujete obrázky z fotobánk, strácate autenticitu a pokročilým používateľom to môže pripadať až podozrivé.
Do článkov a blogových príspevkov je lepšie voliť obrázky a fotky na šírku.
Alternatívny popis alebo ALT text obrázka
ALT obrázka slúži na popis obrázka v prípade, že sa obrázok nenačíta. Alternatívny popis obrázka patrí medzi SEO faktory a určite sa odporúča doplniť ho ku všetkým obrázkom na webe, kde má čo vyjadriť. Ako sme už opísali vyššie, ALT je vhodnejšie vpísať v Knižnici médií. Ďalšou možnosťou je vpísať ho pri označení bloku, to sa však vzťahuje iba na umiestnenie obrázka v danom príspevku/článku.
Ako vytvoriť ALT obrázka?
ALT by mal opisovať obrázok. To je jeho hlavný účel. Prípadne by mal obsahovať kľúčové slová, na ktoré sa daná stránka alebo článok zameriava. Ak chcete napísať dobrý ALT popis k mikrovlnnej rúre SAMSUNG ME 83 M/XEO, ALT by nemal obsahovať iba názov produktu SAMSUNG ME 83 M/XEO alebo naopak iba mikrovlnná rúra.
alt=“SAMSUNG ME 83 M/XEO“ 🥺
alt=“mikrovlnka“ 🥺
alt=“SAMSUNG ME 83 M/XEO – Mikrovlnná rúra“ ✔️
alt=“SAMSUNG ME 83 M/XEO – Nerezová mikrovlnná rúra“ 😎 ✔️
alt=“SAMSUNG ME 83 M/XEO – Voľne stojaca mikrovlnná rúra“ 😎 ✔️
Keď vytvárate ALT, predstavte si, ako by ste daný obrázok čo najlepšie opísali nevidiacemu človeku v troch až šiestich slovách. Napokon, práve na tento účel ALT texty kedysi vznikli.
Aký dlhý by mal byť ALT text? Uvádza sa do 125 znakov, ale ideálne by ste podstatu obrázka mali vystihnúť v 3-6 slovách.
Neuvádzajte zoznam kľúčových slov, ale obrázok naozaj výstižne opíšte.
Titulok a popis obrázka
WordPress ponúka aj vyplnenie titulku a popisu obrázka. Tieto dva atribúty nie sú z hľadiska SEO také dôležité ako veľkosť a ALT obrázka.
Titulok by mal byť stručnejší text, ktorý sa zobrazí po prejdení myšou nad daný obrázok.
Popis sa naopak najčastejšie zobrazuje pod obrázkom a je s ním prepojený. Slúži na doplnenie informácií k obrázku alebo na oznámenie informácie, ktorá sa priamo viaže na obrázok. Na niektorých weboch sa popisy zobrazujú iba po rozkliknutí alebo pri listovaní v galérii, a sú tak jediným textovým vodítkom čitateľa.
Na príklade mikrovlnky by sme do titulku mohli uviesť iba presný typ mikrovlnnej rúry „SAMSUNG ME 83 M/XEO“. V popise by sme naopak mohli rozviesť niektoré vlastnosti, ktoré môžu používateľa pri pohľade na fotku napadnúť. Napríklad objem mikrovlnky alebo materiál vyhotovenia. Popis je dobré písať celými vetami a opisne.
Vo WordPresse však veľmi záleží na šablóne, ktorá nemusí popisy a titulky zobrazovať vôbec alebo ich môže zobrazovať na iných miestach.
Určite si prečítajte aj náš článok o anchor textoch a internetovom podnikaní.
Najčastejšie chyby pri optimalizácii obrázkov pre web
- Nahrávanie fotiek priamo z fotoaparátu alebo telefónu. Majú zbytočne veľké rozmery aj dátovú veľkosť.
- Príliš silná kompresia. Rozmazaný obrázok pôsobí neprofesionálne, aj keď sa načíta rýchlo.
- Fotografie uložené ako PNG. Súbor býva niekoľkonásobne väčší ako pri JPEG alebo WebP.
- Prázdny alebo nič nehovoriaci ALT text. Popis by mal vystihovať, čo obrázok naozaj zobrazuje.
- Zabudnuté staré obrázky. Po nasadení pluginu spustite aj hromadnú optimalizáciu už nahratých súborov.
Časté otázky o optimalizácii obrázkov pre web
Čo je optimalizácia obrázkov pre web?
Je to úprava obrázkov tak, aby mali čo najmenšiu dátovú veľkosť pri zachovaní dobrej kvality. Patrí k nej voľba správnych rozmerov, vhodného formátu a kompresie. Súčasťou je aj výstižný názov súboru a ALT text.
Ktorý plugin na optimalizáciu obrázkov vo WordPresse je najlepší?
Univerzálne najlepší plugin neexistuje. Obľúbené sú WP Smush, EWWW Image Optimizer, ShortPixel a Imagify. Vyberte ten, ktorý zvláda hromadnú optimalizáciu, konverziu do WebP a zálohu originálov a ktorého bezplatná verzia stačí pre Váš web.
Aký nástroj použiť na optimalizáciu obrázkov bez pluginu?
Obrázky môžete zmenšiť a skomprimovať pred nahraním v online nástrojoch, ako sú Squoosh alebo TinyPNG. Rovnako dobre poslúži export v grafickom editore, kde nastavíte rozmery, formát a kvalitu. Tento postup je vhodný najmä pri menšom počte obrázkov.
Čo všetko patrí k optimalizácii obrázkov okrem ich veľkosti?
Dôležitý je popisný názov súboru, výstižný ALT text a prípadne titulok a popis. Pomáhajú porozumieť obsahu obrázka ľuďom aj strojom, ktoré ho spracúvajú. Obrázok by mal navyše súvisieť s textom, pri ktorom je umiestnený.
Leave A Reply