V digitálnom svete sú obrázky neoddeliteľnou súčasťou webových stránok, e-shopov a online marketingu. Ich kvalita a veľkosť ovplyvňujú rýchlosť načítania stránky a samozrejme celkový užívateľský zážitok. WebP je moderný obrazový formát vyvinutý v roku 2010 spoločnosťou Google. Prináša efektívnejšiu kompresiu a vyššiu kvalitu oproti tradičným formátom ako JPEG a PNG. Tento článok vám poskytne komplexný pohľad na formát WebP , jeho vlastnosti, výhody, nevýhody a praktické využitie.

Čo je formát WebP?

V septembri 2010 spoločnosť Google odkúpila spoločnosť On2 Technologies , ktorá vyvinula koncept nového obrazového formátu určeného výhradne pre použitie na webstránkach. Tento formát mal využívať nové kompresné technológie na maximalizáciu úspory veľkosti súborov a zrýchlenie ich načítania. Od svojho uvedenia bol formát WebP neustále vylepšovaný a rozširovaný o ďalšie funkcie a flexibilitu. V októbri 2011 Google zlepšil formát WebP pridaním podpory pre animácie snímku po snímke, čo predtým umožňoval iba formát GIF.

Formát WebP využíva pokročilé kompresné algoritmy založené na technológii VP8 (video kodek) a RIFF (Resource Interchange File Format). Tento spôsob ukladania umožňuje efektívne zníženie veľkosti obrázka pri zachovaní jeho vizuálnej kvality. Vďaka svojim vlastnostiam formát WebP predstavuje efektívnejšiu alternatívu k tradičným formátom JPEG, PNG či GIF.

Okrem toho podporuje priehľadnosť podobne ako PNG a umožňuje animácie efektívnejšie ako GIF. Formát WebP taktiež poskytuje stratovú aj bezstratovú kompresiu, čo z neho robí flexibilný formát vhodný pre rôzne typy obrázkov. Keďže WebP patrí medzi rastrové formáty, obrázky sú v ňom tvorené mriežkou pixelov. Na rozdiel od vektorovej grafiky, ktorá je založená na matematických krivkách, sa rastrové obrázky pri zväčšení môžu rozmazávať. Preto je dôležité vyberať správny formát podľa účelu použitia. Ak sa chcete dozvedieť viac o rozdiele medzi rastrovou a vektorovou grafikou, odporúčame vám prečítať si náš článok na tému rastrová a vektorová grafika.

Využitie súborov WebP

Formát WebP nachádza široké využitie na internete, najmä v oblastiach, kde je dôležitá optimalizácia rýchlosti načítania a zníženie veľkosti súborov. Vďaka svojim pokročilým kompresným technológiám je ideálny pre webové stránky, e-shopy, sociálne siete či mobilné aplikácie. WebP umožňuje zachovať vysokú kvalitu obrazu pri výrazne menšej veľkosti súboru, čo znižuje spotrebu dát a zlepšuje používateľský zážitok.

Obrázok porovnanie veľkosti a kvality formátov JPEG a WebP

WebP podporuje 2 hlavné typy kompresie , ktoré ho robia flexibilným riešením pre rôzne druhy obsahu. Stratová kompresia (Lossy WebP) využíva predikčné kódovanie, pri ktorom sa hodnoty pixelov odhadujú na základe okolitých pixelov. Vďaka tomu je výsledný súbor až o 30 % menší ako JPEG pri rovnakej kvalite. Tento spôsob je ideálny pre fotografie a vizuálne bohaté obrázky, kde je dôležité zachovať estetický vzhľad, no zároveň minimalizovať veľkosť súboru.

Obrázok porovnanie veľkosti a kvality formátov PNG, WebP-lossles a WebP-lossy

