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

Pre rýchlosť webu je dôležité poznať správny postup na to ako optimalizovať obrázky. Všetko podstatné o zmenšení, kompresii a nových formátoch sa dozvieš v tomto článku.

Návod: Ako optimalizovať obrázky pre web až o 92% a zachovať kvalitu - Boris Belica Wordpress

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.

nástroj na testovanie rýchlosti načítavania webovej stránky od Google - Lighthouse - Boris Belica WordPress
Nástroj na laboratórne testovanie rýchlosti načítavania webovej stránky – Lighthouse implementovaný priamo v Google Chrome prehliadači.

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.

ako optimalizovať obrázky v pixeloch
porovnanie veľkosti obrázkov hd / full hd / 4k uhd

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

Správne nastavenie online nástroju ShortPixel pre optimalizáciu obrázkov pre na web.
Nastavenia optimalizácie obrázku v ShortPixel. Pre plný náhľad klikni sem.

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.

Aktuálne jeden z najmodernejších webových formát obrázkov pre webové stránky - AVIF.
logo AVIF formátu

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:

Nastavenia pre optimalizáciu obrázkov v plugine ShortPixel.
Pohľad do mojich nastavení pre optimalizáciu obrázkov v plugine 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:

Porovnanie a výsledky

ObrázokPôvodná veľkosť (kB)Po kompresii (lossy)WebPAVIFÚspora kB (%)
13094 kB115 kB98 kB109 kB-97%
24024 kB1006 kB170 kB232 kB-96%
32 447 kB452 kB82 kB71 kB-97%
46 423 kB933 kB83 kB118 kB-99%
54 571 kB861 kB112 kB154 kB-98%
63 309 kB388 kB37 kB39 kB-99%
73 364 kB841 kB54 kB72 kB-98%
81 986 kB660 kB29 kB27 kB-99%
91 758 kB389 kB49 kB36 kB-98%
104 089 kB159 kB13 kB6 kB-99%

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.

Porovnanie nástrojov kompresie

Nástroj (web)Pôvodná veľkosť (MB)Po kompresii (MB)Rozdiel v %
ShortPixel31,9 MB5,9 MB-78%
Compressor.io31,9 MB20,8 MB-35%
TinyJPG31,9 MB10,0 MB-69 %
iloveimg31,9 MB14,8 MB-54 %
Compressjpeg.com31,9 MB20,9 MB-34 %

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.

Získaj užitočné tipy pre lepšiu efektívnosť webovej stránky

Získaš odborné tipy týkajúce sa webového dizajnu, optimalizácie WordPress a najnovších trendov v oblasti tvorby webových stránok. Prihlás sa k odberu noviniek.

Newsletter