Pilnīga rokasgrāmata par WebP attēlu formāta lietošanu

WebP vai neoficiāli izrunāts kā asprātīgs, ir attēlu formāts, ko Google izstrādātāji ieviesa apmēram pirms 5 gadiem. ja esat tīmekļa dizainers vai attīstītājs, kas cenšas samazināt un optimizēt attēla faila lielumu, tas, ko WebP spēj, smaidu uz jūsu sejas.

Īsi sakot, šeit ir dažas svarīgas lietas, kas jums jāzina par šo ne tik jaunā, bet joprojām vēsā attēla formātu:

• WebP iet ar .webp faila paplašinājumu.
• WebP izmanto gan zudumu, gan bezzudumu saspiešanu.
• Iespējams, WebP zudušie attēli 25-34% mazāks nekā JPEG.
• Iespējams, WebP zudumi bez attēliem 25% mazāk nekā PNG.
• WebP atbalsta bezzudumu pārredzamību, t.i. PNG ar alfa kanālu.
• WebP atbalsta animāciju. tas ir, animēti GIF.

Īsumā, WebP spēj ievērojami samazināt JPEG, GIF, PNG attēla faila lielumu. Šeit ir atjaunināts WebP, kas jums jāpārbauda, ​​pirms mēs nonākam pie jautrajām lietām.

Eksperiments

Labākās lietas par prasībām tīmeklī ir tādas, ka mēs vienmēr varam izmēģināt eksperimentus, lai pārbaudītu patiesumu un autentiskumu. Šeit ir daži eksperimenti, ko es darīju, lai uzzinātu cik mazs attēls var iegūt pēc tam, kad tie ir pārveidoti no dažādiem attēlu formātiem (JPEG, PNG un GIF) uz WebP.

1. JPEG - zaudētais attēls

Šeit ir nejaušs JPEG attēls, ko es satvēra no Pexels. Oriģinālais faila lielums - 165kb. ↓

Attēls ir optimizēts ar JpegMini. Jauns faila lielums - 101kb. ↓

Visbeidzot, tas pats attēls tiek pārveidots par WebP formātu. Galīgais faila lielums - 70kb. ↓

Sānu piezīme: Šeit ir dažādi failu faili, ja tas pats attēls tika pārvērsts šādos formātos:

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

2. PNG - bezzudumu attēls

Tagad mēģināsim ar PNG ar pārredzamību. (Avots). Oriģinālais faila lielums - 587kb. ↓

Šeit ir attēls, kas optimizēts ar tinypng. Jauns faila lielums - 278kb. ↓

Un visbeidzot, attēls tiek pārveidots par WebP formātu. Galīgais faila lielums - 112kb. ↓

3. Animēts GIF

Pārvēršot WebP, JPEG attēls no 165kb līdz 70kb, savukārt PNG attēls no 587kb līdz 112kb.

Redzēsim, kā animētas GIF cenas:

• Oriģināls faila lielums - 6.8mb
• WebP faila izmērs - 6.3mb

Kopsavilkums:

Šeit ir tabula, lai apkopotu visu eksperimentu:

	Zaudējumi (JPG)	Bezzudums (PNG)	Animēts-GIF
Oriģināls	165kb	587kb	6.8mb
Optimizēts ar rīkiem	101kb	278kb	-
WebP formāts	70kb	112kb	6.3mb

Bez matemātisko aprēķinu daudzuma šie skaitļi liecina par būtisku faila izmēru samazināšanu un spriežot pēc attēliem, jūs nevarat īsti pateikt atšķirību skaidrības un izšķirtspējas ziņā. Mazāki, vieglāki failu izmēri ar tādu pašu attēla kvalitāti, WebP noteikti ir vērts aplūkot.

Konvertēšana uz WebP ar rīkiem

Ja jūs jau esat uz klāja un vēlaties sākt attēlu publicēšanu WebP formātā, ienirsim un paskatieties, kā jūs varat viegli pārvērst attēlus uz šo formātu. Visas turpmāk minētās metodes atšķiras atkarībā no kontroles, viegluma un pārliecības. Izvēlieties savu indi.

WebPonize par Mac

WebPonize, iespējams, ir vienkāršākais un ātrākais veids, kā Mac datorā pārvērst attēlus WebP formātā. Viss, kas jums jādara, ir vienkārši velciet un nometiet attēlus WebPonize, un tas tiks darīts. Jūs saņemsiet sākotnējā faila samazinājumu, pirms lieluma, pēc izmēra un%. [Lejupielādēt WebPonize]

Webpconv par Windows

Ja izmantojat Windows, Webpconv ir lietotne, kas jums jāinstalē. Tas nāk arī portatīvajā versijā, lai jūs varētu palaist to neatkarīgi no sava flash diska. [Lejupielādēt Webconv]

Konvertēšana ar komandrindām

Ja jūtaties geeky, iespējams, vēlēsities izsaukt reklāmguvumu, izmantojot komandrindas. cwebp pārveido jūsu JPEG, PNG vai TIFF attēlus WebP formātā un dwebp pārvērš tos atpakaļ uz PNG formātu. Let's redzēt, kā tas darbojas.

