Čo je optimalizácia obrázkov?

← Slovník SEO pojmov

  • Publikované:
  • Aktualizované:
  • #seo #technickeseo #rychlost

Optimalizácia obrázkov je úprava obrázkov na webe tak, aby mali vhodnú veľkosť, formát a kompresiu pri zachovaní kvality. Obrázky sú často najväčšou časťou stránky. Ich správne spracovanie výrazne zrýchli web.

Ako obrázky optimalizujeme?

  1. Správna veľkosť: rozmery obrázka zodpovedajú veľkosti, v akej sa zobrazí, aj s ohľadom na hustotu pixelov displeja.
  2. Moderný formát: WebP komprimuje lepšie ako JPEG, PNG či GIF. AVIF môže komprimovať ešte viac, no má menšiu podporu v prehliadačoch. Pre čiary a diagramy sa hodí SVG.
  3. Kompresia: stratová kompresia sa hodí na fotografie, bezstratová na ostré hrany, text a jednoliate plochy. Kvalitu po úprave treba skontrolovať.
  4. Záložný formát: prvok picture umožní uviesť AVIF a WebP s JPEG ako zálohou.
  5. Rozmery v HTML: atribúty width a height zabránia posunu obsahu, pozri CLS.
  6. Odložené načítanie: obrázky mimo viditeľnej oblasti načítame neskôr, pozri lazy loading.

Prečo obrázky v rôznych veľkostiach?

Atribút srcset dovolí prehliadaču vybrať vhodnú veľkosť podľa šírky obrazovky a hustoty pixelov. Pri šírkach treba pridať aj sizes. Malý telefón tak nesťahuje obrovskú fotografiu. Súvisí to s responzívnym dizajnom.

Čo to znamená pre SEO?

Veľký obrázok v hornej časti stránky často určuje LCP, preto jeho veľkosť priamo ovplyvňuje rýchlosť. K SEO patrí aj popis obrázkov, pozri alt text. Obrázky majú byť dostupné v HTML a nie len vo vloženom skripte.

Čo si zapamätať o pojme optimalizácia obrázkov?

Optimalizácia obrázkov je jedným z najrýchlejších spôsobov, ako web zrýchliť. Pri tvorbe webu na mieru ju robíme ako súčasť návrhu, nie dodatočne.

Ako to rieši webstrankanamieru.sk: Pojem optimalizácia obrázkov patrí do technickej časti optimalizácie. Postup nájdete v sekcii SEO na mieru, zistenia z praxe v novinkách a ceny v cenníku. Ak chcete skontrolovať svoj web, napíšte nám.

Súvisiace pojmy: WebP, Lazy loading, Alt text, Responzívny dizajn, LCP, CLS, Kompresia, max-image-preview, Photoshop

Často kladené otázky o pojme optimalizácia obrázkov

Čo je optimalizácia obrázkov?

Je to úprava obrázkov tak, aby mali vhodnú veľkosť, formát a kompresiu pri zachovaní kvality.

Aký formát obrázkov je najlepší?

WebP komprimuje lepšie ako JPEG, PNG a GIF. AVIF môže byť ešte menší, no má menšiu podporu. Pre čiary a diagramy sa hodí SVG.

Na čo slúži atribút srcset?

Dovoľuje prehliadaču vybrať vhodnú veľkosť obrázka podľa obrazovky.

Čím sa líši stratová a bezstratová kompresia?

Stratová zníži kvalitu za menšiu veľkosť, vhodná je na fotografie. Bezstratová zachová pôvodné dáta a hodí sa na ostré hrany a text.

Ovplyvňujú obrázky Core Web Vitals?

Áno. Veľký obrázok často určuje LCP a chýbajúce rozmery môžu spôsobiť posun obsahu, teda CLS.

Zdroje

  1. web.dev: Image performanceVeľkosť, formáty, kompresia a lazy loading obrázkov.
  2. Google Search Central: Google image SEO best practicesObrázky v Google Search.
  3. MDN Web Docs: Image file type and format guidePrehľad formátov obrázkov.

Všetky pojmy v slovníku