Popoln vodnik za uporabo formata slike WebP

WebP ali neuradno izražen kot Weppy, je slikovni format, ki ga je razvil Google Developers pred približno petimi leti. če ste spletni oblikovalec ali razvijalec, ki si prizadeva zmanjšati in optimizirati velikost slikovne datoteke, bi lahko WebP naredil nasmeh na obrazu.

Na kratko, tukaj je nekaj pomembnih stvari, ki jih morate vedeti o tem ne tako novem, vendar še vedno kul formatu slike:

• WebP gre po končnici datoteke .webp.
• WebP sprejema tako stiskanje z izgubo kot izgube.
• Podatki o izgubah WebP so potencialno 25-34% manjši od JPEG.
• Slike WebP brez izgube so potencialno 25% manjši v primerjavi s PNG.
• WebP podpira preglednost brez izgube, tj. PNG z alfa kanalom.
• WebP podpira animacijo. to so animirani GIF-i.

Na kratko, WebP je zmožen bistveno zmanjšati velikost JPEG, GIF in PNG. Tukaj je osvežitev za WebP, ki jo morate preveriti, preden gremo v zabavne stvari.

Eksperiment

Najboljše stvari v zvezi s trditvami na spletu so, da lahko vedno izvajamo eksperimente, da bi preverili resničnost in pristnost. Tukaj je nekaj poskusov, ki sem jih izvedel kako majhna je lahko slika po pretvorbi iz različnih slikovnih formatov (JPEG, PNG in GIF) v WebP.

1. JPEG - Podoba z izgubo

Tukaj je naključna JPEG slika, ki sem jo vzel iz Pexelsa. Izvirna datoteka - 165kb. ↓

Slika je optimizirana z JpegMini. Nova datoteka - 101kb. ↓

Končno se ista slika pretvori v format WebP. Končna velikost datoteke - 70kb. ↓

Na stranski opombi: Tu so različne datoteke, če je ista slika pretvorjena v naslednje oblike:

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

2. PNG - slika brez izgube

Zdaj pa poskusimo s PNG s preglednostjo. (Vir). Izvirna datoteka - 587kb. ↓

Tukaj je slika, optimizirana s tinypng. Nova datoteka - 278kb. ↓

In končno, slika se pretvori v format WebP. Končna velikost datoteke - 112kb. ↓

3. Animirani GIF

Če je slika JPEG pretvorjena v WebP, je bila slika od 165kb do 70kb, slika PNG pa od 587kb do 112kb.

Poglejmo, kako poteka animirani GIF:

• Originalna velikost datoteke - 6.8 MB
• WebP datoteka - 6,3 MB

Povzetek:

Tu je tabela, ki povzema celoten preizkus:

	Izguba (JPG)	Brez izgube (PNG)	Animirani GIF
Izvirnik	165kb	587kb	6.8mb
Optimizirano z orodji	101kb	278kb	-
Format WebP	70kb	112kb	6,3mb

Ne da bi se veliko zadrževali v matematičnih izračunih, te številke kažejo na bistveno zmanjšanje velikosti datotek in glede na slike ne moremo zares razbrati razlike v smislu jasnosti in ločljivosti. Manjša, lažja velikost datotek z enako kakovostjo slike, WebP je vsekakor vreden ogleda.

Pretvorba v WebP z orodji

Če ste že na krovu in bi radi začeli objavljati slike v formatu WebP, se potopimo in pogledamo, kako lahko preprosto pretvorite slike v to obliko. Vse spodaj navedene metode se razlikujejo glede nadzora, enostavnosti uporabe in uporabnosti. Izberi strup.

WebPonize za Mac

WebPonize je verjetno najpreprostejši in najhitrejši način za pretvorbo slik v format WebP na Macu. Vse kar morate storiti je, da preprosto povlečete in spustite vaše slike v WebPonize in naredite pretvorbo. Prejeli boste izhod, pre-size, after-size in% zmanjšanja izvirne datoteke. [Download WebPonize]

Webpconv za Windows

Če uporabljate Windows, je Webpconv aplikacija, ki jo morate namestiti. Prav tako je na voljo v prenosni različici, tako da lahko zaženete samostojno na vašem bliskovnem pogonu. [Download Webconv]

Pretvarjanje z ukaznimi vrsticami

Če se počutite geeky, boste verjetno želeli izvesti pretvorbo z ukaznimi vrsticami. cwebp pretvori slike JPEG, PNG ali TIFF v obliko WebP in dwebp jih pretvori nazaj v format PNG. Poglejmo, kako to deluje.

