Pilnas žiniatinklio vaizdo formato naudojimo vadovas

WebP, arba neoficialiai tariamas kaip nesėkmingas, „Google“ kūrėjų įvestas vaizdo formatas maždaug prieš 5 metus. jei esate interneto dizaineris arba kūrėjas, kuris siekia sumažinti ir optimizuoti vaizdo failo dydį, tai, ką gali atlikti WebP, turėtų šypsotis ant veido.

Trumpai tariant, čia yra keletas svarbių dalykų, kuriuos reikia žinoti apie šį ne taip naują, bet vis dar vėsią vaizdo formatą:

• WebP eina failo plėtiniu .webp.
• „WebP“ priima tiek nuostolių, tiek nuostolių be suspaudimo.
• WebP nuostolingi vaizdai yra potencialiai 25-34% mažesnis nei JPEG.
• „WebP“ nuostolingi vaizdai yra potencialiai 25% mažesnis nei PNG.
• WebP palaiko be nuostolių skaidrumą, t. Y. PNG su alfa kanalu.
• WebP palaiko animaciją. tai yra animuoti GIF.

Trumpai tariant, WebP gali žymiai sumažinti JPEG, GIF, PNG vaizdo failo dydį. Štai „WebP“ atnaujinimas, kurį turėtumėte patikrinti prieš pradėdami eiti į įdomų dalyką.

Eksperimentas

Geriausi dalykai, susiję su pretenzijomis internete, yra tai, kad mes visada galime atlikti eksperimentus, kad patikrintume tikrumą ir autentiškumą. Štai keletas eksperimentų, kuriuos aš padariau norint sužinoti kaip mažas vaizdas gali gauti po to, kai jie yra konvertuoti iš įvairių vaizdo formatų (JPEG, PNG ir GIF) į WebP.

1. JPEG - nuostolingas vaizdas

Štai atsitiktinis JPEG vaizdas, kurį sugriebau iš „Pexels“. Originalus failo dydis - 165kb. ↓

Vaizdas optimizuotas naudojant „JpegMini“. Naujas failo dydis - 101kb. ↓

Galiausiai tas pats vaizdas konvertuojamas į WebP formatą. Galutinis failo dydis - 70kb. ↓

Šoninėje pastaboje: Pateikiami skirtingi failų failai, jei tas pats vaizdas buvo konvertuojamas į šiuos formatus:

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

2. PNG - prarastas vaizdas

Dabar pabandykime su PNG su skaidrumu. (Šaltinis). Originalus failo dydis - 587 kb. ↓

Štai vaizdas, optimizuotas naudojant tinypng. Naujas failo dydis - 278kb. ↓

Galiausiai, vaizdas konvertuojamas į „WebP“ formatą. Galutinis failo dydis - 112kb. ↓

3. Animuotas GIF

Konvertuojant į „WebP“, JPEG atvaizdas buvo nuo 165kb iki 70kb, o PNG atvaizdas nuo 587kb iki 112kb.

Pažiūrėkime, kaip animacinis GIF tarifas:

• Originalus failo dydis - 6,8 MB
• WebP failo dydis - 6.3mb

Santrauka:

Čia yra lentelė, kurioje apibendrinamas visas eksperimentas:

	Nuostolus (JPG)	Lossless (PNG)	Animuoti-GIF
Originalas	165kb	587 kb	6.8mb
Optimizuotas naudojant įrankius	101kb	278kb	-
WebP formatas	70kb	112kb	6.3mb

Nesant daug matematinių skaičiavimų, šie skaičiai rodo didelį failų dydžių sumažinimą ir, vertindami iš atvaizdų, tikrai negalite pasakyti skirtumo aiškumo ir rezoliucijos atžvilgiu. Mažesni, lengvesni failų dydžiai, turintys tą patį vaizdo kokybės lygį, WebP yra tikrai verta ieškoti.

Konvertavimas į „WebP“ su įrankiais

Jei jau esate laive ir norėtumėte pradėti atleisti vaizdus WebP formatu, pasinerkime ir pažiūrėkime, kaip lengvai konvertuoti vaizdus į šį formatą. Visi toliau nurodyti metodai skiriasi priklausomai nuo kontrolės, lengvumo ir patrauklumo. Pasirinkite savo nuodą.

WebPonize dėl „Mac“

WebPonize yra paprasčiausias ir greičiausias būdas konvertuoti vaizdus į „WebP“ formatą „Mac“. Viskas, ką jums reikia padaryti, tai tiesiog vilkite ir nuvilkite vaizdus į „WebPonize“ ir atlikite konversiją. Jūs gausite pradinio failo sumažinimą, prieš dydį, po dydžio ir sumažinimo%. [Atsisiųsti WebPonize]

„Webpconv“ dėl „Windows“

Jei naudojate „Windows“, „Webpconv“ yra programa, kurią turėtumėte įdiegti. Ji taip pat yra nešiojama versija, todėl galite paleisti ją savarankiškai savo „flash“ diske. [Atsisiųsti Webconv]

Konvertavimas komandų eilutėmis

