Kompletní průvodce používáním formátu WebP

WebP, nebo neoficiálně vyslovováno jako weppy, je formát obrázku zavedený vývojáři Google asi před 5 lety. pokud jste web designer, nebo vývojář, který se snaží snížit a optimalizovat velikost obrazového souboru, co je WebP schopen dát úsměv na tváři.

Stručně řečeno, zde jsou některé z důležitých věcí, které potřebujete vědět o tomto ne-tak-nový-ale-stále-cool obrazový formát:

• WebP jde o příponu souboru .webp.
• WebP přijímá jak ztrátovou, tak bezeztrátovou kompresi.
• WebP ztráty obrázky jsou potenciálně O 25-34% menší než JPEG.
• WebP bezeztrátové obrázky jsou potenciálně O 25% menší ve srovnání s PNG.
• WebP podporuje bezztrátovou průhlednost, tj. PNG s alfa kanálem.
• WebP podporuje animaci. tj. animované GIFy.

Stručně řečeno, WebP je schopen výrazně snížit velikost souboru JPG, GIF, PNG. Zde je opakování na WebP, měli byste se podívat, než jsme jít do zábavné věci.

Experiment

Nejlepší na tvrzeních na webu je, že můžeme vždy provádět experimenty, abychom zjistili pravdivost a pravost. Zde je několik experimentů, které jsem zjistil jak malý obrázek může potenciálně získat po převodu z různých formátů obrázků (JPEG, PNG a GIF) na WebP.

1. JPEG - ztrátový obraz

Tady je náhodný obrázek JPEG, který jsem popadl z Pexels. Původní velikost souboru - 165kb. ↓

Obrázek je optimalizován s JpegMini. Nová velikost souboru - 101kb. ↓

Nakonec je stejný obraz převeden do formátu WebP. Konečná velikost souboru - 70kb. ↓

Na boční poznámce: Jsou-li stejné obrazy převedeny do následujících formátů, můžete použít různé soubory:

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

2. PNG - bezztrátový obrázek

Nyní se pokusme s PNG s průhledností. (Zdroj). Původní velikost souboru - 587kb. ↓

Zde je obrázek optimalizovaný pomocí tinypng. Nová velikost souboru - 278kb. ↓

A konečně, obraz převeden do formátu WebP. Konečná velikost souboru - 112kb. ↓

3. Animovaný GIF

Při převodu na WebP obraz JPEG šel z 165kb na 70kb, zatímco obraz PNG šel z 587kb na 112kb.

Podívejme se, jak se animované ceny GIF:

• Původní velikost souboru - 6.8mb
• Velikost souboru WebP - 6.3mb

Souhrn:

Zde je tabulka, která shrnuje celý experiment:

	Lossy (JPG)	Bezeztrátové (PNG)	Animovaný-GIF
Originál	165kb	587kb	6,8mb
Optimalizováno pomocí nástrojů	101kb	278kb	-
Formát WebP	70kb	112kb	6,3mb

Bez toho, že by se tato čísla dostávala do matematických výpočtů, ukazují na podstatné zmenšení velikosti souborů a na základě obrázků nemůžete skutečně rozeznat rozdíl ve smyslu jasnosti a rozlišení. Menší, lehčí velikosti souborů se stejnou úrovní kvality obrazu, WebP rozhodně stojí za to podívat se do.

Konverze na WebP s nástroji

Pokud jste již na palubě a chtěli byste začít uvolňovat obrázky ve formátu WebP, pojďme se ponořit a podívat se, jak můžete obrázky snadno převést do tohoto formátu. Všechny níže uvedené metody se liší, pokud jde o kontroly, snadnost použití a konvekci. Vyberte si jed.

WebPonize pro Mac

WebPonize je pravděpodobně nejjednodušší a nejrychlejší způsob, jak převést obrázky do formátu WebP na počítačích Mac. Jediné, co musíte udělat, je přetáhnout obrázky do WebPonize a převést to. Dostanete ouput, před-velikost, po-velikost a% snížení původního souboru. [Stáhnout WebPonize]

Webpconv pro Okna

Pokud používáte Windows, Webpconv je aplikace, kterou byste měli nainstalovat. To také přichází v přenosné verzi, takže můžete spustit nezávisle na vašem flash disku. [Stáhnout Webconv]

Konverze pomocí příkazových řádků

Pokud máte pocit, podivínský, můžete pravděpodobně chtít excute konverzi pomocí příkazových řádků. cwebp převádí obrázky JPEG, PNG nebo TIFF do formátu WebP a dwebp převede zpět do formátu PNG. Podívejme se, jak to funguje.

