Teljes útmutató a WebP képformátum használatához

WebP, vagy nem hivatalosan kimondottan weppy, egy képformátum, amelyet a Google Developers 5 évvel ezelőtt mutat be. ha Ön webes tervező, vagy olyan fejlesztő, aki a képfájl méreteinek csökkentésére és optimalizálására törekszik, akkor a WebP-nek képesnek kell lennie mosolynak az arcodra.

Röviden, itt van néhány fontos dolog, amiről tudnod kell, hogy ez a nem túl új, de még mindig hűvös képformátum:

• A WebP a .webp fájl kiterjesztésével megy végbe.
• A WebP veszteséges és veszteségmentes tömörítést alkalmaz.
• A WebP veszteséges képek potenciálisan 25-34% -kal kisebb, mint a JPEG.
• A WebP veszteségmentes képek potenciálisan 25% -kal kisebb a PNG-hez képest.
• A WebP támogatja a veszteségmentes átláthatóságot, azaz a PNG-t alfa-csatornával.
• A WebP támogatja az animációt. azaz animált GIF-ek.

Dióhéjban a WebP képes jelentősen csökkenteni a JPEG, GIF, PNG képfájlok méretét. Itt van egy frissítés a WebP-ről, amit érdemes megnézni, mielőtt bemegyünk a szórakoztató anyagba.

Egy kísérlet

A webes állításokkal kapcsolatos legjobb dolgok az, hogy mindig kísérleteket hajthatunk végre, hogy ellenőrizhessük az igazságot és a hitelességet. Íme néhány kísérlet, amit megtettem, hogy megtudjam milyen kicsi lehet egy kép miután különböző képformátumokból (JPEG, PNG és GIF) konvertáltak WebP-re.

1. JPEG - Veszteséges kép

Itt van egy véletlen JPEG-kép, amit megragadtam a Pexels-től. Eredeti fájlméret - 165kb. ↓

A kép a JpegMini segítségével optimalizálva van. Új fájlméret - 101kb. ↓

Végül ugyanazt a képet konvertálja WebP formátumba. Végleges fájlméret - 70KB. ↓

Oldalsó feljegyzés: Íme a különböző fájlállományok, ha ugyanazt a képet az alábbi formátumokra konvertálták:

• GIF - 285kb
• PNG 8 - 241.2kb
• PNG 24 - 657.6kb

2. PNG - veszteségmentes kép

Most próbálja meg a PNG-t átláthatóan. (Forrás). Eredeti fájlméret - 587kb. ↓

Íme a tinypng segítségével optimalizált kép. Új fájlméret - 278kb. ↓

Végül pedig a kép WebP formátumra lett átalakítva. Végleges fájlméret - 112kb. ↓

3. Animált GIF

WebPP-re konvertálva a JPEG-kép 165 kb-ról 70kb-ra ment, míg a PNG-kép 587kb-ról 112kb-ra.

Lássuk, hogy egy animált GIF-árat:

• Eredeti fájlméret - 6,8mb
• WebP fájlméret - 6.3mb

Összefoglaló:

Íme egy táblázat a teljes kísérlet összegzésére:

	Veszteséges (JPG)	Lossless (PNG)	Animált GIF-
Eredeti	165kb	587kb	6,8MB
Optimalizált eszközökkel	101kb	278kb	-
WebP formátum	70KB	112kb	6,3MB

A matematikai számítások sokasága nélkül ezek a számok a fájlméretek jelentős csökkenését jelzik, és a képek alapján nem igazán mondhatjuk el a különbséget az egyértelműség és a felbontás tekintetében. A kisebb méretű, könnyebb fájlméretek ugyanolyan képminőséggel bírnak, mint a WebP.

Konvertálás WebP-re eszközökkel

Ha már van a fedélzeten, és szeretné elindítani a képeket a WebP formátumban, merüljön el, és nézze meg, hogyan lehet könnyen átalakítani képeit erre a formátumra. Az alábbiakban ismertetett módszerek a kezelőszervek, a könnyű kezelhetőség és a meggyőződés szempontjából eltérőek. Válaszd ki a mérged.

WebPonize mert Mac

A WebPonize valószínűleg a legegyszerűbb és leggyorsabb módja a képek WebP formátumra való konvertálásának a Mac-en. Mindössze annyit kell tennie, hogy húzza át a képeket a WebPonize-ba, és megteszi a konverziót. Kapja meg az eredeti fájl előzetes méretét, méretét, méretét és csökkentésének százalékát. [WebPonize letöltése]

Webpconv mert ablakok

Ha Windows rendszert futtat, a Webpconv az az alkalmazás, amelyet telepíteni kell. Ez hordozható változatban is elérhető, így önállóan futtathatja a flash meghajtón. [Webconv letöltése]

Konvertálás parancssorokkal

