Návod: Ako optimalizovať obrázky pre web až o 98% a zachovať kvalitu

Ako teda postupovať a ako optimalizovať obrázky pre web? Dodrž tieto kroky:

1. Ako prvé si obrázok uprav rozmerovo – zmenši jeho veľkosť v pixeloch.
2. Pre obrázkov vykonaj kompresiu dát a zníž jeho dátovú veľkosť v KB.
3. Vygeneruj pre obrázk nový formát – WebP alebo AVIF.

Ako vykonať každý z týchto krokov? Čítaj ďalej. Vysvetlíme si každý krok a na záver článku vykonáme aj testovanie a porovnanie výsledkov.

Prečo je dôležité obrázky pre web optimalizovať

Rýchlosť načítavania webovej stránky je jedna z kľúčových vlastností webovej stránky. V prípade, že sa váš web načíta pomaly, vašim návštevníkom sa to nemusí páčiť a web opúšťajú.

Pre mobilných používateľov je rýchlosť ešte dôležitejšia. Google uvádza, že 53% mobilných používateľov opustí stránku, ak sa načítava viac ako tri sekundy​. zdroj: Think with Google

To má za následok horšie hodnotenie webovej stránky , keďže Google hodnotí kvalitu webovej stránky aj na základe rýchlosti načítania. Podľa toho vyhodnocuje ako vysoko vás môže zobraziť vo výsledkoch vyhľadávania.

Rýchlosť webovej stránky je len jedným z parametrov, ktoré Google pri pozícii vyhodnocuje. Je veľmi dôležitá a je potrebné ju riešiť pri všetkých weboch.

Aké sú ideálne rozmery a veľkosť obrázkov pre web v pixeloch

1. Bannerové, úvodné hero obrázky a pozadia:
   • Rozmery: ideálny rozmer 1920 x 1080 pixelov alebo maximálny 2560 x 1440 pixelov (pre vyššie rozlíšenie).
   • Veľkosť súboru: Ideálne okolo 200-300 KB. Maximálne 500 KB.
2. Obrázky v obsahu a článkoch:
   • Rozmery: 1366 x 768 pixelov alebo 800 x 600 pixelov.
   • Veľkosť súboru: Optimalizovaná na veľkosť približne 100 KB.
3. Miniatúry:
   • Rozmery: 150 x 150 pixelov alebo 300 x 300 pixelov.
   • Veľkosť súboru: menej ako 50 KB.
4. Obrázky produktov (e-commerce):
   • Rozmery: 800 x 800 pixelov alebo 1000 x 1000 pixelov.
   • Veľkosť súboru: Optimalizovaná na menej ako 200 KB.

Osobne na webové stránky nahrávam obrázky v maximálnom rozlíšení full HD. I keď 4K monitory sú už pomerne rozšírené, stále majú najväčšie zastúpenie na trhu práve full HD obrazovky a menšie notebookové rozlíšenia.

Samotným zmenšením obrázku častokrát nedostiahme požadovanú veľkosť v KB. Preto je nutné obrázky ešte ďalej optimalizovať a znížiť ich dátovú veľkosť a to vykonaným kompresie.

Aká je absolútne ideálne veľkosť obrázku

Ideálna veľkosť obrázku na webe je presne taká v akej sa aj zobrazuje na webovej stránke. Je to trošku piplačka a vyžaduje si to zručnosti. Prejdi celú webovú stránku, cez developerskú konzolu (F12) a presne si zisti veľkosť  daného obrázku v akej sa na webe vykresľuje a následne ho do takej veľkosti zmenši.

Ja ako tvorca webu sa vždy snažím dosiahnuť ideálnu veľkosť obrázku – v jeho pixelovej ale aj dátovej veľkosti.

V ideálnom stave by však mal mať každý obrázok minimálne dve verzie. Jedna veľkosť pre počítače a druhá pre mobilné zariadenia.

Týmto spôsobom vieme ušetriť ďalšie kilobajty a desatiny sekúnd pri načítavaní stránky, čo nám v konečnom dôsledku zlepšuje výsledné hodnotenie našej stránky tzv. Web vitals z pohľadu Googlu.

Krok 1: Programy a plugin na zmenšenie veľkosti obrázkov v pixeloch

Existuje milión spôsobov ako zmenšiť veľkosť obrázku, ja na počítači využívam napríklad Adobe Lightroom alebo bezplatný program Photoscape.

