Kompletan vodič za korištenje WebP formata slike

WebP, ili neslužbeno proglašen kao weppy, je format slike koji je Google Developers uveo prije otprilike 5 godina. ako ste web-dizajner ili programer koji nastoji smanjiti i optimizirati veličinu vaše slikovne datoteke, ono što je WebP sposoban trebala bi postaviti osmijeh na vaše lice.

Ukratko, evo nekih važnih stvari koje trebate znati o ovom ne tako novom, ali još uvijek hladnom formatu slike:

• WebP ide uz datotečni nastavak .webp.
• WebP prihvaća i kompresiju gubitaka i gubitaka.
• WebP slike gubitaka su potencijalno 25-34% manji od JPEG.
• WebP slike bez gubitaka su potencijalno 25% manje u odnosu na PNG.
• WebP podržava transparentnost bez gubitaka, tj. PNG s alfa kanalom.
• WebP podržava animaciju. tj. animirani GIF-ovi.

Ukratko, WebP može značajno smanjiti veličinu JPEG, GIF, PNG slikovne datoteke. Ovo je osvježenje na WebP-u koje bi trebali provjeriti prije nego što krenemo u zabavne stvari.

Eksperiment

Najbolje što se tiče tvrdnji na webu jest da uvijek možemo pokrenuti eksperimente kako bismo provjerili istinitost i autentičnost. Evo nekih eksperimenata koje sam učinio kako bih to otkrio koliko mala slika može dobiti nakon što se konvertiraju iz različitih slikovnih formata (JPEG, PNG i GIF) u WebP.

1. JPEG - Slika bez gubitaka

Ovdje je slučajna JPEG slika koju sam uhvatio od Pexelsa. Izvorna datoteka - 165kb. ↓

Slika je optimizirana pomoću JpegMini. Nova veličina datoteke - 101kb. ↓

Konačno, ista se slika pretvara u WebP format. Konačna veličina datoteke - 70kb. ↓

Na bočnoj napomeni: Ovo su različite datoteke ako je ista slika konvertirana u sljedeće formate:

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

2. PNG - slika bez gubitaka

Pokušajmo s PNG-om s transparentnošću. (Izvor). Izvorna datoteka - 587kb. ↓

Evo slike optimizirane s tinypng. Nova veličina datoteke - 278kb. ↓

I na kraju, slika pretvorena u WebP format. Konačna veličina datoteke - 112kb. ↓

3. Animirani GIF

Kada se konvertira u WebP, JPEG slika ide od 165kb do 70kb, dok PNG slika ide od 587kb do 112kb.

Pogledajmo kako se animiraju GIF-ovi:

• Izvorna veličina datoteke - 6,8 MB
• WebP veličina datoteke - 6,3 MB

Sažetak:

Evo tablice za sažimanje cijelog eksperimenta:

	Gubitak (JPG)	Bez gubitka (PNG)	Animirani GIF-
Izvornik	165kb	587kb	6.8mb
Optimizirano alatima	101kb	278kb	-
WebP format	70kb	112kb	6.3mb

Bez mnogo stajanja u matematičkim izračunima, te brojke ukazuju na značajno smanjenje veličine datoteka, a sudeći prema slikama, ne možete reći razliku u smislu jasnoće i rezolucije. Manje, lakše veličine datoteka s istom razinom kvalitete slike, WebP svakako vrijedi pogledati.

Pretvaranje u WebP pomoću alata

Ako ste već na brodu i želite početi ispuštati slike u WebP formatu, upustimo se i pogledamo kako možete lako pretvoriti svoje slike u ovaj format. Sve metode navedene u nastavku razlikuju se u smislu kontrole, jednostavnosti upotrebe i praktičnosti. Izaberite otrov.

WebPonize za ortak

WebPonize je vjerojatno najjednostavniji i najbrži način za pretvaranje slika u WebP format na Macu. Sve što trebate učiniti je samo povući i ispustiti vaše slike u WebPonize i to će učiniti pretvorbe. Dobit ćete izlaz, prethodnu veličinu, veličinu i postotak smanjenja izvorne datoteke. [Preuzmite web-ponudu]

Webpconv za Windows

Ako koristite Windows, Webpconv je aplikacija koju trebate instalirati. Također dolazi u prijenosnoj verziji tako da je možete samostalno pokrenuti na vašem flash pogonu. [Preuzmite Webconv]

Pretvaranje s naredbenim crtama

