Kompletný sprievodca používaním formátu obrazu WebP

WebP, alebo neoficiálne vyslovene ako weppy, je obrazový formát predstavený vývojárom Google približne pred 5 rokmi. ak ste webový dizajnér alebo vývojár, ktorý sa snaží znížiť a optimalizovať veľkosť súboru obrázkov, čo je schopné WebP dať úsmev na tvári.

Stručne povedané, tu sú niektoré z dôležitých vecí, ktoré potrebujete vedieť o tomto ne-tak-nový-ale-stále-cool image formáte:

• WebP prechádza príponou .webp.
• WebP prijíma ako stratenú, tak bezstratovú kompresiu.
• WebP stratové obrázky sú potenciálne 25-34% menší ako JPEG.
• WebP bezstratové obrázky sú potenciálne O 25% menej v porovnaní s PNG.
• WebP podporuje bezstratovú transparentnosť, t. J. PNG s alfa kanálom.
• WebP podporuje animáciu. animované GIF.

Stručne povedané, WebP je schopný výrazne znížiť veľkosť obrázkových súborov JPEG, GIF, PNG. Tu je aktualizácia na WebP, ktorú by ste sa mali pozrieť predtým, než pôjdeme do zábavy.

Pokus

Najlepšie veci týkajúce sa nárokov na webe je, že vždy môžeme spustiť experimenty, aby sme zistili pravdivosť a pravosť. Tu sú niektoré experimenty, ktoré som zistil ako malý môže potenciálne získať obrázok po ich prevedení z rôznych formátov obrázkov (JPEG, PNG a GIF) na WebP.

1. JPEG - strata obrazu

Tu je náhodný obrázok JPEG, ktorý som zachytil od spoločnosti Pexels. Veľkosť pôvodného súboru - 165kb. ↓

Obraz je optimalizovaný pomocou JpegMini. Nová veľkosť súborov - 101kb. ↓

Nakoniec sa rovnaký obrázok prevádza na formát WebP. Konečná veľkosť súborov - 70 KB. ↓

Na vedľajšiu poznámku: Tu sú rôzne súbory, ak bol ten istý obrázok prevedený na nasledujúce formáty:

• GIF - 285 KB
• PNG 8 - 241,2 KB
• PNG 24 - 657,6 KB

2. PNG - Lossless Image

Teraz skúste s PNG transparentne. (Zdroj). Veľkosť pôvodného súboru - 587 KB. ↓

Tu je obrázok optimalizovaný pomocou tinypng. Nová veľkosť súborov - 278 KB. ↓

A nakoniec, obrázok prekonvertovaný na formát WebP. Konečná veľkosť súborov - 112kb. ↓

3. Animovaný GIF

Pri prevode na WebP sa obrázok JPEG pohyboval od 165kb do 70kb, zatiaľ čo obrázok PNG šiel z 587kb na 112kb.

Pozrime sa, ako animovaná cena GIF:

• Pôvodný rozsah súborov - 6,8 MB
• Veľkosť súborov WebP - 6,3 mb

Zhrnutie:

Tu je tabuľka, ktorá zhrnie celý experiment:

	Strata (JPG)	Lossless (PNG)	Animovaný GIF,
originál	165kb	587 KB	6,8 MB
Optimalizované pomocou nástrojov	101kb	278 KB	-
WebP formát	70 KB	112kb	6,3 MB

Bez toho, aby sme prežili veľa matematických výpočtov, tieto čísla naznačujú podstatné zníženie veľkosti súborov a pri posudzovaní z obrázkov nemôžete skutočne povedať rozdiel, pokiaľ ide o jasnosť a rozlíšenie. Menšie, ľahšie veľkosti súborov s rovnakou úrovňou kvality obrazu, WebP určite stojí za pozornosť.

Konverzia na WebP pomocou nástrojov

Ak ste už na palube a chceli by ste začať uvoľňovať obrázky vo formáte WebP, poďme sa ponoriť a pozrieť sa na to, ako ľahko previesť obrázky do tohto formátu. Všetky nižšie uvedené metódy sa líšia v oblasti kontroly, jednoduchosti použitia a vhodnosti. Vyberte si svoj jed.

WebPonize pre gumák

WebPonize je pravdepodobne najjednoduchší a najrýchlejší spôsob prevodu obrázkov na formát WebP na Mac. Jediné, čo musíte urobiť, je jednoducho pretiahnuť obrázky do aplikácie WebPonize a urobiť konverziu. Obdržíte výstup, pred-veľkosť, po-veľkosti a% zníženie pôvodného súboru. [Stiahnite si WebPonize]

Webpconv pre windows

Ak používate systém Windows, Webpconv je aplikácia, ktorú by ste mali nainštalovať. Dodáva sa aj v prenosnej verzii, takže ju môžete spustiť nezávisle na flash disku. [Stiahnite si Webconv]

Konverzia s príkazovými riadkami

