Web Developmentzačiatočník

Čo je Optimalizácia obrázkov?

Optimalizácia obrázkov je súbor techník na zmenšenie veľkosti obrazových súborov bez výraznej straty vizuálnej kvality. Zahŕňa výber správneho formátu, nastavenie kompresie, zmenu rozmerov a použitie moderných formátov ako WebP. Obrázky tvoria priemerne 50 % dát webstránky.

Definícia Optimalizácia obrázkov

Čo je optimalizácia obrázkov

Optimalizácia obrázkov je proces zmenšenia veľkosti obrazových súborov na minimum pri zachovaní prijateľnej vizuálnej kvality. Podľa HTTP Archive tvoria obrázky priemerne 50 % celkovej veľkosti webstránky, čo ich robí najdôležitejším cieľom pre optimalizáciu výkonu.

Techniky optimalizácie

  • Správny formát — fotografie vo formáte JPEG/WebP, grafika s plochými farbami v PNG/SVG, animácie v WebP namiesto GIF
  • Kompresia — zníženie kvality JPEG na 75-85 % je pre web dostatočné a ušetrí 40-60 % dát
  • Responzívne obrázky — atribút srcset umožňuje posielať rôzne veľkosti pre rôzne zariadenia
  • Lazy loading — obrázky pod ohybom sa načítajú až pri scrollovaní
  • Moderné formáty — WebP a AVIF ponúkajú lepšiu kompresiu ako JPEG a PNG

Nástroje na optimalizáciu

  • Sharp — rýchla Node.js knižnica na spracovanie obrázkov (používa Next.js)
  • Squoosh — webová aplikácia od Google na porovnanie formátov a kompresie
  • Next.js Image — komponent <Image> automaticky optimalizuje obrázky, generuje WebP a nastavuje správne rozmery

Praktický príklad

Príklad: Portfolio fotografa obsahuje 30 fotografií v originálnom rozlíšení — celková veľkosť 180 MB.

Po optimalizácii: fotografie sa zmenšia na maximálnu šírku 1920 px, prevedú sa do formátu WebP s kvalitou 80 % a pridá sa lazy loading. Celková veľkosť klesne na 8 MB — úspora 95 %. Stránka sa na mobilnom pripojení načíta za 3 sekundy namiesto pôvodných 45 sekúnd.

Často kladené otázky

Prečo je optimalizácia obrázkov dôležitá?

Obrázky tvoria priemerne 50 % veľkosti webstránky. Neoptimalizované obrázky výrazne spomaľujú načítanie, zhoršujú Core Web Vitals a môžu zvýšiť náklady na hosting a CDN.

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

Pre fotografie je najlepší WebP — ponúka o 25-35 % lepšiu kompresiu ako JPEG pri rovnakej kvalite. Pre grafiku, logá a ikony je ideálny SVG (vektorový formát). Pre obrázky s priehľadnosťou PNG alebo WebP.

Ako optimalizovať obrázky v Next.js?

Next.js ponúka komponent Image (next/image), ktorý automaticky optimalizuje obrázky — generuje WebP, nastavuje správne rozmery, pridáva lazy loading a zobrazuje blur placeholder počas načítania.

Akú kvalitu nastaviť pre JPEG/WebP na webe?

Pre väčšinu webových fotografií je optimálna kvalita 75-85 %. Pod 70 % sa začínajú objavovať viditeľné artefakty. Pre hero obrázky a portfóliá fotografov sa odporúča 85-90 %.

Súvisiace pojmy

WebP

WebP je moderný obrazový formát vyvinutý spoločnosťou Google, ktorý ponúka o 25-35 % menšie súbory ako JPEG pri rovnakej vizuálnej kvalite. Podporuje stratovú aj bezstratovú kompresiu, priehľadnosť (alfa kanál) a animácie. Je podporovaný všetkými modernými prehliadačmi.

Lazy Loading

Lazy loading je technika odloženého načítavania zdrojov, pri ktorej sa obrázky, videá alebo časti kódu načítajú až vtedy, keď ich používateľ skutočne potrebuje. Znižuje počiatočný objem dát a výrazne zrýchľuje prvé vykreslenie stránky. Prehliadače dnes podporujú natívny lazy loading cez atribút loading="lazy".

Kompresia

Kompresia je proces zmenšenia veľkosti dát pomocou kompresných algoritmov pred ich odoslaním z webového servera do prehliadača. Prehliadač prijaté dáta dekomprimuje a zobrazí. Na webe sa najčastejšie používajú algoritmy Gzip a Brotli, ktoré dokážu zmenšiť textové súbory o 60-90 %.

Caching

Caching je technika ukladania kópií dát alebo zdrojov na miesto, odkiaľ sa dajú rýchlejšie získať pri opakovanom prístupe. Na webe sa cachujú HTML stránky, obrázky, skripty a API odpovede na úrovni prehliadača, CDN alebo servera. Výrazne znižuje dobu načítania a zaťaženie servera.

Critical CSS

Critical CSS je technika extrakcie a inline vloženia CSS pravidiel potrebných na vykreslenie viditeľnej časti stránky (above the fold). Zvyšný CSS sa načíta asynchrónne. Eliminuje render-blocking CSS a výrazne zrýchľuje prvé vykreslenie stránky.

Späť na slovník

Potrebujete pomôcť s webom?

Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.

Napíšte miPozrite moju prácu