Ako se osjećate geeky, vjerojatno ćete htjeti izvesti pretvorbu pomoću naredbenog retka. cwebp pretvara vaše JPEG, PNG ili TIFF slike u WebP format i dwebp pretvara ih natrag u PNG format. Da vidimo kako ovo funkcionira.

Bilješka: U nastavku je opisan za Mac OS X. Za korisnike Windowsa i Linuxa kliknite ovdje.

Postavljanje MacPorts na Mac OSX

Najprije provjerite imate li instaliran Xcode, a zatim slijedite ove korake:

1. Preuzmite i instalirajte MacPorts. Ako već imate MacPortove instalirane na vašem Mac računalu, prijeđite na 2. korak.
2. lansiranje Terminal.
3. Upišite "Sudo port selfupdate"i pritisnite Enter. Ovo će ažurirati vaše MacPortove na najnoviju verziju.

   

4. Zatim upišite "Sudo luka instalirati webp"i pritisnite Enter. Ovo će se instalirati libwebp (WebP Knjižnica).

   

To je to. Pogledajmo sada kako pretvoriti slike u WebP pomoću naredbenog retka.

Naredbe za pretvorbu / povrat

Evo naredbi za:

I - Pretvori JPEG / PNG slikovne datoteke u WebP format

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

Primjer:

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

II - Povratite WebP slikovne datoteke natrag u PNG

Format: dwebp [WebP_filename] -o [PNG_filename]

Primjer:

dwebp image.webp -o image.png 

Više: Ako perferirate konverzije putem drugih sredstava, ovdje su upute za korištenje Grunt i Gulp zadataka za pretvaranje JPG / PNG datoteka u WebP.

Pretvori s mrežnim alatima

Ako ne želite instalirati aplikacije na svom operativnom sustavu da biste izvršili taj zadatak, umjesto toga se odlučite za ove online alate. Evo nekoliko koje sam saznao:

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

Savjet: Ako google pretvoriti webp online , vjerojatno ćete pronaći više opcija.

Dodatak za Photoshop

Vi svibanj biti drago da zna da postoji i Photoshop Plugin koji vam omogućuje da spremite slike na WebP formatu putem Photoshop. Ovaj dodatak podržava Mac OS X (CS 2- CS 6) i Windows (32-bitni i 64-bitni). [Preuzmite dodatak ovdje.]

Bilješka: Samo sam mislio da biste trebali znati da sam ga pokušao na Photoshopu CC. Nije tamo radio.

Podrška za WebP preglednik

Na kraju, razgovarajmo o kompatibilnosti. Trenutačno možete pregledavati slike web-formata na sljedećim preglednicima (ref):

• Chrome / Chrome za iOS
• Opera / Opera Mini

Ne toliko sreće Firefox i Safari, koji još uvijek ne podržavaju izvorno WebP format. Međutim, možete upotrijebiti WebPJS Javascript biblioteku pretvoriti WebP slike u dataURI niz na klijentskoj stranici.

Vratite se na druge formate slika

Uvijek je dobro upotrijebiti zamjenski način da biste izbjegli prikazivanje pogrešaka na slici zbog nepodržanih preglednika. U tom slučaju, povratni će biti slika u JPG ili PNG formatu. Evo kako to radite.

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

Za ovaj kôd, slike / kompletna-vodič za korištenje-webp-image-format_13.jpg će se učitati ako korisnik koristi Firefox ili Safari.

Pregledavanje WebP slika

Možete pregledati WebP slike na preglednicima Chrome i Opera. Ali ako to želite učiniti lokalno na vašem računalu, trebat će vam nekoliko alata.

Korisnici Macintosh računala mogu koristiti WebPQuickLook za pregled slika u WebP formatu pomoću funkcije Quick Look (s odabranim ili označenim odabirom slike, pritisnite razmaknicu).

Za korisnike Windowsa, WebPCodec će prikazati minijaturni pregled WebP slika u programu Explorer. Prikazat će se i WebP i JPEG ekvivalenti. Na određenim podržanim operacijskim sustavima Windows Vista (Vista, 7, 8) može se prikazati i WebP slika na pregledniku Windows Photo Viewer.

Više: ReSCR.it automatski prikazuje slike u WeBP formatu i dostupan je ako pohranjujete slike s MaxCDN. (Čitaj više)

Daljnje reference

• Pretvaranje animiranog GIF-a u WebP
• Kako funkcionira WebP
• Primjena WebP-a putem Accept Content Negotiation
• Brži, manji i ljepši web s WebP-om
• Primjena novih formata slika na webu
• WebP API dokumentacija