Täielik juhend WebP pildivormingu kasutamiseks

WebP või mitteametlikult hääldatud kui vürtsikas, on pildi formaat, mille Google Developers tutvustas umbes 5 aastat tagasi. kui olete veebidisainer või arendaja, kes püüab vähendada ja optimeerida oma pildifaili suurust, peaks WebP suutma naeratada teie näole.

Lühidalt, siin on mõned olulised asjad, mida peate teadma selle mitte-nii-uue, kuid ikka jahe pildi vormingu kohta:

• WebP läheb .webp faili laiendiga.
• WebP võtab vastu nii kadudeta kui ka kadudeta tihenduse.
• WebP kadud kujutised on potentsiaalselt 25-34% väiksem kui JPEG.
• WebP kadudeta pildid on potentsiaalselt 25% väiksem kui PNG.
• WebP toetab kadudeta läbipaistvust, s.t PNG-d alfa-kanaliga.
• WebP toetab animatsiooni. st animeeritud GIF-id.

Lühidalt öeldes on WebP võimeline oluliselt vähendama JPEG, GIF, PNG kujutise faili suurust. Siin on veebipõhine täiendus, mida peaksite enne lõbusaid asju sisse minema.

Eksperiment

Parimad asjad väidete kohta veebis on see, et me saame alati läbi viia katseid, et kontrollida tõesust ja autentsust. Siin on mõned katsed, mida ma tegin, et teada saada kui väike pilt võib saada pärast seda, kui need on konverteeritud erinevatest pildivormingutest (JPEG, PNG ja GIF) veebipõhiseks.

1. JPEG - kadunud pilt

Siin on juhuslik JPEG-kujutis, mille ma Pexelsilt haarasin. Originaal failide suurus - 165kb. ↓

Pilt on optimeeritud JpegMini abil. Uus faili suurus - 101kb. ↓

Lõpuks konverteeritakse sama pilt WebP-vormingusse. Lõplik faili suurus - 70kb. ↓

Külgmärkus: Siin on erinevad failid, kui sama kujutis teisendati järgmistesse vormingutesse:

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

2. PNG - kadudeta pilt

Nüüd proovime PNG-ga läbipaistvusega. (Allikas). Originaal failide suurus - 587kb. ↓

Siin on tinypngiga optimeeritud pilt. Uus faili suurus - 278kb. ↓

Ja lõpuks, pilt teisendatakse veebipõhiseks. Lõplik faili suurus - 112kb. ↓

3. Animeeritud GIF

Kui konverteeriti WebP-ks, läks JPEG-kujutis 165 kb-lt 70 kb-ni, samas kui PNG-pilt läks 587kb-lt 112kb-ni.

Vaatame, kuidas animeeritud GIF-piletid:

• Originaal failide suurus - 6,8mb
• WebP faili suurus - 6.3mb

Kokkuvõte:

Siin on tabel, milles saab kokku võtta kogu katse:

	Lossy (JPG)	Lossless (PNG)	Animeeritud-GIF
Originaal	165kb	587kb	6.8mb
Optimeeritud tööriistadega	101kb	278kb	-
WebP-vorming	70kb	112kb	6.3mb

Ilma matemaatilistes arvutustes suure hulga eluruumide puhul näitavad need arvud failisuuruste olulist vähendamist ja piltide põhjal ei saa te tegelikult selgust ja lahutusvõimet erinevalt öelda. Väiksemad, heledamad failisuurused, millel on sama pildikvaliteedi tase, on WebP kindlasti kindlasti väärt.

Teisendamine veebipõhiseks tööriistadega

Kui olete juba pardal ja soovid alustada piltide levitamist veebipõhises vormingus, sukelduge ja vaadake, kuidas saate oma pildid sellesse vormingusse kergesti teisendada. Kõik allpool nimetatud meetodid varieeruvad kontrollide, kasutamise lihtsuse ja veenvuse poolest. Vali oma mürk.

WebPonize jaoks Mac

WebPonize on ilmselt kõige lihtsam ja kiireim viis teisendada pildid Web-vormingusse Macis. Kõik, mida pead tegema, on lihtsalt lohistada oma pildid WebPonize'i ja see teeb konversiooni. Saate algse faili väljavõtte, suuruse, suuruse ja suuruse. [Download WebPonize]

Webpconv jaoks Windows

Kui kasutate Windowsi, on Webpconv rakendus, mida peaksite installima. Samuti on see kaasaskantav versioon, nii et saate seda oma mälupulgal iseseisvalt käivitada. [Download Webconv]

Converting käsurealt