Poznámka: Následující pokyny pro Mac OS X. Pro uživatele systému Windows a Linux klikněte zde.

Nastavení MacPortů na Mac OSX

Nejprve se ujistěte, že máte nainstalovaný Xcode, a postupujte takto:

1. Stáhněte a nainstalujte MacPorts. Pokud již máte v počítači Mac nainstalovány MacPorty, pokračujte krokem 2.
2. Zahájení Terminál.
3. Typ "sudo port selfupdate"a stiskněte klávesu Enter. Tímto aktualizujete MacPorty na nejnovější verzi.".

   

4. Dále zadejte "sudo port install webp"a stiskněte klávesu Enter. Tím se nainstaluje libwebp (Knihovna WebP).

   

A je to. Podívejme se nyní jak převést obrázky do WebP pomocí příkazového řádku.

Příkazy pro převod / Vrátit

Zde jsou následující příkazy:

I - Převod obrazových souborů JPEG / PNG do formátu WebP

Formát: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

Příklad:

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

II - Skrytí obrazových souborů WebP zpět do formátu PNG

Formát: dwebp [WebP_filename] -o [PNG_filename]

Příklad:

dwebp image.webp -o image.png 

Více: Pokud jste perfer konverzi pomocí jiných prostředků, zde jsou pokyny pro použití Grunt a Gulp úkoly převést JPG / PNG soubory na WebP.

Převést pomocí online nástrojů

Pokud se při provádění tohoto úkolu nehledáte na instalaci žádných aplikací do operačního systému, vyberte místo toho tyto nástroje online. Zde je několik, které jsem poznal:

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

Tip: Pokud jste Google převést webp online , budete pravděpodobně najít více možností.

Photoshop Plugin

Můžete být rád, že je zde také Photoshop Plugin, který umožňuje ukládat obrázky do formátu WebP přes Photoshop. Tento plugin podporuje Mac OS X (CS 2- CS 6) a Windows (32 bit a 64 bit). [Stáhnout plugin zde.]

Poznámka: Jen si myslel, že bys měl vědět, že jsem to zkusil na Photoshopu CC. Nefungoval tam.

Podpora prohlížeče WebP

Konečně, pojďme mluvit o kompatibilitě. V současné době můžete zobrazit obrázky ve formátu WebP v následujících prohlížečích (ref):

• Chrome / Chrome pro systém iOS
• Opera / Opera Mini

Ne tak moc štěstí Firefox a Safari, které stále nepodporují formát WebP nativně. Knihovnu WebPJS Javascript však můžete použít převést obrázky WebP na řetězec dataURI na klientském webu.

Vraťte se zpět do jiných formátů obrázků

Vždy je vhodné použít nouzový režim, abyste zabránili zobrazování chyb v důsledku nepodporovaných prohlížečů. V tomto případě se jedná o nouzový obraz ve formátu JPG nebo PNG. Zde je návod, jak to děláte.

  source srcset = "example.webp 1x" typ = "image / webp">   

Pro tento kód, images / complete-guide-to-using-webp-image-format_13.jpg bude načten, pokud uživatel používá Firefox nebo Safari.

Náhled obrázků WebP

Můžete si prohlédnout obrázky WebP na prohlížečích Chrome a Opera. Pokud to však chcete na svém počítači dělat lokálně, budete potřebovat několik nástrojů.

Uživatelé Mac mohou pomocí funkce WebPQuickLook zobrazit náhled obrázků ve formátu WebP pomocí funkce Quick Look (s vybraným nebo zvýrazněným obrázkem, stisknutím mezerníku)..

V systému Windows uživatelé WebPCodec zobrazí náhled náhledu obrázků WebP v Průzkumníku souborů. Zobrazí se ekvivalenty WebP i JPEG. Na některých podporovaných operačních systémech Windows (Vista, 7, 8) může být obraz WebP zobrazen také v prohlížeči Windows Photo Viewer.

Více: ReSCR.it dodává obrázky ve formátu WeBP automaticky a je k dispozici, pokud ukládáte obrázky s MaxCDN. (Přečtěte si více)

Další odkazy

• Převod animovaného GIF na WebP
• Jak funguje WebP
• Zavedení WebP přes Accept Content Negotiation
• Rychlejší, menší a krásnější web s WebP
• Nasazení nových obrazových formátů na webu
• Dokumentace WebP API