Jei jaučiatės geeky, galbūt norėsite išskirti konversiją naudodami komandines eilutes. cwebp konvertuoja jūsų JPEG, PNG arba TIFF vaizdus į WebP formatą ir dwebp konvertuoja juos atgal į PNG formatą. Pažiūrėkime, kaip tai veikia.

Pastaba: „Mac“ operacinei sistemai „Windows“ ir „Linux“ naudotojams spustelėkite čia.

„MacPorts“ nustatymas „Mac OSX“

Visų pirma, įsitikinkite, kad įdiegta „Xcode“, tada atlikite šiuos veiksmus:

1. Atsisiųskite ir įdiekite „MacPorts“. Jei „MacPorts“ jau įdiegta „MacPorts“, pereikite prie 2 veiksmo.
2. Pradėti Terminalas.
3. Tipas "sudo uosto savęs atnaujinimas„ir paspauskite„ Enter “. Tai atnaujins„ MacPorts “į naujausią versiją.

   

4. Toliau įveskite „sudo port install webp"ir paspauskite Enter. Tai bus įdiegta libwebp (WebP biblioteka).

   

Viskas. Dabar pažiūrėkime kaip konvertuoti vaizdus į „WebP“ naudojant komandų eilutę.

Komandos konvertuoti / grąžinti

Čia pateikiamos komandos:

I - JPEG / PNG vaizdo failų konvertavimas į WebP formatą

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

Pavyzdys:

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

II - „Covert WebP“ vaizdo failai grįžta į PNG

Formatas: dwebp [žiniatinklio pavadinimas] -o [PNG_filename]

Pavyzdys:

dwebp image.webp -o image.png 

Daugiau: Jei perifikuojate kitomis priemonėmis, čia pateikiamos instrukcijos, kaip naudoti Grunt ir Gulp užduotis konvertuoti JPG / PNG failus į WebP.

Konvertuoti naudojant interneto įrankius

Jei nenorite diegti jokių programų, skirtų operacinei sistemai, kad atliktumėte šią užduotį, vietoj to pasirinkite šiuos internetinius įrankius. Štai keletas dalykų, kuriuos aš sužinojau:

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

Patarimas: Jei „Google“ konvertuoti žiniatinklio internetą , tikriausiai rasite daugiau galimybių.

„Photoshop“ papildinys

Jums gali būti malonu žinoti, kad yra „Photoshop“ papildinys, leidžiantis „Photoshop“ išsaugoti vaizdus į „WebP“ formatą. Šis papildinys palaiko „Mac OS X“ (CS 2- CS 6) ir „Windows“ (32 bitų ir 64 bitų). [Atsisiųskite papildinį čia.]

Pastaba: Tik maniau, kad turėtumėte žinoti, kad aš jį išbandžiau „Photoshop CC“. Nebuvo darbo.

Žiniatinklio naršyklės palaikymas

Galiausiai, kalbėkime apie suderinamumą. Šiuo metu galite peržiūrėti WebP formato vaizdus šiuose naršyklėse (ref):

• „Chrome“ / „Chrome“ iOS
• Opera / Opera Mini

Ne taip daug sėkmės „FireFox“ ir „Safari“, kurios vis dar nepalaiko WebP formato. Tačiau galite naudoti „WebPJS“ „JavaScript“ biblioteką konvertuoti „WebP“ vaizdus į „dataURI“ eilutę kliento svetainėje.

Grįžkite į kitus vaizdo formatus

Visada yra naudinga naudoti atsarginę kopiją, kad išvengtumėte vaizdų klaidų dėl nepalaikomų naršyklių. Tokiu atveju atvaizdas bus atvaizdas JPG arba PNG formatu. Štai kaip tai darote.

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

Dėl šio kodo, images / full-guide-to-using-webp-image-format_13.jpg bus įkeltas, jei naudotojas naudos „Firefox“ arba „Safari“.

Vaizdų peržiūra

Galite peržiūrėti „WebP“ vaizdus „Chrome“ ir „Opera“ naršyklėse. Bet jei norite tai padaryti vietoje savo kompiuteryje, jums reikės kelių įrankių.

„Mac“ naudotojai gali naudoti „WebPQuickLook“ norėdami peržiūrėti „WebP“ formato vaizdus naudodami „Quick Look“ funkciją (pasirinktas arba paryškintas vaizdas, paspauskite tarpo klavišą).

„Windows“ naudotojams „WebPCodec“ parodys „WebP“ vaizdų miniatiūrą „File Explorer“. Bus rodomi ir WebP, ir JPEG ekvivalentai. Tam tikrose palaikomose „Windows“ operacinėse sistemose (Vista, 7, 8) „WebP“ vaizdas gali būti rodomas ir „Windows“ nuotraukų peržiūros programoje.

Daugiau: „ReSCR.it“ automatiškai pateikia vaizdus „WeBP“ formatu ir yra prieinami, jei išsaugote vaizdus su „MaxCDN“. (Skaityti daugiau)

Kitos nuorodos

• Animuotų GIF konvertavimas į „WebP“
• Kaip veikia „WebP“
• WebP diegimas naudojant „Accept Content Negotiation“
• Greitesnis, mažesnis ir gražesnis internetas su „WebP“
• Naujų vaizdo formatų diegimas žiniatinklyje
• WebP API dokumentacija