Piezīme: Tālāk ir sniegta norāde Mac OS X. Windows un Linux lietotājiem noklikšķiniet šeit.

MacPorts iestatīšana operētājsistēmā Mac OSX

Pirmkārt, pārliecinieties, vai ir instalēta Xcode, un izpildiet šīs darbības:

1. Lejupielādējiet un instalējiet MacPorts. Ja Mac datorā jau ir instalēts MacPorts, pārejiet uz 2. darbību.
2. Uzsākt Terminal.
3. Tips "sudo port selfupdate"un nospiediet Enter. Tas atjauninās jūsu MacPorts uz jaunāko versiju.

   

4. Tālāk ierakstiet "sudo port install webp"un nospiediet Enter. Tas tiks instalēts libwebp (WebP bibliotēka).

   

Tieši tā. Tagad paskatīsimies kā pārvērst attēlus WebP, izmantojot komandrindu.

Komandu konvertēšana / atjaunošana

Šeit ir komandas:

I - JPEG / PNG attēlu failu konvertēšana WebP formātā

Formāts: cwebp -q [image_quality] [JPEG / PNG_filename] -o [WebP_filename]

Piemērs:

cwebp -q 80 example.png -o piemērs.webp 

II - Covert WebP attēlu faili atpakaļ uz PNG

Formāts: dwebp [WebP_fil. nosaukums] -o [PNG_filename]

Piemērs:

dwebp image.webp -o image.png 

Vairāk: Ja jūs veicat konversiju ar citiem līdzekļiem, šeit ir norādījumi par Grunt un Gulp uzdevumu izmantošanu, lai pārvērstu JPG / PNG failus uz WebP.

Konvertēt ar tiešsaistes rīkiem

Ja nevēlaties instalēt jebkādas lietojumprogrammas jūsu operētājsistēmā, lai veiktu šo uzdevumu, izvēlies šos tiešsaistes rīkus. Šeit ir daži, ko es uzzināju:

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

Padoms: Ja jūs google pārvērst webp tiešsaistē , jūs, iespējams, atradīsiet vairāk iespēju.

Photoshop spraudnis

Iespējams, jūs priecāsieties zināt, ka ir arī Photoshop spraudnis, kas ļauj saglabāt attēlus WebP formātā, izmantojot Photoshop. Šis spraudnis atbalsta Mac OS X (CS 2- CS 6) un Windows (32 bitu un 64 bitu). [Lejupielādējiet spraudni šeit.]

Piezīme: Tikai domāju, ka jums vajadzētu zināt, ka es to izmēģināju Photoshop CC. Tur nestrādāja.

WebP pārlūkprogrammas atbalsts

Visbeidzot, runāsim par saderību. Pašlaik WebP formāta attēlus var skatīt šādās pārlūkprogrammās (ref):

• Chrome / Chrome iOS
• Opera / Opera Mini

Ne tik daudz veiksmes FireFox un Safari, kas joprojām neatbalsta WebP formātu. Tomēr varat izmantot WebPJS Javascript bibliotēku pārvērst WebP attēlus uz klienta vietnes datuURI virknē.

Atgriezties pie citiem attēlu formātiem

Vienmēr ir ieteicams izmantot rezerves versiju, lai izvairītos no attēla kļūdu rādīšanas neatbalstītu pārlūkprogrammu dēļ. Šādā gadījumā attēls būs JPG vai PNG formātā. Lūk, kā jūs to darāt.

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

Par šo kodu, attēli / pilnīga rokasgrāmata-to-izmantot-webp-image-format_13.jpg tiks ielādēts, ja lietotājs lietos Firefox vai Safari.

WebP attēlu priekšskatīšana

Jūs varat priekšskatīt WebP attēlus pārlūkprogrammā Chrome un Opera. Bet, ja vēlaties to izdarīt lokāli savā datorā, jums būs vajadzīgi daži rīki.

Mac lietotāji var izmantot WebPQuickLook, lai priekšskatītu WebP formāta attēlus, izmantojot funkciju Quick Look (Ātrās izskatīšanas funkcija) (ar izvēlēto vai iezīmēto attēlu, nospiediet atstarpes taustiņu).

Windows lietotājiem WebPCodec parādīs WebP attēlu sīktēlu priekšskatījumu programmā File Explorer. Tiek parādīti gan WebP, gan JPEG ekvivalenti. Atsevišķās atbalstītajās Windows operētājsistēmās (Vista, 7, 8) WebP attēlu var parādīt arī Windows fotoattēlu skatītājā.

Vairāk: ReSCR.it automātiski nodrošina attēlus WeBP formātā, un tas ir pieejams, ja attēlus saglabājat ar MaxCDN. (Lasīt vairāk)

Citas atsauces

• Animēto GIF konvertēšana uz WebP
• Kā darbojas WebP
• WebP izvietošana, izmantojot satura sarunas
• Ātrāka, mazāka un skaistāka Web ar WebP
• Jaunu attēlu formātu izvietošana tīmeklī
• WebP API dokumentācija