Bezstratová kompresia (Lossless WebP) naopak zachováva 100 % kvality pôvodného obrázka a pritom dosahuje až o 26 % menšiu veľkosť súboru oproti PNG. Tento typ kompresie je vhodný pre logá, ikony a grafické prvky, ktoré musia mať ostré hrany a plnú farebnú hĺbku. Výhodou je aj podpora priehľadnosti, ktorá je pri bezstratovej kompresii zachovaná bez akéhokoľvek vizuálneho zhoršenia.

Na obrázku vidíte porovnanie veľkosti originálu a optimalizovanej verzie obrázka. V červenom rámčeku je možné vidieť úsporu. V tomto prípade bolo ušetrených 94,92% a konečná veľkosť obrázka predstavuje 9,56 KB.

Home page VITA Academy má 110 obrázkov. Takže ak by priemerná veľkosť 1 PNG obrázku bola 200 KB tak celková veľkosť všetkých obrázkov by bola cca 22 MB pri priemernej 32 % kompresii WebP bude výsledná veľkosť všetkých obrázkov 14,9 MB a pri 82 % kompresií 3,9 MB.

Okrem statických obrázkov WebP podporuje aj animované súbory , čím efektívne nahrádza GIF. Animovaný WebP dokáže znížiť veľkosť súboru až o 35 – 40 % v porovnaní s GIF-om pri rovnakej kvalite a zároveň ponúka plynulejšie animácie. Táto vlastnosť je obzvlášť užitočná pre webové bannery, interaktívne prvky či animované grafiky na sociálnych sieťach.

Pri práci s formátom WebP je však dôležité zohľadniť jeho maximálnu podporovanú veľkosť obrázka , ktorá je 16 383 × 16 383 pixelov . Toto obmedzenie treba brať do úvahy najmä pri práci s veľkými grafickými prvkami, ako sú detailné mapy alebo full-screen pozadia na webových stránkach.

Pokiaľ ide o podporu WebP v prehliadačoch , dnes ho už akceptuje väčšina moderných prehliadačov, vrátane Google Chrome (od verzie 17), Firefox (od verzie 65), Edge (od verzie 18), Opera (od verzie 11.10) a Safari (od verzie 14) . Staršie verzie Safari a Internet Explorer (tieto verzie sa však už prakticky nepoužívajú) WebP nepodporujú, preto je v takýchto prípadoch potrebné zabezpečiť alternatívne formáty (napr. JPEG alebo PNG) pomocou HTML značky <picture> alebo fallback metód.

Vďaka svojej schopnosti efektívne znižovať veľkosť súborov, zachovať vysokú kvalitu a podporovať animácie sa WebP stáva nevyhnutným nástrojom pre moderný web . Používanie tohto formátu pomáha zrýchliť načítanie stránok, zlepšiť SEO a vytvoriť lepší používateľský zážitok.

Google Lighthouse

Google Lighthouse je automatizovaný nástroj s otvoreným zdrojom na meranie kvality webových stránok. Sleduje 5 oblastí a to:

1. Performance (výkon)
2. Progressive Web App (PWA)
3. Best Practises (súhrn všeobecných odporúčaní pre vylepšenie a modernizáciu webu)
4. Accessibility (prístupnosť)
5. SEO

Výhody a nevýhody formátu WebP

Napriek mnohým výhodám má WebP aj svoje obmedzenia, ktoré môžu ovplyvniť jeho použitie v určitých situáciách. Medzi ne patrí kompatibilita so staršími prehliadačmi, vyššia náročnosť na procesor pri spracovaní súborov a obmedzená maximálna veľkosť obrázkov.

Výhody formátu WebP ✅

1. Menšia veľkosť súboru
2. Podpora priehľadnosti (alpha kanál)
3. Podpora animácií
4. Podpora stratovej aj bezstratovej kompresie
5. Lepšia kvalita pri rovnakej veľkosti súboru
6. Podpora vo väčšine moderných prehliadačov

Nevýhody formátu WebP ❌

1. Nie všetky staršie prehliadače ho podporujú
2. Niektoré grafické programy WebP natívne nepodporujú
3. Obmedzená maximálna veľkosť obrázka

Tabuľka-Porovnanie kvality jednotlivých formátov 