Kui tunnete geeky, võite tõenäoliselt soovitada konversiooni käsurealt. cwebp teisendab teie JPEG-, PNG- või TIFF-pildid WebP-vormingusse ja dwebp teisendab need tagasi PNG-vormingusse. Vaatame, kuidas see toimib.

Märge: Järgmine juhend selle Mac OS X jaoks. Windows ja Linuxi kasutajad klõpsa siia.

MacPorts'i seadistamine Mac OSXis

Esmalt veenduge, et olete installinud Xcode'i, seejärel järgige neid samme:

1. Laadige alla ja installige MacPorts. Kui teie Macis on juba MacPorts installitud, jätkake 2. sammuga.
2. Käivita Terminal.
3. Tüüp "sudo sadama iseärastamine"ja vajuta Enter. See värskendab teie MacPorts'i uusima versiooni.

   

4. Järgmiseks tippige "sudo port install webp"ja vajuta Enter. See installitakse libwebp (WebP raamatukogu).

   

See ongi see. Vaatame nüüd kuidas teisendada pilte veebipõhiseks käsurea abil.

Konverteerimise / taastamise käsud

Siin on käsud:

I - JPEG / PNG pildifailide teisendamine veebipõhiseks

Vorming: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

Näide:

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

II - varjatud veebipildi failid tagasi PNG-sse

Vorming: dwebp [WebP_nimi] -o [PNG_filename]

Näide:

dwebp image.webp -o image.png 

Veel: Kui muudate konversiooni teiste vahendite abil, on siin juhised Grunt- ja Gulp-ülesannete kasutamiseks JPG / PNG-failide teisendamiseks veebipõhiseks.

Teisenda veebitööriistadega

Kui te ei soovi selle ülesande täitmiseks oma operatsioonisüsteemis rakendusi installida, vali selle asemel need online-tööriistad. Siin on mõned, mida ma teadsin:

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

Nõuanne: Kui teil on Google teisendada veebi võrgus , ilmselt leiate rohkem võimalusi.

Photoshopi plugin

Teil võib olla hea meel teada, et on olemas ka Photoshopi plugin, mis võimaldab salvestada pilte WebP-vormingusse Photoshopi kaudu. See plugin toetab Mac OS X (CS 2- CS 6) ja Windows (32-bitine ja 64-bitine). [Laadi plugin alla siit.]

Märge: Lihtsalt arvasin, et peaksite teadma, et ma proovisin seda Photoshop CC-s. Ei töötanud seal.

Veebipõhise brauseri tugi

Lõpuks räägime ühilduvusest. Praegu saate vaadata WebP-vormingus pilte järgmistes brauserites (ref):

• Chrome'i / Chrome iOS-i jaoks
• Opera / Opera Mini

Mitte nii palju õnne FireFox ja Safari, mis ei toeta veel WebP-vormingut. WebPJSi Javascripti raamatukogu saate siiski kasutada teisendada WebP-pildid kliendi saidil dataURI-stringiks.

Tagasi teiste pildivormingute juurde

Alati on hea kasutada tagasilööki, et vältida piltide vigu, mida ei toeta toetatud brauserid. Sellisel juhul on varukoopia kujutis JPG või PNG formaadis. Siin on, kuidas seda teete.

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

Selle koodi jaoks, images / full-guide-to-using-webp-image-format_13.jpg laaditakse, kui kasutaja kasutas Firefoxi või Safari.

Veebipiltide eelvaade

Te saate eelvaate WebP-pilte vaadata Chrome'i ja Opera operaatoritel. Aga kui sa tahad seda oma masinaga kohapeal teha, on vaja mõningaid tööriistu.

Maci kasutajad saavad kasutada WebPQuickLooki WebP-vormingus piltide eelvaadeteks, kasutades Quick Look (Kiire väljanägemise) funktsiooni (valitud pilt on valitud või esile tõstetud, vajutage tühikuklahvi).

Windowsi kasutajate jaoks kuvab WebPCodec WebP piltide pisipildi eelvaate File Exploreris. Kuvatakse nii WebP kui ka JPEG ekvivalendid. Teatud toetatavates Windowsi operatsioonisüsteemides (Vista, 7, 8) saab veebipildi kuvada ka Windowsi fotovaaturis.

Veel: ReSCR.it pakub automaatselt pilte WeBP formaadis ja see on saadaval, kui salvestate oma pildid MaxCDN-iga. (Loe rohkem)

Täiendavad viited

• Animeeritud GIF-i teisendamine WebP-ks
• Kuidas WebP töötab
• Veebipõhise veebiportaali kasutuselevõtt sisuliste läbirääkimiste kaudu
• Kiirem, väiksem ja ilusam veeb veebis
• Uute pildivormingute kasutuselevõtt veebis
• WebP API dokumentatsioon