Täydellinen opas WebP-kuvamuodon käyttämiseen

WebP tai epävirallisesti lausuttu weppy, on Google-kehittäjien esittämä kuvamuoto noin 5 vuotta sitten. jos olet web-suunnittelija tai kehittäjä, joka pyrkii vähentämään ja optimoimaan kuvatiedoston kokoa, WebP: n kykenee hymyilemään kasvosi.

Lyhyesti sanottuna tässä on muutamia tärkeitä asioita, jotka sinun on tiedettävä tästä ei-niin-uudesta mutta silti viileästä kuvamuodosta:

• WebP siirtyy .webp: n tiedostopääte.
• WebP hyväksyy sekä häviöttömän että häviöttömän pakkauksen.
• WebP: n häviölliset kuvat ovat mahdollisesti 25-34% pienempi kuin JPEG.
• WebP: n häviötön kuva on mahdollisesti 25% pienempi kuin PNG.
• WebP tukee häviötöntä läpinäkyvyyttä eli PNG: tä alfa-kanavalla.
• WebP tukee animaatiota. eli animoituja GIF: iä.

Lyhyesti sanottuna WebP pystyy vähentämään merkittävästi JPEG-, GIF- ja PNG-kuvatiedoston kokoa. Tässä on päivitys WebP: lle, jonka kannattaa tarkistaa ennen kuin mennään hauskaa.

Kokeilu

Paras asia Webissä olevista väitteistä on se, että voimme aina suorittaa kokeita, jotta voisimme tarkistaa totuuden ja aitouden. Tässä muutamia kokeita, joita tein selvittääkseni kuinka pieni kuva voi saada sen jälkeen, kun ne on muunnettu eri kuvamuotoista (JPEG, PNG ja GIF) WebP: ksi.

1. JPEG - häviävä kuva

Tässä on satunnainen JPEG-kuva, jonka tartuin Pexelsistä. Alkuperäinen tiedosto - 165kb. ↓

Kuva on optimoitu JpegMinillä. Uusi tiedostomuoto - 101kb. ↓

Lopuksi sama kuva muunnetaan WebP-muotoon. Lopullinen tiedostomuoto - 70kB. ↓

Sivuhuomautuksena: Tässä on eri tiedostomuodot, jos sama kuva muunnetaan seuraaviin muotoihin:

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

2. PNG - häviötön kuva

Kokeile nyt PNG: tä avoimesti. (Lähde). Alkuperäinen tiedosto - 587kb. ↓

Tässä on tinypng-sovelluksella optimoitu kuva. Uusi tiedostomuoto - 278kb. ↓

Ja lopuksi kuva muunnetaan WebP-muotoon. Lopullinen tiedostomuoto - 112kb. ↓

3. GIF-animaatio

Kun se muunnetaan WebP: ksi, JPEG-kuva meni 165 kb: sta 70 kilotavuun, kun taas PNG-kuva lähti 587 kb: stä 112 kilotavuun.

Katsotaanpa, miten animoitu GIF-hinta:

• Alkuperäinen tiedostokoko - 6,8mb
• WebP-tiedoston koko - 6.3mb

Yhteenveto:

Seuraavassa taulukossa on yhteenveto koko kokeesta:

	Häviö (JPG)	Lossless (PNG)	Animated-GIF
Alkuperäinen	165kb	587kb	6.8mb
Optimoitu työkaluilla	101kb	278kb	-
WebP-muoto	70kB	112kb	6.3mb

Ilman paljon matemaattisissa laskelmissa nämä luvut osoittavat tiedostokokojen huomattavaa pienenemistä ja kuvien perusteella ei todellakaan voi kertoa eroa selkeyden ja tarkkuuden suhteen. Pienemmät, kevyemmät tiedostokoot, joilla on sama kuvanlaatu, WebP kannattaa ehdottomasti tutustua.

Muuntaminen WebP-työkaluksi työkaluilla

Jos olet jo aluksella ja haluat aloittaa kuvien vapauttamisen WebP-muodossa, sukeltaa sisään ja katsokaa, miten voit muuntaa kuvat helposti tähän muotoon. Kaikki jäljempänä mainitut menetelmät vaihtelevat säätimien, helppokäyttöisyyden ja konviniteetin suhteen. Valitse myrkkysi.

WebPonize varten mac

WebPonize on luultavasti yksinkertaisin ja nopein tapa muuntaa kuvat WebP-muotoon Macissa. Sinun tarvitsee vain vetää ja pudottaa kuvat WebPonize-tiedostoon ja se tekee muuntamisen. Saat alkuperäisen tiedoston ouputin, ennen kokoa, jälkikokoa ja vähennysprosenttia. [Lataa WebPonize]

Webpconv varten Windows

Jos käytössäsi on Windows, Webpconv on sovellus, jonka sinun pitäisi asentaa. Se on myös kannettavassa versiossa, joten voit käyttää sitä itsenäisesti flash-asemallasi. [Lataa Webconv]

Muuntaminen komentorivillä

Jos tuntuu geeky, saatat todennäköisesti haluta virittää muunnoksen komentorivillä. cwebp muuntaa JPEG-, PNG- tai TIFF-kuvat WebP-muotoon ja dwebp muuntaa ne takaisin PNG-muotoon. Katsotaanpa, miten tämä toimii.