Ako vytvoriť a upraviť formát WebP?

Na vytvorenie WebP obrázku môžete použiť rôzne softvérové nástroje a programovacie knižnice. Najčastejšie sa WebP generuje konverziou z iného formátu, ako je JPEG, PNG alebo GIF. Tento proces môže prebiehať manuálne v grafickom editore alebo automaticky pomocou programovacieho skriptu.

Nástroje na vytváranie a úpravu WebP

Medzi najčastejšie používané nástroje na prácu s WebP patrí Adobe Photoshop (s pluginom WebPShop), GIMP (s natívnou podporou WebP), WordPress (s pomocou pluginov) a Python (knižnica Pillow). Každý z týchto nástrojov ponúka rôzne možnosti, ktoré vám umožnia efektívne pracovať s týmto formátom. V nasledujúcich častiach si podrobne predstavíme jednotlivé metódy vytvárania a úpravy WebP obrázkov.

Adobe Photoshop

Adobe Photoshop síce natívne nepodporuje formát WebP, no túto funkciu je možné jednoducho pridať pomocou bezplatného pluginu WebPShop . Tento plugin umožňuje importovať aj exportovať WebP obrázky priamo v prostredí Photoshopu, čím rozširuje jeho funkcionalitu o podporu tohto moderného formátu.

Ak chcete pracovať s WebP v programe Adobe Photoshop, najprv si musíte stiahnuť a nainštalovať WebPShop plugin . Po jeho inštalácii môžete jednoducho otvoriť akýkoľvek obrázok v Adobe Photoshop, následne kliknúť na Súbor → Uložiť ako a vybrať formát WebP. Pred uložením môžete nastaviť rôzne parametre kvality, ako je úroveň kompresie, podpora priehľadnosti alebo optimalizácia veľkosti súboru.

Ak sa chcete naučiť základy programu Adobe Photoshop , prípadne ho zvládate a chcete sa zlepšiť, odporúčame vám naše kurzy Online kurz Adobe Photoshop IV. Web Designer , Online kurz Adobe Photoshop I. Začiatočník alebo Online kurz Adobe Photoshop II. Mierne Pokročilý .

GIMP

GIMP je bezplatný open-source grafický editor, ktorý natívne podporuje formát WebP . Tento editor je skvelou alternatívou k plateným programom a ponúka široké možnosti úprav obrázkov vrátane konverzie do formátu WebP. Ak chcete exportovať obrázok do WebP v programe GIMP , stačí otvoriť obrázok, kliknúť na Súbor → Exportovať ako, vybrať formát WebP a nastaviť požadované parametre kvality. Po potvrdení nastavení kliknite na Exportovať a obrázok bude uložený v optimalizovanom WebP formáte.

V prípade, že sa chcete naučiť pracovať s programom GIMP , odporúčame vám náš Online Kurz GIMP I. Začiatočník.

WordPress

Pre využívanie formátu WebP vo WordPress -e je v prípade konverzie nutná inštalácia pluginov, ktoré automaticky prevádzajú JPEG a PNG do WebP. Od verzie WordPress 6.7 (lossless) je však upload WebP natívne podporovaný, čo znamená, že už nie je potrebné manuálne konvertovať obrázky pred ich nahraním na web. Táto optimalizácia pomáha zrýchliť načítanie webu, zlepšiť SEO hodnotenie a znížiť spotrebu dát pri načítaní stránok. Medzi najlepšie pluginy na konverziu a optimalizáciu WebP patria WebP Express, EWWW Image Optimizer a Smush.

Okrem nich odporúčame aj TinyPNG, ktorý poskytuje vysokokvalitnú kompresiu obrázkov a zároveň zachováva ich vizuálnu kvalitu. Výbornou kombináciou je aj WP Rocket + Imagify, ktoré spolu ponúkajú komplexnú optimalizáciu obrázkov a zrýchlenie WordPress webu. Túto kombináciu priamo používame aj na našej webstránke vita.sk.

Efektívne vytvárať a spravovať WordPress stránky sa naučíte z našich online kurzov WordPress .

Python

Formát WebP môžete vytvoriť aj programovo pomocou jazyka Python a knižnice Pillow . Tento spôsob je ideálny pre vývojárov, ktorí chcú WebP obrázky generovať automaticky v aplikáciách. Vďaka jednoduchému skriptu môžete ľahko konvertovať obrázky z formátov, ako sú JPEG alebo PNG, do WebP a optimalizovať ich pre rýchlejšie načítanie na webe.

Ak chcete previesť obrázok do WebP pomocou Pillow, stačí použiť nasledujúci kód:

from PIL import Image

# Otvorenie obrázka

img = Image.open("input.jpg")

# Uloženie ako WebP

img.save("output.webp", "WEBP")

Tento skript automaticky načíta obrázok vo formáte JPEG alebo PNG a uloží ho ako formát WebP. Ak sa chcete naučiť pracovať s jazykom Python, odporúčame vám naše online kurzy Python . Vybrať si môžete zo širokej ponuky, presne podľa vašich znalostí.

Ako otvoriť formát WebP?

Formát WebP je dnes široko podporovaný a dá sa otvoriť v moderných prehliadačoch, grafických editoroch aj v predvolených aplikáciách operačných systémov. Najjednoduchší spôsob, ako si WebP obrázok prezrieť, je pomocou webového prehliadača, ako sú Google Chrome, Mozilla Firefox, Microsoft Edge alebo Safari (od verzie 14).

V operačných systémoch Windows a macOS je možné formát WebP otvoriť aj v predvolených aplikáciách, ako sú Windows Photos (vo Windows 10 a novších) a Preview (macOS). Ak však používate staršiu verziu systému, môže byť potrebné stiahnuť si doplnkový softvér, napríklad IrfanView, XnView alebo FastStone Image Viewer.

Pre používateľov, ktorí potrebujú obrázky vo formáte WebP upravovať, je k dispozícii podpora v rôznych grafických editoroch. GIMP má WebP podporu natívne, zatiaľ čo v Adobe Photoshop je potrebné nainštalovať bezplatný plugin WebPShop . Okrem týchto programov formát WebP podporujú aj Affinity Photo, Paint.NET či Krita .

V prípade, že obrázok vo formáte WebP potrebujete konvertovať na iný formát, môžete využiť online konvertory, ako napríklad webptojpg.com na prevod do JPG alebo webptopng.com na prevod do PNG. Alternatívne môžete použiť GIMP alebo Adobe Photoshop. Používateľom, ktorí pracujú s väčším množstvom obrázkov, môže pomôcť konverzia cez príkazový riadok. Na systémoch Linux a macOS môžete použiť príkaz dwebp , ktorý umožní prevod WebP do iného formátu:

dwebp input.webp -o output.png

Celkovo je formát WebP kompatibilný s väčšinou moderných aplikácií a prehliadačov, no ak narazíte na problém s kompatibilitou, môžete ho jednoducho previesť na PNG alebo JPG.

Záver a odporúčania k formátu WebP

Formát WebP predstavuje moderné riešenie pre optimalizáciu obrázkov na internete. Vďaka svojej menšej veľkosti súboru pri zachovaní vysokej kvality je ideálnou voľbou pre webové stránky, e-shopy, sociálne siete aj mobilné aplikácie. Formát WebP ponúka stratovú aj bezstratovú kompresiu, podporuje priehľadnosť ako PNG a animácie ako GIF. Aj keď formát WebP prináša množstvo výhod, má aj svoje obmedzenia, ako je nekompatibilita so staršími prehliadačmi alebo potreba doplnkových pluginov v niektorých grafických programoch. Vzhľadom na rastúcu podporu formátu WebP v prehliadačoch a grafických nástrojoch je tento formát budúcnosťou webovej grafiky.

Objavte online kurzy na Grafiku, Dizajn a Multimédia

Použité zdroje a literatúra WebP

Online zdroje:

