Ako správne vyberať obrázky pre web? Úprava a optimalizácia obrázkov pre váš web
Na význame kvalitných obrázkov na webe sa zhodneme asi všetci. Stačí si spomenúť na vlastné skúsenosti – jedlo, ktoré na obrázku nevyzerá lákavo, si neobjednáme. Blog so zlou kvalitou obrázkov rovno preskočíme. Napriek tomu mnohí podnikatelia stále používajú fotografie zhotovené nekvalitným fotoaparátom alebo obrázky, ktoré sú už dávno opozerané.
Výber obrázkov však nie je všetko. Správna optimalizácia obrázkov je kľúčová pre dosiahnutie kvalitného používateľského zážitku aj lepšie SEO. Tento článok vám ukáže, ako na to.
1. Základné požiadavky na obrázky pre web
Obrázok, ktorý používate na svojom webe, musí spĺňať dve základné podmienky:
- Právo na používanie: Používajte vlastné fotografie, obrázky zakúpené z fotobánk alebo obrázky s licenciou CC0/Public Domain. Pri bezplatných obrázkoch sa vždy uistite, že poznáte ich pôvod a že sú naozaj voľne dostupné.
- Kvalita: Obrázky by mali byť ostré, správne nasvietené a vyladené. Ak nie ste profesionálny fotograf, zvážte spoluprácu s odborníkom. Investícia do kvalitných fotografií sa vždy vyplatí.
2. Obrázky, ktorým sa treba vyhnúť
Nie každý obrázok je vhodný pre váš web. Nasledujúcim typom sa radšej vyhnite:
- Klišé fotografie, ktoré nesúvisia s obsahom.
- Rozrastrované alebo rozmazané obrázky.
- Obrázky s nevhodným osvetlením alebo slabou kvalitou.
- Pohyblivé GIFy, ktoré odvádzajú pozornosť a neprinášajú hodnotu obsahu.
3. Ako vybrať správny formát obrázku
Každý formát má svoje využitie. Tu je prehľad najčastejších formátov:
| Formát | Využitie | Výhody | Nevýhody |
|---|---|---|---|
| JPEG | Webové stránky, blogy | Kompromis medzi kvalitou a veľkosťou | Menej vhodný pre obrázky s textom a priehľadným pozadím |
| PNG | Sociálne siete, grafika | Vyššia kvalita, priehľadnosť | Väčšia veľkosť súborov |
| GIF | Animácie, malé grafiky | Podpora animácií | Nevhodné pre fotografie, nízka kvalita |
4. Zmenšovanie veľkosti obrázkov
Veľké obrázky spomaľujú načítavanie webu. Pred nahraním ich upravte pomocou softvérov ako IrfanView, Photoshop (funkcia “Save for Web”) alebo nástrojov na Macu.
Na ďalšie komprimovanie skúste online služby:
5. Správny názov súboru a alt text
Názov súboru:
- Mal by obsahovať kľúčové slová oddelené pomlčkami (napr. detsky-domcek-zahrada.jpg).
- Nepoužívajte diakritiku, veľké písmená a zvláštne znaky.
Alt text:
- Slúži ako opis obrázku pre vyhľadávače a ľudí so zrakovým postihnutím.
- Stručne popisuje obsah obrázku (napr. Detský domček na záhrade).
6. Popisy obrázkov
Popisy obrázkov často čítajú návštevníci, ktorí len “skenujú” text. Využitie popisu zvyšuje šancu, že zaujmete čitateľa, a môže prispieť k lepšiemu zapojeniu.
Checklist pre optimalizáciu obrázkov
- Obrázok sa hodí k obsahu a je kvalitný.
- Máte právo na jeho používanie.
- Používate vhodný formát (ideálne JPEG).
- Veľkosť obrázku je znížená na 100 kB alebo menej.
- Názov obsahuje kľúčové slová a je napísaný cez pomlčky.
- Obrázok má zadaný alt text.
- Obrázok má popis pre lepšiu orientáciu čitateľov.
