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

Ako optimalizovať obrázky pred nahratím na web? Väčšina mojich klientov, ktorí sa rozhodnú si čiastočne spravovať vytvorenú webovú stránku samostatne, sa na mňa obracia s otázkou optimalizácie obrázkov.

Zároveň je tento článok vhodný aj pre budúcich tvorcov webov, aby sa v krátkosti zoznámili s optimalizáciou obrázkov pre webové stránky, e-shopy a celkovo webové prehliadače. Povieme si:

• ako jednoducho zmenšiť rozmer viacerých fotografií naraz – v pixeloch
• ako optimalizovať obrázky pomocou kompresie,
• niečo o moderných formátoch obrázkov pre weby
• na záver si urobíme aj jednoduchý test a porovnáme si výsledky

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ú. To má za následok horšie hodnotenie webovej stránky, nakoľko Gooogle hodnotí kvalitu webu aj na základe týchto kritérií. Podľa toho vyhodnocuje ako vysoko vás môže zobraziť vo výsledkoch vyhľadávania.

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

Ako prvé si obrázok, ktorý chceme použiť na webovej stránke upravíme rozmerovo. Zmenšíme jeho veľkosť v pixeloch.

• Ak chceme radšej vyššiu kvalitu na úkor pomalšieho načítavania, zvolíme si maximálnu veľkosť obrázkov na 1920×1080 (šírka-výška) v prípade obrázku na výšku 1080×1920 – čo je Full HD rozlíšenie.
• Pokiaľ chceme viac zatlačiť na rýchlosť webu, zvolíme HD veľkosť 1280×720 pixelov alebo menej.

Aby sme však dosiahli optimálny stav obrázku, mali by sme si zistiť jeho najväčšiu veľkosť ktorou sa zobrazuje na webovej stránke, a upraviť jeho maximálne rozmery do tejto veľkosti.

V prípade, ak ide napríklad o ilustračný obrázok k sekcii, môže mať tento obrázok napr. maximálny rozmer 600px do šírky. Preto by z pohľadu optimalizácie nebolo vhodné jeho veľkosť upravovať do Full HD či HD rozlíšenia, keďže by sa do tejto veľkosti reálne nikdy nevykreslil.

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. Ideálna veľkosť obrázku v kb je samozrejme čo najmenšia, ale vo všeobecnosti platí, že obrázky do 100 kb sú v poriadku. Pre veľké úvodné obrázky sa odporúča maximálna veľkosť do 300 kb.

Ako tvorcovia webu by sme sa vždy mali snažiť dosiahnuť ideálny stav veľkosti obrázku -či už v pixeloch alebo v kilobajtoch. V tomto stave by každý typ zariadenia (napr. tablet / mobil) mal mať vlastnú (menšiu) veľkosť v px, ako napr. rovnaký obrázok pre veľké obrazovky a teda aspoň 3 verzie obrázka, ktorý sa zobrazí podľa zariadenia používateľa.

Obrázky si zmenšíme pomocou programu

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 si vieme automaticky po úprave označiť všetky fotky a vyexportovať ich v predom nastavenej veľkosti v pixeloch. Ak chcete využiť plugin pre WordPress použite napríklad Imsanity.

Photoscape je bezplatný a užitočný program, ktorý slúži na úpravu fotiek. Pomocou jeho funkcie „Dávkový editor“ si vieme do programu vložiť veľké množstvo obrázkov naraz. Po vložení obrázkov do panelu si v pravej časti nastavíme požadované veľkosti nových-zmenšených obrázkov. Nastavíme si šírku napr. na už spomínaných 1280px, a zároveň si nastavíme aj výšku na 1280px. V tomto prípade program nastavuje buď výšku alebo šírku podľa toho ako je obrázok orientovaný.

Po nastavení klikneme na konvertovať všetko. Otvorí sa nám okno, v ktorom si môžete urobiť dodatočné nastavenia. Kvalitu fotky neznižujte, na kompresiu obrázkov využijeme iný – lepší nástroj. Vo finále máte podľa prednastavených možností vytvorenú novú zložku s názvom output, kde už máte zmenšené obrázky.

Kompresia obrázkov pre web

Po tom, čo sme si upravili veľkosť obrázkov v pixeloch, je na rade kompresia obrázkov. Kompresia je úprava obrázku a zmenšenie jeho dátového priestoru a náročnosti. V jednoduchosti 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.

Nástroj Tinyjpg / TinyPng

Opäť existuje milión možností ako spraviť kompresiu. Osobne preferujem a odporúčam nástroj TinyJPG / TinyPNG. V kompresii je to absolútna špička, preto v teste využijeme tento nástroj. Zároveň ho využívam aj ja pri tvorbe webových stránok. Otvoríme si teda stránku TinyJPG a nahráme sem naše obrázky. Počkáme si kým sa vykoná kompresia a na konci si stiahneme balíček, v ktorom máme hotové fotky pripravené použiť na webe.