Ak sa cítite podmanivé, pravdepodobne budete chcieť vylúčiť konverziu pomocou príkazových riadkov. cwebp konvertuje obrázky vo formáte JPEG, PNG alebo TIFF do formátu WebP a dwebp prevádza ich späť na formát PNG. Pozrime sa, ako to funguje.

Poznámka: Nasledujúca príručka pre systém Mac OS X. Pre používateľov systému Windows a Linux kliknite sem.

Nastavenie MacPortov v systéme Mac OSX

Najskôr sa uistite, že máte nainštalovaný Xcode, a postupujte podľa týchto krokov:

1. Stiahnite a nainštalujte MacPorty. Ak už máte nainštalovaný MacPorts, pokračujte krokom 2.
2. odpálenie terminál.
3. Typ "sudo port selfupdate"a stlačte kláves Enter a aktualizuje váš MacPort na najnovšiu verziu.

   

4. Ďalej zadajte "sudo port inštalovať webp"a stlačte Enter libwebp (Knižnica WebP).

   

To je všetko. Teraz sa pozrime na ako previesť obrázky na WebP pomocou príkazového riadku.

Príkazy na konverziu / vrátenie

Tu sú príkazy na:

I - Previesť obrazové súbory JPEG / PNG do formátu WebP

formát: cwebp -q [image_quality] [názov súboru JPEG / PNG] -o [WebP_filename]

príklad:

cwebp -q 80 example.png -o example.webp 

II - Skryté súbory obrázkov WebP späť do PNG

formát: dwebp [názov WebP_file] -o [PNG_filename]

príklad:

dwebp image.webp -o image.png 

viac: Ak chcete premeniť konverziu pomocou iných prostriedkov, tu sú pokyny na použitie úloh Grunt a Gulp na konverziu súborov JPG / PNG na WebP.

Konvertovať pomocou online nástrojov

Ak sa vám nepodarí nainštalovať žiadne aplikácie vo vašom operačnom systéme na vykonanie tejto úlohy, namiesto toho sa rozhodnite pre tieto online nástroje. Tu je niekoľko, ktoré som spoznal:

• Online-converter.com
• Webp-convertor.com
• Zamzar

Tip: Ak máte google previesť webové stránky online , pravdepodobne nájdete viac možností.

Doplnok Photoshopu

Môžete byť radi, že viete, že existuje aj aplikácia Photoshop Plugin, ktorá vám umožňuje uložiť obrázky do formátu WebP cez Photoshop. Tento doplnok podporuje operačné systémy Mac OS X (CS-CS 6) a Windows (32 bitov a 64 bitov). [Stiahnite si plugin tu.]

Poznámka: Len si myslel, že by ste mali vedieť, že som to skúsil na Photoshop CC. Nepracoval tam.

Podpora webového prehliadača

Nakoniec sa pozrime na kompatibilitu. V súčasnosti môžete zobraziť obrázky formátu WebP v nasledujúcich prehliadačoch (ref):

• Chrome / Chrome pre iOS
• Opera / Opera Mini

Nie je to tak veľa šťastia FireFox a safari, ktoré stále nepodporujú formát WebP natívne. Môžete však použiť knižnicu JavaScriptu WebPJS previesť obrázky WebP do reťazca dataURI na webe klienta.

Späť na iné formáty obrázkov

Vždy je dobré použiť rezervný súbor, aby ste predišli zobrazeniu chýb obrázkov v dôsledku nepodporovaných prehliadačov. V takomto prípade bude núdzový obrázok zobrazený vo formáte JPG alebo PNG. Tu je postup, ako to urobíte.

  zdroj srcset = "example.webp 1x" type = "image / webp">   

Pre tento kód, images / complete-sprievodca-k-použitie-WebP-image-format_13.jpg bude načítaný, ak používateľ použije Firefox alebo Safari.

Ukážka obrázkov WebP

Môžete si prezrieť obrázky WebP v prehľadávačoch prehliadača Chrome a Opera. Ale ak chcete robiť to lokálne na vašom počítači, budete potrebovať niekoľko nástrojov.

Používatelia Mac môžu používať nástroj WebPQuickLook na prezeranie obrázkov vo formáte WebP pomocou funkcie Quick Look (s vybratým alebo zvýrazneným obrázkom, stlačením medzerníka).

Pre používateľov systému Windows WebPCodec zobrazí náhľad miniatúr obrázkov WebP v programe Prieskumník súborov. Zobrazia sa ekvivalenty WebP aj JPEG. V niektorých podporovaných operačnom systéme Windows (Vista, 7, 8) sa obraz WebP zobrazuje aj v programe Windows Photo Viewer.

viac: ReSCR.it automaticky prenáša obrázky vo formáte WeBP a je k dispozícii, ak uložíte svoje obrázky do MaxCDN. (Čítaj viac)

Ďalšie odkazy

• Konverzia animovaných GIF na WebP
• Ako funguje WebP
• Nasadenie WebP prostredníctvom prijatia vyjednávania obsahu
• Rýchlejšie, menšie a krásnejšie webové stránky s WebP
• Nasadenie nových formátov obrázkov na webe
• Dokumentácia API WebP