V Adobe Lightroom/Photoscape si vieme automaticky po úprave označiť všetky fotky a vyexportovať ich v predom nastavenej veľkosti v pixeloch.

V skutočnosti však nepotrebuješ inštalovať žiadny program – na optimalizáciu môžeš využiť online nástroj ShortPixel.

Nastavenia optimalizácie v ShortPixel

Prejdime do online nástroja pre optimalizáciu obrázkov – ShorPixel.

Kliknime na „settings“ vpravo hore a otvoríme si možnosť pre pokročilé nastavenia optimalizácie.

Bod 1: Nastavíme maximálne rozlíšenie obrázkov v pixeloch.

Krok 2: Vykonaj kompresiu – ako vykonať kompresiu obrázkov pre web

Bod 2: Vyberieme si úroveň optimalizácie resp. „silu“ optimalizácie.

1. Lossy je ide ideálne riešenie pre všetky štandardné weby kde je dôležitá rýchlosť. Výsledná optimalizácia je pre ľudské oko takmer na nepoznanie.
2. Glossy a Lossles je v podstate pixel-perfect riešenie. Vhodné pre weby kde je dôležitá vysoká kvalita fotky za cenu nižšej úspory dáta.

Kompresia je úprava obrázku a zmenšenie jeho dátového priestoru a náročnosti. Jednoducho povedané – vymažú sa niektoré „nepotrebné“ pixely. Na výslednú kvalitu obrázku to má minimálny vplyv. Odmenou nám však bude vo väčšine prípadov až o 90% menšia veľkosť v kb oproti pôvodnému obrázku.

Bod 3: Odstránime z fotografie EXIF dáta (metadáta uložené vo fotografiách, ktoré obsahujú podrobné informácie o fotke)