Maximálny povolený limit je 20 obrázkov na jednu kompresiu. Preto v prípade, ak potrebujete zmenšiť viac obrázkov, obnovte stránku a proces opakujte alebo si zakúpte PRO verziu.

Tinyjpg môžete nainštalovať aj ako plugin pre WordPress a optimalizovať obrázky priamo pri nahrávaní na web. Osobne sa však snažím obmedziť počet pluginov na počet „nevyhnutné“ preto je len na vás aký prístup si zvolíte. Výsledok však bude rovnaký.

Moderné formáty obrázkov – WebP alebo AVIF

Tak, už máme obrázky v správnej veľkosti, na obrázkoch je vykonaná kompresia, to je hádam všetko, či? 🙂 Ešte sme však neskončili. Obrázky vo formáte jpg. či .png nie sú tým najlepším riešením – existujú moderné formáty vytvorené a optimalizované pre webové prehliadače. Formát Webp. je najpoužívanejší a vyvinutý Googlom. Jeho podpora v prehliadačoch je podľa Can I use okolo 95%, preto považujem tento formát za absolútne bezpečný.

Pokiaľ ide o AVIF, tento formát je nástupcom webp a vo všeobecnosti má lepšiu kompresiu a lepšiu kvalitu ako všetky už známe „tradičné“ formáty. Jeho podpora je na úrovni 70%, čo sa možno javí ako nedostatočná, ale všetky aktuálne verzie webových prehliadačov ho podporujú (až na Microsoft Edge a Internet Explorer – tie sú však tradične o krok „popredu“).

Ako optimalizovať obrázky pre WordPress

Odporúčam používať plugin WebP Converter for Media, ktorý je už v bezplatnej verzii nadmieru užitočný. Ku všetkým obrázkom ktoré už máte na webe, vytvorí automaticky na pozadí webp. verziu.

Vo väčšine prípadov tak viete ušetriť ďalších pekných pár kilobajtov a zároveň zlepšiť už spomínané celkové hodnotenie vašej stránky Web vitals.

Obrázky vo formáte webp zobrazí prehliadač iba v tom prípade, ak ho podporuje. Ak nie, zobrazí mu obrázok v pôvodnom formáte.

V prípade že plugin zaznamená, že pôvodný obrázok pre ktorý sa snaží vytvoriť webp. kópiu má nižšiu veľkosť ako nový obrázok, plugin neurobí nič – preskočí ho a ponechá pôvodný obrázok. Zároveň si môžete nastaviť ako veľmi chcete zatlačiť na optimalizáciu, a znížiť kvalitu fotky z prednastavených 85 %.

Optimalizácia obrázkov – testovanie, výsledky a porovnanie

Podľa výsledkov v tabuľke vidíme, že v priemere sme dosiahli úsporu a optimalizáciu obrázkov. Veľkosť obrázkov sme znížili o -92%. Porovnávame pôvodný obrázok vo Full HD rozlíšení – oproti Full HD po kompresii a zmene formátu na webp.

Nový moderný obrázok vo formáte webp a vo full HD rozlíšení teraz zaberá iba približne 8% pôvodnej veľkosti. Treba podotknúť, že ide o Full hd rozlíšenie čo je vo veľkej väčšine nadštandardný až nepotrebný rozmer v pixeloch pre webové stránky. Na menších obrázkoch sa vieme dostať iba na pár desiatok kb, čo je oproti odporúčaným 100 kb super.

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

• Pôvodný obrázok / Full HD / bez kompresie – (1198 kb)
• Webp obrázok / Full HD – (80 kb)
• presvedčte sa sami, porovnajte si obrázky vyššie – rozdiel vo veľkosť v kilobajtoch je extrémny a rozdiel v kvalite takmer nulový

Porovnanie nástrojov na kompresiu, testovanie a výsledky

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 Full HD. Pôvodná veľkosť pred kompresiou bola spolu 17,4 megabajtov. Výsledky po kompresii sú v tabuľke.

Podľa výsledkov testu mi ako najlepší nástroj na kompresiu vychádza nástroj Compressor.io (lossy), ktorý mal celkovú úsporu -87% a dokonca o 2% lepšiu kompresiu ako vyššie spomínaný nástroj TinyJPG či napr. Shortpixel (lossy).

Jedná sa však o dosť ohraničený a malý test s minimálnym rozdielom a pre lepšiu predstavu a ucelenejšie výsledky by sme potrebovali rozsiahlejší testovanie. Preto môj názor nateraz ostáva nezmenení – stále považujem na kompresiu najlepší nástroj TinyJPG.

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

Na 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 všetky obrázky optimalizujem, rovnako ako aj celkovú rýchlosť stránky.

PS: V prípade, že sa vám tento článok páčil podporte ma prosím na mojej Facebookovej stránke kde sa snažím pridávať rôzne zaujímavé informácie.
Ďakujem.