Huomautus: Seuraavassa opastetaan se Mac OS X: lle. Windows- ja Linux-käyttäjät napsauttamalla tätä.

MacPortsin asettaminen Mac OSX: ssä

Varmista ensin, että olet asentanut Xcode-koodin, ja toimi seuraavasti:

1. Lataa ja asenna MacPorts. Jos sinulla on jo MacPorts asennettu Maciin, siirry vaiheeseen 2.
2. Tuoda markkinoille terminaali.
3. Kirjoita "sudo port itsestään päivitetty"ja paina Enter. Tämä päivittää MacPortsin uusimpaan versioon.

   

4. Kirjoita seuraava:sudo port install webp"ja paina Enter. Tämä asennetaan libwebp (WebP-kirjasto).

   

Se siitä. Katsokaamme nyt miten muuntaa kuvat WebP: ksi komentorivillä.

Käskyt muuntaa / palauttaa

Seuraavassa on komentoja:

I - Muunna JPEG / PNG-kuvatiedostot WebP-muotoon

Muoto: cwebp -q [image_quality] [JPEG / PNG_nimi] -o [WebP_filenimi]

esimerkki:

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

II - peitetyt WebP-kuvatiedostot takaisin PNG: hen

Muoto: dwebp [WebP_nimi] -o [PNG_filenimi]

esimerkki:

dwebp image.webp -o image.png 

Lisää: Jos suoritat muuntamisen muulla tavalla, tässä on ohjeet Grunt- ja Gulp-tehtävien muuntamiseksi JPG / PNG-tiedostojen muuntamiseksi WebP: ksi.

Muunna Online-työkaluilla

Jos et halua asentaa mitään sovelluksia käyttöjärjestelmään tämän tehtävän suorittamiseksi, valitse nämä verkkotyökalut sen sijaan. Seuraavassa on muutamia, jotka olen saanut tietää:

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

Kärki: Jos olet Google muuntaa webp verkossa , löydät todennäköisesti lisää vaihtoehtoja.

Photoshop-laajennus

Saatat olla iloinen siitä, että on olemassa myös Photoshop-laajennus, jonka avulla voit tallentaa kuvia WebP-muotoon Photoshopin kautta. Tämä laajennus tukee Mac OS X: ää (CS 2- CS 6) ja Windowsia (32-bittinen ja 64-bittinen). [Lataa plugin täältä.]

Huomautus: Ajatteli, että sinun pitäisi tietää, että yritin sitä Photoshop CC: ssä. Ei toiminut siellä.

WebP-selaimen tuki

Lopuksi puhutaan yhteensopivuudesta. Tällä hetkellä voit tarkastella WebP-muotoisia kuvia seuraavista selaimista (ref):

• Chrome / Chrome iOS: lle
• Opera / Opera Mini

Ei niin paljon onnea Firefox ja Safari, jotka eivät vieläkään tue WebP-muotoa luonnollisesti. Voit kuitenkin käyttää WebPJS-Javascript-kirjastoa osoitteeseen muuntaa WebP-kuvat dataURI-merkkijonoksi asiakkaan sivustolla.

Palaa muihin kuvamuotoihin

On aina hyvä käyttää takaisinkytkentää, jotta vältät sellaisten kuvien virheiden näyttämisen, joita ei tueta selaimista. Tässä tapauksessa varmuuskopiointi on kuvassa JPG- tai PNG-muodossa. Näin teet sen.

  lähde srcset = "example.webp 1x" type = "image / webp">   

Tätä koodia varten, kuvat / koko-opas-to-käyttäen-WebP-image-format_13.jpg ladataan, jos käyttäjä käytti Firefoxia tai Safaria.

WebP-kuvien esikatselu

Voit esikatsella WebP-kuvia Chrome- ja Opera-selaimilla. Mutta jos haluat tehdä sen paikallisesti koneellasi, tarvitset muutamia työkaluja.

Mac-käyttäjät voivat käyttää WebPQuickLookia esikatsella WebP-muotoisia kuvia Quick Look -toiminnolla (valittu tai korostettu kuva, paina välilyöntiä).

Windows-käyttäjille WebPCodec näyttää WebP-kuvien pikkukuvan esikatselun File Explorerissa. Sekä WebP- että JPEG-ekvivalentit näytetään. Joissakin tuetuissa Window OS -käyttöjärjestelmissä (Vista, 7, 8) WebP-kuva voidaan näyttää myös Windows-valokuvien katseluohjelmassa.

Lisää: ReSCR.it toimittaa kuvat WeBP-muodossa automaattisesti ja se on käytettävissä, jos tallennat kuviasi MaxCDN: llä. (Lue lisää)

Muita viitteitä

• Animoitu GIF muunnetaan WebP: ksi
• Miten WebP toimii
• WebP: n käyttöönotto sisällön neuvottelujen hyväksymisen avulla
• Nopeampi, pienempi ja kauniimpi verkko WebP: llä
• Uusien kuvamuotojen käyttöönotto verkossa
• WebP API -asiakirjat