Optimalizace obrázků pomocí webp

Již jsme napsali několik článků o optimalizaci obrázků jpegoptim, jpegtran, optipng, pngcrush a ImageMagick. Dnes chceme popsat optimalizaci obrazu pomocí webp.

Minifikace a komprese se již dlouho staly zcela standardními věcmi pro optimalizaci kódu webových stránek. Všechny oblíbené webové zdroje optimalizují obrázky, používají stejné CSS, kdykoli je to možné, a vybírají správné formáty obrázků. Ale to nestačí. Statistiky HTTP Archive ukazují, že obrázky zabírají asi 64 % velikosti webové stránky. Nový standard WebP přichází, aby pomohl nahradit JPEG a PNG.

Stručně o WebP

Formát se objevil již v roce 2010 a od té doby byl vyvinut společností Google. WebP je založen na kompresním algoritmu pro klíčové snímky video kodeku VP8, se ztrátou nebo bez ní, a je zabalen v kontejneru založeném na RIFF. Bezztrátové obrázky WebP jsou v průměru o 26 % menší ve srovnání s PNG a ztrátové obrázky WebP jsou o 25–34 % menší ve srovnání s JPEG se stejným indexem SSIM. Nový formát také podporuje průhlednost (známou jako alfa kanál).

Princip činnosti

Při ztrátové kompresi WebP používá prediktivní kódování, ve kterém se hodnoty sousedních bloků pixelů používají k predikci hodnoty požadovaného bloku pixelů a poté je rozdíl zakódován.

Bezeztrátová komprese využívá dobře známé fragmenty obrazu k přesné rekonstrukci pixelů. Místní paletu lze také použít, pokud neexistuje žádný odpovídající algoritmus, který by vás zajímal.

Výhody a nevýhody

Za:

• menší velikost obrázku;
• pokročilý kompresní algoritmus;
• vysoká kvalita obrazu;
• podpora transparentnosti

Proti:

• slabá prevalence;
• „Plasticita“ v kompresi se ztrátami;
• může dojít ke ztrátě barev v pixelech a další počítačové grafiky.

WebP je již podporován v Chrome, Opeře a standardním prohlížeči Android a pomocí knihovny WebPJS jej lze zobrazit ve všech populárních prohlížečích (v IE 6 a vyšších s použitím Flash). Kromě toho byla vyvinuta lehká knihovna kódování a dekódování libwebp, nástroje příkazového řádku pro kódování a dekódování WebP a také nástroje pro prohlížení, multiplexování a animaci obrázků v tomto formátu.

Instalace cwebp

Cwebp má předkompilované linuxové binární soubory. Instalace je tedy jednoduchá na stažení a rozbalení:

# wget https://storage.googleapis.com/downloads.webmproject.org/releases/webp/libwebp-1.0.3-linux-x86-64.tar.gz
# tar zxf libwebp-1.0.3-linux-x86-64.tar.gz 
# cp -a libwebp-1.0.3-linux-x86-64/bin/cwebp /usr/bin/
# cp -a libwebp-1.0.3-linux-x86-64/bin/dwebp /usr/bin/

Použití cwebp

Nástroj cwebp se používá pro převod z JPEG, PNG a TIFF a dwebp se používá pro dekódování. Konverze se spustí jednoduchým příkazem (z adresáře utility):

# cwebp input.png -q 80 -o output.webp

Na stejném principu lze spustit dekódování. Existuje mnoho možností a dalších parametrů, včetně kontroly kódování.

Nasazení WebP

Nový formát vás tedy zaujal, provedli jste všechny testy, znovu se podívali na statistiky a ujistili se, že Chrome je stále nejoblíbenějším webovým prohlížečem. Co dále? Dále si musíte vytvořit kopii všech obrázků ve WebP (můžete napsat jednoduchý skript pro převod všech souborů) a poté zkontrolovat uživatele webu a dlaň na nich kompaktní obrázky, pokud jejich prohlížeč podporuje WebP.

To znamená, že si můžete vytvořit svůj vlastní skript, který zkontroluje prohlížeč klienta na podporu formátu, který následně odpojí webový server, nebo tento úkol zcela přiřadí webovému serveru. Druhá možnost se nám zdá logičtější.

Vyjednávání pomocí hlavičky Přijmout

Prohlížeče předávají hlavičku Accept jako:

v Opeře:

Accept: text / html, application / xml; q = 0.9, application / xhtml + xml,
image / png, image / webp, image / jpeg, image / gif, image / x-xbitmap, * / *; q = 0.1

v Chrome:

Accept: image / webp, * / *; q = 0.8

S tímto vědomím můžete nakonfigurovat webový server tak, aby automaticky přenášel WebP. Jako příklad používáme Nginx, do jehož konfiguračního souboru musíte přidat něco takového:

location / {

  if ($http_accept ~* "webp")    { set $webp_accept "true"; }
  if (-f $request_filename.webp) { set $webp_local  "true"; }

  if ($webp_local = "true") {
    add_header Vary Accept;
  }

  # if the client supports WebP, then upload the file
  if ($webp_accept = "true") {
    rewrite (.*) $1.webp break;
  }
}

Konfigurace Apache bude podobná. Pokud v Accept není nalezena podpora WebP, budou přeneseny běžné soubory. Pokud se Nginx používá jako proxy pro ukládání statiky do mezipaměti, konfigurace se bude lišit:

server {
  location / {
   
    if ($http_accept ~* "webp") { set $webp T; }
    proxy_cache_key $scheme$proxy_host$request_uri$webp;

    proxy_pass http://backend;
    proxy_cache my-cache;
  }
}

Závěr

Formát obrázku WebP výrazně zmenší velikost webové stránky, ale vzhledem k jeho omezené podpoře musíte dodatečně nakonfigurovat webový server a obsahovat kopie všech obrázků v několika formátech.