Opomba: V nadaljevanju je opisan za Mac OS X. Za uporabnike operacijskega sistema Windows in Linux kliknite tukaj.

Nastavitev MacPorts na Mac OSX

Najprej se prepričajte, da imate nameščeno Xcode, in sledite tem korakom:

1. Prenesite in namestite MacPorts. Če ste v računalniku Mac že namestili MacPort, nadaljujte s 2. korakom.
2. Kosilo Terminal.
3. Vnesite »Sudo port selfupdate"in pritisnite Enter. To bo posodobilo vaš MacPorts na najnovejšo različico.

   

4. Naprej, vnesite »sudo luka namestite webp"in pritisnite Enter. To bo namestilo libwebp (Knjižnica WebP).

   

To je to. Zdaj pa si poglejmo kako pretvoriti slike v WebP z ukazno vrstico.

Ukazi za pretvorbo / povrat

Tu so ukazi za:

I - Pretvorite slikovne datoteke JPEG / PNG v format WebP

Oblika: cwebp -q [slika_kvaliteta] [JPEG / PNG_filename] -o [ime_uporabnika]

Primer:

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

II - prikrivanje slikovnih datotek WebP nazaj v PNG

Oblika: dwebp [WebP_filename] -o [PNG_filename]

Primer:

dwebp image.webp -o image.png 

Več: Če spreminjate konverzije prek drugih sredstev, tukaj so navodila za uporabo Gruntovih in Gulp nalog za pretvorbo JPG / PNG datotek v WebP.

Pretvori s spletnimi orodji

Če ne želite namestiti nobenih aplikacij v operacijski sistem, da bi opravili to nalogo, se namesto tega odločite za ta spletna orodja. Tukaj je nekaj, kar sem spoznal:

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

Nasvet: Če google pretvoriti spletu online , verjetno boste našli več možnosti.

Vtičnik za Photoshop

Morda boste z veseljem vedeli, da obstaja tudi Photoshop Plugin, ki vam omogoča shranjevanje slik v format WebP preko Photoshopa. Ta vtičnik podpira Mac OS X (CS 2- CS 6) in Windows (32-bitni in 64-bitni). [Tukaj prenesite vtičnik.]

Opomba: Mislil sem, da bi moral vedeti, da sem ga preizkusil na Photoshopu CC. Tam ni delal.

Podpora za brskalnik WebP

Nazadnje, govorimo o združljivosti. Trenutno si lahko ogledate slike formata WebP v naslednjih brskalnikih (ref):

• Chrome / Chrome za iOS
• Opera / Opera Mini

Ne toliko sreče FireFox in Safari, ki še vedno ne podpirajo formata WebP. Lahko pa uporabite knjižnico Javascript WebPJS pretvoriti WebP slike v dataURI niz na mestu odjemalca.

Vrnite se na druge slikovne formate

Vedno je dobra zamisel, da uporabite nadomestno, da se izognete prikazu napak slike zaradi nepodprtih brskalnikov. V tem primeru bo nadomestna slika v obliki JPG ali PNG. Evo, kako to storite.

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

Za to kodo, images / popoln vodnik za uporabo-webp-image-format_13.jpg se naloži, če uporabnik uporablja Firefox ali Safari.

Predogled slik WebP

Slike za WebP si lahko ogledate v brskalnikih Chrome in Opera. Če pa želite to narediti lokalno na vaši napravi, potrebujete nekaj orodij.

Uporabniki Mac lahko uporabljajo funkcijo WebPQuickLook za predogled slik formata WebP s funkcijo hitrega pogleda (z izbrano ali označeno sliko, pritisnite preslednico).

Za uporabnike operacijskega sistema Windows bo WebPCodec v File Explorerju prikazal predogled sličic slik WebP. Prikazali se bosta enakovredni WebP in JPEG. Pri nekaterih podprtih operacijskih sistemih Windows (Vista, 7, 8) je mogoče sliko WebP prikazati tudi v pregledovalniku fotografij Windows.

Več: ReSCR.it samodejno predvaja slike v formatu WeBP in je na voljo, če slike shranjujete z MaxCDN. (Preberi več)

Nadaljnje reference

• Pretvarjanje animiranega GIF v WebP
• Kako deluje WebP
• Uvajanje WebP prek Accept Content Negotiation
• Hitrejši, manjši in lepši splet z WebP
• Uvajanje novih slikovnih formatov na spletu
• Dokumentacija API-ja WebP