Monitorujeme 1685 zdrojov
Vzhůru dolů 21.09.2024 14:45 WebP je formát bitmapových obrázků, který se v posledních letech stal na webu velmi populárním.
WebP představil Google už v roce 2010. Dnes už je formát podporovaný prakticky všemi prohlížeči a operačními systémy. Podpora v obrázkových editorech je různorodá.
Související
Obrázkové formáty pro web
Formát AVIF
Značka PICTURE
Responzivní obrázky
Pojďme si projít hlavní přínosy WebP:
možnost výrazného snížení datového objemu v porovnání s JPEG i PNG
alfa průhlednost, kterou dosud nabízel jen formát PNG
podpora animací, kterou umí jen dědeček GIF
WebP naopak oproti JPEG neumí například subsampling chroma kanálu a progresivní vykreslování .
WebP je také prý pomalejší pro dekódování a více zatěžuje procesor. To byl ale problém jen dříve. Na už neexistujícím webu images.guide se psalo:
Back in 2013, the compression speed of WebP was ~10× slower than JPEG but is now negligible . For static images that are processed as part of your build, this shouldn’t be a large issue. Dynamically generated images will likely cause a perceivable CPU overhead and will be something you will need to evaluate.
Takže by to mělo být ke zvážení, jen pokud obrázky generujete v reálném čase, je jich hodně a jsou obrovské. Jinak to už dneska problém nebude a výkon se řešívá u ještě novějšího formátu AVIF.
Podpora v prohlížečích: samá krása
Jde o formát z dílny Google, i proto jej nejdříve podporovaly všechny prohlížeče postavené na jádru Chromu a Firefox. Nově také Safari od verze 14.
Více informací o podpoře: caniuse.com/webp.
Dříve bylo potřeba řešit fallback do více rozšířených formátů, ale toto zde nechávám už jen kvůli zpětné kompatibilitě článku.
Fallback do JPEG
Řešením je vygenerovat dvě sady obrázků – ve WebP i JPEG formátu a pomocí značky PICTURE nechat na prohlížečích výběr té správné:
Chrome a jeho parta tady stáhnou jen WebP, zbývající třetina uživatelů dostane své „jépégéčko“.
Pokud toto řešení nemůžete nasadit, je zde ještě například možnost detekce na serveru nebo přes .htaccess. Řešení s ale bude výkonnostně nejefektivnější.
Detekci podpory formátu WebP, ale i jeho jednotlivých vlastností, pro obrázky linkované z CSS lze obstarat knihovnou Modernizr. Zápis v CSS by pak mohl vypadat takto:
.box
.webp .box
Jednoduchý detekční skript nabízí také Google na stránkách o WebP.
Má kvůli WebP smysl zdvojovat obrázky? Záleží od situace, ale hlavně u větších webů se to myslím velmi vyplatí.
Jaké množství dat WebP vlastně ušetří?
O případu mého klienta, e-shopu VašeČočky.cz jsem psal:
Když kolegové nasadili WebP obrázky, ušetřili 30 % datového objemu úvodní stránky a o pětinu snížili čas pro Page Load .
Podobné zkušenosti mám i z jiných testů a klientských projektů. Není výjimkou ani větší než poloviční ušetření obrázkových dat.
Jinak obecné studie od Googlu říkají, že WebP je menší následovně
u bezztrátových obrázků typu PNG o 26 %
u ztrátových obrázků typu JPG o 25-34 %
Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .
