Podstatnú časť obsahu na webových stránkach tvoria obrázky. Mnohé z nich majú známe formáty, ako prevažne komprimované jpg, jpeg a potom nekomprimované png, menej sa vyskytuje gif.
webP formát obrázkov
WebP je stále menej známy formát s menšou podporou, napriek tomu patrí k moderným formátom obrázkov s perfektnou stratovou kompresiou. Pochádza z dielne Google. Pri porovnaní s JPG formátom využíva efektívnejšie algoritmy na kompresiu, čo ma v praxi za následok menšiu dátovú veľkosť súborov. Tvorcovia webu tak môžu pri jeho používaní ušetriť užívateľom doslova sekundy, čo sa prejavuje v konečnom dôsledku v rýchlosti webu, ako aj v lepšom umiestnení vo vyhľadávaní napríklad na Google, ktorý hodnotí okrem iných parametrov aj index rýchlosti načítania. Aj napriek jeho výhodám sa v súčasnej dobe používa málo, chýba mu podpora v bežných grafických editoroch.
Porovnanie formátov, kvality a dátovej veľkosti je pekne zdokumentované tu:
https://developers.google.com/speed/webp/gallery1
https://developers.google.com/speed/webp/gallery2
Prevod iných formátov do webP
Ak chceme previesť pár obrázkov do tohto formátu, môžeme využiť niektoré existujúce on-line služby, napríklad:
https://www.freeconvert.com/jpg-to-webp
Umožnia nám bezplatný prevod niekoľkých súborov a je to pomerne prácne. Ak by sme chceli hromadne previesť stovky obrázkov, tak by to bolo neefektívne.
Serverový hromadný prevod na webP pre web, alebo e-shop
Zoberme si modelovú situáciu, že máme napríklad e-shop, ktorý ma 5000 produktov a každý produkt ma 3 fotografie. Spolu to je 15 000 fotografií. Väčšinou sa takéto fotografie nachádzajú v logickej štruktúre a sú sústredené v nejakom primárnom priečinku na serveri, napríklad:
/obrazky-pre-eshop
/obrazky-pre-eshop/monitor/monitor.jpg
/obrazky-pre-eshop/monitor/monitor-1.jpg
/obrazky-pre-eshop/monitor/monitor-2.jpg
Ak chcem optimalizovať tieto obrázky a zároveň ponechať štruktúru, môžem použiť nasledovné riešenie vo forme PHP skriptu.
PHP skript sa umiestni do zvoleného adresára na serveri, nastavia sa v jeho konfigurácii správne cesty k adresáru, ktorý obsahuje všetky fotografie a následne sa nastaví cesta k druhému adresáru, kde sa budú ukladať webP obrázky. Skript rekurzívne prejde všetky podadresáre a vytvorí duplicitnú štruktúru s rovnakými názvami adresárov ale aj súborov, ktorú potom ľahko použijeme. Výstup v tomto prípade bude:
/obrazky-pre-eshop-webp
/obrazky-pre-eshop-webp/monitor/monitor.webp
/obrazky-pre-eshop-webp/monitor/monitor-1.webp
/obrazky-pre-eshop-webp/monitor/monitor-2.webp
Na našom e-shope nám potom stačí drobná úprava v názve adresára pri výpise produktov a môžeme okamžite používať nový webP formát.
Toto riešenie obsahuje ešte nasledovné prvky:
1: Kontrola existencie vytvoreného webP.
Ak už prevod do webP prešiel a takýto obrázok už existuje, nič sa nestane. Pri opakovanom spustení skriptu sa vygenerujú len chýbajúce obrázky. To umožňuje používať v tomto prípade vzorový e-shop rovnakým spôsobom ďalej (pridávať nové produkty s obrázkami) a systém ich automaticky môže priebežne transformovať.
2: Možnosť nastavenia výstupnej kvality webP
3: Podpora prevodu z formátov jpg, jpeg, png, prípadne aj gif
Pre fungovanie je v rámci PHP potrebné mať nainštalovanú GD library s podporou WebP.
Ak riešite podobný hromadný prevod obrázkov do webP formátu v rámci svojho webového projektu, pokojne mi napíšte.
Pridať komentár k článku