Ghid complet pentru utilizarea formatelor de imagine WebP

WebP, sau pronunțat neoficial ca weppy, este un format de imagine introdus de dezvoltatorii Google în urmă cu aproximativ 5 ani. dacă sunteți un web designer sau un dezvoltator care se străduiește să reducă și să optimizeze dimensiunea fișierului imagine, ceea ce este capabil de WebP ar trebui să vă ofere un zâmbet pe fața ta.

Pe scurt, iată câteva dintre lucrurile importante pe care trebuie să le cunoașteți despre acest format de imagine nu-așa-nou-dar-încă-cool:

• WebP trece prin extensia de fișier .webp.
• WebP adoptă atât compresie cu pierderi, cât și fără pierderi.
• Imaginile cu pierderi WebP sunt potențiale 25-34% mai mic decât JPEG.
• Imaginile WebP fără pierderi sunt potențiale 25% mai mic decât PNG.
• WebP sprijină transparența fără pierderi, adică PNG cu canal alfa.
• WebP acceptă animație. adică animate GIF-uri.

Pe scurt, WebP este capabil să reducă semnificativ dimensiunea fișierului imagine JPEG, GIF, PNG. Iată o reîmprospătare pe WebP pe care ar trebui să o verificați înainte de a intra în lucrurile distractive.

Un experiment

Cele mai bune lucruri despre revendicările de pe Web sunt că putem rula mereu experimente pentru a verifica veridicitatea și autenticitatea. Iată câteva experimente pe care le-am făcut pentru a afla cât de mică poate obține o imagine după ce sunt convertite din diferite formate de imagine (JPEG, PNG și GIF) în WebP.

1. JPEG - imagine pierduta

Iată o imagine JPEG aleatorie pe care am luat-o de la Pexels. Dimensiunea originală a fișierelor - 165kb. ↓

Imaginea este optimizată cu JpegMini. Dimensiune nouă a fișierelor - 101kb. ↓

În cele din urmă, aceeași imagine este convertită în format WebP. Dimensiunea finală a fișierelor - 70KB. ↓

Într-o notă aparte: Iată diferitele fișiere dacă aceeași imagine a fost convertită în următoarele formate:

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

2. PNG - Imagine fără pierderi

Acum, să încercăm cu PNG cu transparență. (Sursă). Dimensiunea originală a fișierelor - 587kb. ↓

Iată imaginea optimizată cu tinypng. Dimensiune nouă a fișierelor - 278kb. ↓

În fine, imaginea a fost convertită în format WebP. Dimensiunea finală a fișierelor - 112KB. ↓

3. GIF animat

Când a fost convertit în WebP, o imagine JPEG a variat de la 165kb la 70kb, în ​​timp ce o imagine PNG a trecut de la 587kb la 112kb.

Să vedem cum un tarif animat GIF-uri:

• Dimensiunea originală a fișierelor - 6.8mb
• Dimensiunea fișierelor WebP - 6.3mb

Rezumat:

Iată un tabel care să rezume întregul experiment:

	Pierdut (JPG)	Lossless (PNG)	Animated GIF-
Original	165kb	587kb	6.8mb
Optimizat cu instrumente	101kb	278kb	-
Formatul WebP	70KB	112KB	6.3mb

Fără a se locui mult în calculele matematice, aceste cifre indică o reducere substanțială a dimensiunilor fișierelor și judecând de la imagini, nu puteți spune cu adevărat diferența în ceea ce privește claritatea și rezoluția. Dimensiuni mai mici, mai ușoare ale fișierelor cu același nivel de calitate a imaginii, WebP merită cu siguranță să privească.

Se convertesc la WebP cu Instrumente

Dacă sunteți deja la bord și doriți să începeți să eliberați imagini în format WebP, hai să ne aruncăm cu capul în jos și să vedem cum vă puteți transforma ușor imaginile în acest format. Toate metodele menționate mai jos variază în ceea ce privește controlul, ușurința utilizării și convingerea. Alege-ti otrava.

WebPonize pentru Mac

WebPonize este probabil cea mai simplă și cea mai rapidă modalitate de a converti imagini în format WebP pe Mac. Tot ce trebuie să faceți este să trageți și să plasați imaginile în WebPonize și va face conversia. Veți primi extrasul, dimensiunea anterioară, dimensiunea după dimensiune și procentul de reducere a fișierului original. [Descărcați WebPonizați]

Webpconv pentru ferestre

Dacă executați Windows, Webpconv este aplicația pe care ar trebui să o instalați. De asemenea, vine în versiune portabilă, astfel încât să îl puteți rula independent pe unitatea flash. [Descărcați Webconv]

Conversia cu linii de comandă

