Mājas lapa » Web dizains » Pilnīga rokasgrāmata par WebP attēlu formāta lietošanu

    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