Ha geeky érzi magát, valószínűleg ki akarja fejezni a konverziót parancssorokkal. cwebp átalakítja a JPEG, PNG vagy TIFF képeket WebP formátumba és dwebp visszaállítja őket PNG formátumra. Lássuk, hogyan működik ez.

Jegyzet: A következő útmutató a Mac OS X rendszerhez. Windows és Linux felhasználóknál kattintson ide.

MacPorts beállítása Mac OSX rendszeren

Először fel, győződjön meg róla, hogy telepítve van az Xcode, majd kövesse az alábbi lépéseket:

1. Töltse le és telepítse a MacPorts programot. Ha már telepítette a MacPortot a Mac számítógépére, folytassa a 2. lépéssel.
2. Dob Terminál.
3. Típus "sudo port önálló"és nyomja meg az Enter billentyűt. Ez frissíti a MacPortsot a legújabb verzióra.

   

4. Ezután írja be a következőt:sudo port install webp"és nyomja meg az Entert. Ez települ libwebp (WebP könyvtár).

   

Ez az. Most nézzük meg hogyan lehet konvertálni a képeket a WebP-re parancssor segítségével.

Konvertálás / visszaállítás parancsok

Íme a következő parancsok:

I - JPEG / PNG képfájlok konvertálása WebP formátumba

Formátum: cwebp -q [image_quality] [JPEG / PNG_névnév] -o [WebP_filename]

Példa:

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

II - A Covert WebP képfájlok vissza a PNG-re

Formátum: dwebp [WebP_név] -o [PNG_filename]

Példa:

dwebp image.webp -o image.png 

Több: Ha a konverziót más módokon átírja, itt találhat utasításokat a Grunt és a Gulp feladatok használatára a JPG / PNG fájlok konvertálására WebP-re.

Konvertálás Online eszközökkel

Ha nem szeretné, hogy az operációs rendszeren bármilyen alkalmazást telepítsen a feladat elvégzéséhez, válassza ki ezeket az online eszközöket. Íme néhány, amit tudtam:

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

Tipp: Ha google a webp online konvertálása , valószínűleg több lehetőséget talál.

Photoshop bővítmény

Örömmel tudhatod, hogy van egy Photoshop Plugin is, amely lehetővé teszi a képek WebP formátumba mentését Photoshop segítségével. Ez a bővítmény támogatja a Mac OS X (CS 2- CS 6) és a Windows (32 bites és 64 bites) rendszert. [Töltse le a bővítményt itt.]

jegyzet: Csak gondoltam, hogy tudnod kell, hogy megpróbáltam a Photoshop CC-n. Nem működött ott.

WebPB böngésző támogatása

Végül beszéljünk a kompatibilitásról. Jelenleg megtekintheti a WebP formátumú képeket a következő böngészőkön (ref):

• Chrome / Chrome az iOS-hoz
• Opera / Opera Mini

Nem annyira szerencse FireFox és Szafari, amelyek még mindig nem támogatják a WebP formátumot natívan. Azonban a WebPJS Javascript könyvtárat használhatja WebP képeket konvertálhat dataURI karakterláncra az ügyféloldalon.

Visszatérés más képformátumokhoz

Mindig jó ötlet, ha nem támogatott böngészők miatt nem sikerül megjeleníteni a képhibákat. Ebben az esetben a lemaradás JPG vagy PNG formátumú kép lesz. Itt van, hogyan csinálod.

  forrás srcset = "example.webp 1x" type = "image / webp">   

Ehhez a kódhoz, images / teljes-guide-to-using-webp-image-format_13.jpg betöltődik, ha a felhasználó Firefoxot vagy Safarit használ.

A WebP képek előnézete

Előnézetben megtekintheti a WebP képeket a Chrome és az Opera tenyésztőkön. De ha helyben szeretné csinálni a gépén, szüksége lesz néhány eszközre.

A Mac felhasználók a WebPQuickLook használatával megtekinthetik a WebP formátumú képeket a Quick Look (Gyors nézet) funkció használatával (a kijelölt vagy kijelölt képpel, nyomja meg a szóközt).

Windows-felhasználók esetén a WebPCodec megjeleníti a WebP képek előnézeti képét a File Explorerben. Mind a WebP, mind a JPEG egyenértékek megjelennek. Bizonyos támogatott Windows operációs rendszereken (Vista, 7, 8) a WebP kép is megjeleníthető a Windows Photo Viewer alkalmazásban is.

Több: A ReSCR.it a WeBP formátumú képeket automatikusan továbbítja, és akkor is elérhető, ha a képeket MaxCDN formátumban tárolja. (Olvass tovább)

További hivatkozások

• Az animált GIF átalakítása WebP-re
• Hogyan működik a WebP
• WebP telepítése a tartalomtárgyalások elfogadása révén
• Gyorsabb, kisebb és gyönyörűebb web a WebP-vel
• Új képformátumok telepítése az interneten
• WebP API dokumentáció