AVIG je nový efektívny formát obrázkov, ktorý podporujú všetky moderné prehliadače od roku 2024. Narozdiel od WebP, ktorý je 10 rokov starý, má lepšiu hranu a zachováva ostré hrany na obrázkoch. Oproti WebP má v testoch optimalizáciu veľkosti cez 10% a oproti JPEG okolo 50%. Preto si v tomto návode ukážeme, ako optimalizovať obrázky vo CMS WordPress, pri „menších“ stránkach úplne zadarmo.
Porovnanie
Porovnanie veľkosti obrázkov vo starých formátoch (jpeg, png) a nových ako AVIF môžeme využiť stránku https://squoosh.app/editor. Stránka je určená primárne na kompresiu ale má aj skvele funkcie pre porovnanie. Môžeme si okrem formátu AVIF vybrať aj Wepb, JPEG XL alebo iné ďalšie.
Výber vhodného pluginu
V repozitáry pluginov máme veľký výber, avšak my využijeme Imagify. Samozrejme, že je ešte aj vela super iných pluginov, avšak tento sa mi osvedčil a ešte má aj zadarmo verziu, ktorá vystačí pre menšie weby.
Plugin si nainštalujeme a aktivujeme. Následne sa zaregistrujeme pre plán zdarma na https://app.imagify.io/, overíme si e-mailovú adresu a skopírujeme API kľuč. Následne ho vložíme na hlavnej stránke v kroku 2.
Plugin Imagify
Zdarma verzia obsahuje 20 MB optimalizovaných obrázkov zdarma, pričom jeden obrázok môže mať maximálne 2 MB. 20 MB pre prezentačný web alebo blog úplne stačí, hromadnú konverziu nemusíme robiť naraz. Taktiež má platené verzie za 6 USD a 10 USD mesačne. Cenník nájdete tu.
Konfigurácia pluginu
Po vložení API kľúču nastavíme dve základne veci podla obrázku.
- Výber formátu optimalizácie – AVIF
- Zobrazenie obrázkov – odporúčam (funguje len pri použití Apache alebo LiteSpeed servera)
Optimalizácia obrázkov pri nahratí
V nastaveniach si zaškrtneme políčko Auto-Optimize images on upload. Následne by sa nám mal každý obrázok pri nahratí automatický optimalizovať. Taktiež odporúčam nechať originálne obrázky a nepoužívať bezstratovú kompresiu (pokiaľ nie ste náročný, napr. fotograf). Následne môžeme nahrať nový obrázok.
Optimalizácia všetkých obrázkov.
V hornej lište rozbalíme políčko Imagify a klikneme na Bulk Optmimalization. Následne stlačíme modré tlačidlo dole. Stránku necháme otvorenú počas optimalizácie obrázkov.
Optimalizácia jednotlivých obrázkov
Taktiež môžeme optimalizovať jednotlivé obrázky v knižnici multimédií. Otvoríme listové zobrazenie a možnosti optimalizácie môžeme vidieť vpravo.
Testovanie
Následne si otestujeme funkčnosť obrázkov. Najskôr preventívne vymažeme cache, ak používame cachovací plugin. Následne otvoríme stránku v prehliadači, otvoríme Dev Tools (kliknutím pravým tlačidlom myší, riadok preskúmať). Prepneme na záložku Network a refreshneme stránku. Následne by sme mali vidieť typ súboru v treťom stĺpci avif. Koncovku pri názve súboru ignorujeme.
Ak dostávate AVIF obrázky, gratulujem. Máte plugin správne nastavený.