1. https://white64.com/articles/the-rise-of-webp/
2. https://www.adobe.com/sk/creativecloud/file-types/image/raster/webp-file.html
3. https://touchit.sk/konverzia-webp-addon/646187
4. https://web.dev/articles/serve-images-webp
5. https://www.hostinger.com/tutorials/what-is-webp
6. https://99designs.com/blog/tips/webp-image-format/
7. https://blog.hubspot.com/website/what-is-webp
8. https://cloudinary.com/guides/front-end-development/webp-format-technology-pros-cons-and-alternatives
9. https://www.siteground.com/kb/what-is-webp/
10. https://dev.to/abbeyperini/what-is-webp-2pob
11. https://www.hjp.at/doc/rfc/rfc9649.pdf

Odborné články:

1. Google to unify the Internet image format? (2014). China Education Network, 08, 80.
2. Ilya, G. (2013). Faster, smaller and more beautiful web with WebP. Retrieved from http://www.tuicool.com/articles/goto?id=FFZ73y.
3. Si, Z., Shen, K. (2016). Research on the WebP Image Format. In: Ouyang, Y., Xu, M., Yang, L., Ouyang, Y. (eds) Advanced Graphic Communications, Packaging Technology and Materials. Lecture Notes in Electrical Engineering, vol. 369. Springer, Singapore. https://doi.org/10.1007/978-981-10-0072-0_35.
4. Matijević, M. & Mikota, M. & Čačić, M.. (2016). Impact of JPEG-WebP conversion on the characteristics of the photographic image. Tehnicki vjesnik – Technical Gazette. 23. 505-509. 10.17559/TV-20141208110946.  https://pdfs.semanticscholar.org/a570/0d5c67eefd5418f9a1a16bcbf90795877408.pdf.
5. Zern, J., Massimino, P., & Alakuijala, J. RFC 9649 WebP Image Format. Animation, 2024, 2: 1.2.ISSN 2070-1721, https://www.hjp.at/doc/rfc/rfc9649.pdf
6. Mishra, J., Kumar, V. (2024). Study of Digital Image Compression Techniques and Framework for Suitability Selection based on Similarity Measuring Metrics. In 2024 15th International Conference on Computing Communication and Networking Technologies (ICCCNT) (pp. 1–6). IEEE.
7. Martinez, G. A. S., Moralde, R. E. B., Linsangan, N. B., Ang, R. M. L. (2023). A Comparative Analysis Between the Performance of the Extracted Features of JPEG and PNG on a Raspberry Pi Iris Recognition System. In TENCON 2023 – 2023 IEEE Region 10 Conference (TENCON) (pp. 811–816). IEEE.
8. Mandeel, T. H., Ahmad, M. I., Khalid, N. A. A., Isa, M. N. M. (2021). A Comparative Study on Lossless compression mode in WebP, Better Portable Graphics (BPG), and JPEG XL Image Compression Algorithms. In 2021 8th International Conference on Computer and Communication Engineering (ICCCE) (pp. 17–22). IEEE.
9. Hu, J., Song, S., Gong, Y. (2017). Comparative performance analysis of web image compression. In 2017 10th International Congress on Image and Signal Processing, BioMedical Engineering and Informatics (CISP-BMEI). IEEE. https://doi.org/10.1109/CISP-BMEI.2017.8301939.
10. Li, B., Shi, J., Li, W., Li, H. (2024). WebP-JPEG Transcoding Detection by Spotting Re-Compression Artifacts With CNN-ViT for Processing Dual-Domain Features. IEEE Transactions on Circuits and Systems for Video Technology, 34(12), 12535–12549. https://doi.org/10.1109/TCSVT.2024.3431669.
11. Jakopec, T., Hrkač, Ž. (2021). Use of Image File Format WebP on Websites in Croatian top Domains. In 2021 44th International Convention on Information, Communication and Electronic Technology (MIPRO) (pp. 464–469). IEEE. https://doi.org/10.23919/MIPRO52101.2021.9596819.