Dacă vă simțiți geeky, probabil că doriți să excitați conversia utilizând linii de comandă. cwebp convertește imaginile JPEG, PNG sau TIFF în formate WebP și dwebp le transformă în format PNG. Să vedem cum funcționează acest lucru.

Notă: Următoarea ghid pentru Mac OS X. Pentru utilizatorii Windows și Linux, faceți clic aici.

Configurarea MacPorturilor pe Mac OSX

În primul rând, asigurați-vă că ați instalat Xcode, apoi urmați acești pași:

1. Descărcați și instalați MacPorts. Dacă aveți deja MacPorts instalat pe Mac, continuați cu pasul 2.
2. Lansa Terminal.
3. Tip "sudup port autoupdate"și apăsați enter.Acest lucru vă va actualiza MacPorturile la ultima versiune.

   

4. Apoi, tastați "portul sudo instalează webp"și apăsați pe Enter libwebp (Biblioteca WebP).

   

Asta e. Acum, să aruncăm o privire la cum se convertesc imaginile în WebP folosind linia de comandă.

Comenzi pentru conversia / revenirea

Iată comenzile pentru:

I - Conversia fișierelor imagine JPEG / PNG în formatul WebP

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

Exemplu:

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

II - Fișierele de imagine Web Covert înapoi în PNG

Format: dwebp [WebP_filename] -o [PNG_filename]

Exemplu:

dwebp image.webp -o image.png 

Mai Mult: Dacă permiți conversi prin alte mijloace, iată instrucțiunile pentru utilizarea sarcinilor Grunt și Gulp pentru a converti fișierele JPG / PNG în WebP.

Conversia cu instrumente online

Dacă nu vă gândiți la instalarea oricărei aplicații în sistemul dvs. de operare pentru a efectua această sarcină, optați pentru aceste instrumente online. Iată câteva dintre ele pe care le-am cunoscut:

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

Bacsis: Dacă sunteți Google converti webp online , veți găsi probabil mai multe opțiuni.

Photoshop Plugin

S-ar putea să fiți bucuros să știți că există și un Photoshop Plugin care vă permite să salvați imagini în format WebP prin Photoshop. Acest plugin acceptă Mac OS X (CS-CS 6) și Windows (32 biți și 64 biți). [Descărcați plugin-ul aici.]

Notă: Credeam că ar trebui să știți că am încercat-o pe Photoshop CC. Nu a lucrat acolo.

Suport pentru browserul WebP

În sfârșit, să vorbim despre compatibilitate. În prezent, puteți vizualiza imagini formate WebP în următoarele browsere (ref):

• Chrome / Chrome pentru iOS
• Opera / Opera Mini

Nu-i prea mult noroc FireFox și Safari, care încă nu suportă formatul WebP nativ. Cu toate acestea, puteți utiliza biblioteca WebPJS Javascript pentru a conversia imaginilor WebP în șirul de dateURI pe site-ul clientului.

Reveniți la alte formate de imagine

Este întotdeauna o idee bună să folosiți o rezervă pentru a evita afișarea erorilor de imagine din cauza browserelor neacceptate. În acest caz, rezervorul va fi în imagine în format JPG sau PNG. Iată cum faceți asta.

  sursa srcset = "example.webp 1x" tip = "imagine / webp">   

Pentru acest cod, images / complet-ghid-la-folosind-webp-image-format_13.jpg va fi încărcat dacă utilizatorul a folosit Firefox sau Safari.

Previzualizarea imaginilor WebP

Aveți posibilitatea să previzualizați imaginile WebP în browserele Chrome și Opera. Dar dacă doriți să o faceți local pe mașina dvs., veți avea nevoie de câteva instrumente.

Utilizatorii Mac pot utiliza WebPQuickLook pentru a previzualiza imaginile WebP folosind funcția Quick Look (cu imaginea selectată sau evidențiată, apăsând bara de spațiu).

Pentru utilizatorii Windows, WebPCodec va afișa o previzualizare miniaturală a imaginilor WebP din File Explorer. Vor fi afișate atât echivalentele WebP și JPEG. În anumite ferestre de operare acceptate (Vista, 7, 8), imaginea WebP poate fi afișată și pe Photo Viewer Windows.

Mai Mult: ReSCR.it oferă imagini în format WeBP automat și este disponibil dacă stocați imaginile cu MaxCDN. (Citeste mai mult)

Referințe ulterioare

• Conversia animației GIF în WebP
• Cum funcționează WebP
• Implementarea WebP prin acceptarea Negocierea conținutului
• Web mai rapid, mai mic și mai frumos cu WebP
• Implementarea de noi formate de imagini pe Web
• Documentație API WebP