Bod 4: Konvertujeme CMYK na RGB (webové prehliadače zobrazujú farby pomocou RGB farebného modelu, CMYK je určený pre tlač

Krok 3: Konverzia obrázkov do moderných formátov WebP alebo AVIF

Bod 5: Povolíme generáciu WebP a AVIF

Obrázky vo formáte jpg. či .png už v dnešnej dobe nie sú ideálny riešeným pre webové stránky.

V roku 2024 tu máme existenciu modernejších formátov. Formáty vytvorené a optimalizované práve pre webové prehliadače.

Formát WebP. je najpoužívanejší a absolútne bezpečný.

Vyvinula ho spoločnosť Google. Jeho podpora v prehliadačoch je podľa Can I use viac ako 96,79 %. Určite obrázky optimalizujte minimálne do formátu WebP. Na internete je plno voľne dostupných nástrojov. Aj tu môžeš použiť ShortPixel.

Najmodernejší formát webových obrázkov – AVIF.

Pokiaľ ide o AVIF, tento formát je nástupcom už spomínaného WebP formátu. Vo všeobecnosti má ešte lepšiu kompresiu a lepšiu kvalitu ako všetky už známe „tradičné“ formáty.

Jeho podpora je podľa CanIUse na úrovni 93%. Aktuálne ho podporujú všetky moderné prehliadače, s výnimkou Internet Exploreru, ktorý aj tak nikto nepoužíva. Jeho použitie však zváž alebo použi plugin.

Ako optimalizovať obrázky pre WordPress pomocou pluginu

Pre WordPress weby odporúčam stiahnuť a použiť plugin od ShortPixel. Tento plugin je už v bezplatnej verzii veľmi užitočný.

Zadarmo získate automatické zmenšenie veľkosti obrázku v pixeloch a tiež urobí automatický kompresiu.

Ku všetkým obrázkom automaticky vygeneruje aj WebP verziu obrázka.

Obrázky vo formáte WebP či AVIF zobrazí internetový prehliadač iba v tom prípade, ak ho podporuje. Ak nie, zobrazí mu obrázok v pôvodnom formáte jpg či png. Je to úplne bezpečné.

Nástroj pre optimalizáciu obrázkov – ShortPixel využívam aj pri tvorbe webových stránok pre WordPress. Platená verzia pluginu pre WordPress dokáže automaticky zmenšiť veľkosť obrázku v pixeloch pri uploade, následne sa vykoná kompresia a generácia WebP či AVIF formátov.

Čo ak má pôvodný obrázok menšiu veľkosť ako webp či avif?

Aj to sa občas stáva. Ak plugin zaznamená, že pôvodný obrázok pre ktorý sa snaží vytvoriť webp/avif. kópiu má nižšiu veľkosť ako nový obrázok, plugin neurobí nič – preskočí ho a ponechá pôvodný obrázok.

Tu sú moje nastavenia pluginu ShortPixel:

Tabuľka: Optimalizácia obrázkov – porovnanie jpg,WebP a AVIF

Testovanie prebehlo na 10 náhodných obrázkoch, ktoré som stiahol z webu Unsplash. Sú to vysokokvalitné obrázky v 4K rozlíšení a viac. 5 obrázkov je orientovaných na šírku a 5 na výšku.

Pre optimalizáciu som zvolil automatickú úpravu veľkosti obrázku do full HD rozlíšenia, kompresiu a generáciu WebP a AVIF. Z obrázkov boli tiež odstránené exif dáta. Rovnaké nastavenia ako sú v článku na obrázku vyššie.

Tu sú výsledky testovania:

Výsledky. Čo sme zistili testovaním:

• Priemerne sme znížili veľkosť obrázku až o 98%
• Iba čistou kompresiou bez zmeny formátu na web/avif sme znížili veľkosť obrázku až o 92%
• Pozor, nie vždy je AVIF formát menší ako WebP, preto je vhodné mať na webe oba formáty a nechať rozhodnúť prehliadač, ktorý zobrazí
• Priemerne zaberá full HD obrázok iba 85 kB, čo je veľmi solídne a návštevník a aj Google to ocení
• Pri nastavení ešte menšieho rozlíšenia ako je full HD sa vieme dostať na veľkosť pár desiatok kb, čo je odporúčaná veľkosť.

Pre vlastné porovnanie si môžete pozrieť aj výslednú kvalitu obrázkov:

Obrázok 1: jpg originál (3MB) / WebP verzia (189 kb) / AVIF verzia (135 kB)

Obrázok 8: jpg originál (2MB) /WebP verzia (113 kB) / AVIF verzia (77 kB)

Presvedčte sa sami, otvorte si odkazy vyššie.

• • Rozdiel vo veľkosti obrázkov v kilobajtoch je extrémny (až 20 násobný)
  • Rozdiel v kvalite je voľne viditeľný iba na 4K monitoroch,
  • Na menších monitoroch je kvalita takmer rovnaká
  • Kvalita je pre webové stránky plne postačujúca
  • Ak by sa vám výsledná kvalita zdala nepostačujúca, vždy si môžete zvoliť vyššie rozlíšenie alebo iný režim kompresie – glossy či lossless.

Zaujímavé je aj porovnanie čisto WebP a AVIF verzií obrázkov. Vidíme, že síce WebP môže mať o málo menšiu veľkosť, ale už na pohľad je jeho kvalita horšia ako je to pri AVIF formáte. WebP obrázok pôsobí o niečo rozmazanejšie.

Porovnanie nástrojov na kompresiu obrázkov

Na základe pár podnetov som sa rozhodol doplniť a vykonať ešte jeden menší test a porovnať jednotlivé nástroje, ktoré je možno využiť na kompresiu.

V teste bolo použitých 10 rovnakých jpg obrázkov v originálnej veľkosti. Pôvodná veľkosť pred kompresiou bola spolu 31,90 MB.

Na základe výsledkov testovania mi ako najlepší nástroj na kompresiu vychádza opäť ShortPixel, ktorý mal celkovú úsporu -78%.

Ide však o dosť ohraničený a malý test. Pre lepšiu predstavu a ucelenejšie výsledky by sme potrebovali rozsiahlejšie testovanie.

Preto porovnanie nástrojov uzavriem takto:

Nech už si vyberiete alebo využívate akýkoľvek nástroj na kompresiu obrázkov – robíte dobre.

Zhrnutie a záver

Týmto relatívne jednoduchým postupom optimalizácie obrázkov získame zlatého bludišťáka aj od Googlu – za správnu optimalizáciu obrázkov.

Ďalšou odmenou bude rýchlejšie načítavanie webovej stránky, čo ide ruka v ruke so spokojnosťou návštevníka vašej webovej stránky.

Pri tvorbe webových stránok na mieru všetky obrázky automaticky optimalizujem, rovnako ako aj celkovú rýchlosť stránky. Využívam platenú verziu pluignu ShortPixel a poskytujem aj API kľúč, ak by si mal záujem.

Všetky originálne aj komprimované obrázky použité v teste si môžete stiahnuť tu.

PS: K obrázkom nezabudni pridať aj ALT (alternatívny) text pre lepšie SEO výsledky.