Komplet guide til brug af WebP-billedformat

WebP, eller uofficielt udtalt som weppy, er et billedformat, der blev introduceret af Google Developers for omkring 5 år siden. hvis du er webdesigner eller en udvikler, der stræber efter at reducere og optimere din billedfilstørrelse, hvad WebP er i stand til, skal du lægge et smil på dit ansigt.

Kort sagt, her er nogle af de vigtige ting, du har brug for at vide om dette ikke-så-nye-men-stadig-kølige billedformat:

• WebP går ved filudvidelsen af ​​.webp.
• WebP vedtager både lossy og lossless kompression.
• WebP lossy billeder er potentielt 25-34% mindre end JPEG.
• WebP tabsløse billeder er potentielt 25% mindre i forhold til PNG.
• WebP understøtter lossless gennemsigtighed, dvs. PNG med alfakanal.
• WebP understøtter animation. dvs. animerede GIF'er.

I en nøddeskal kan WebP betydeligt reducere JPEG, GIF, PNGs billedfilstørrelse. Her er en opdatering på WebP, du bør tjekke ud, før vi går ind i de sjove ting.

Et eksperiment

De bedste ting ved krav på nettet er, at vi altid kan køre eksperimenter for at tjekke sandheden og ægtheden. Her er nogle eksperimenter, jeg gjorde for at finde ud af hvor lille et billede potentielt kan få efter at de er konverteret fra forskellige billedformater (JPEG, PNG og GIF) til WebP.

1. JPEG - Lossy Image

Her er et tilfældigt JPEG-billede, jeg greb fra Pexels. Original filstørrelse - 165kb. ↓

Billedet er optimeret med JpegMini. Ny filstørrelse - 101kb. ↓

Endelig konverteres det samme billede til WebP-format. Endelig filstørrelse - 70kb. ↓

På en side note: Her er de forskellige filstørrelser, hvis det samme billede blev konverteret til følgende formater:

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

2. PNG - Lossless Image

Lad os nu prøve med PNG med gennemsigtighed. (Kilde). Original filstørrelse - 587kb. ↓

Her er billedet optimeret med tinypng. Ny filstørrelse - 278kb. ↓

Og endelig konverteres billedet til WebP-format. Endelig filstørrelse - 112kb. ↓

3. Animeret GIF

Når konverteret til WebP, gik et JPEG-billede fra 165kb til 70kb, mens et PNG-billede gik fra 587kb til 112kb.

Lad os se, hvordan en animeret GIF billetpris:

• Original filstørrelse - 6.8mb
• WebP filstørrelse - 6.3mb

Resumé:

Her er et bord for at opsummere hele eksperimentet:

	Lossy (JPG)	Lossless (PNG)	Animeret-GIF
Original	165kb	587kb	6.8mb
Optimeret med værktøjer	101kb	278kb	-
WebP-format	70kb	112kb	6,3MB

Uden at bo meget i matematiske beregninger, viser disse tal en væsentlig reduktion af filstørrelser, og man kan ikke rigtig fortælle forskellen med hensyn til klarhed og opløsning, når man bedømmer billederne. Mindre, lettere filstørrelser med samme billedkvalitet, WebP er absolut værd at se på.

Konvertering til WebP med værktøjer

Hvis du allerede er om bord og gerne vil begynde at frigive billeder i WebP-format, lad os dykke ind og se på, hvordan du nemt kan konvertere dine billeder til dette format. Alle nedenstående metoder varierer med hensyn til kontrol, brugervenlighed og overbevisning. Vælg dit gift.

WebPonize til Mac

WebPonize er nok den enkleste og hurtigste måde at konvertere billeder til WebP-format på Mac. Alt du skal gøre er at trække og slip dine billeder til WebPonize, og det vil gøre konverteringen. Du modtager ouput, før-størrelse, efter-størrelse og% af reduktion af den oprindelige fil. [Download WebPonize]

Webpconv til vinduer

Hvis du kører Windows, er Webpconv den app, du skal installere. Det kommer også i bærbar version, så du kan køre det uafhængigt af dit flashdrev. [Download Webconv]

Konvertering med kommandolinjer

Hvis du føler dig geeky, kan du sikkert udrydde konverteringen ved hjælp af kommandolinjer. cwebp konverterer dine JPEG-, PNG- eller TIFF-billeder til WebP-format og dwebp konverterer dem tilbage til PNG-format. Lad os se, hvordan dette virker.

Bemærk: Følgende vejledning det til Mac OS X. For Windows og Linux brugere, klik her.

Konfiguration af MacPorts på Mac OSX

Først skal du sørge for at have Xcode installeret, og følg disse trin:

1. Download og installer MacPorts. Hvis du allerede har MacPorts installeret på din Mac, skal du fortsætte til trin 2.
2. Lancering Terminal.
3. Type "sudo port selfupdate"og tryk på Enter. Dette opdaterer dine MacPorts til den nyeste version.

   

4. Skriv derefter "sudo port installer webp"og tryk Enter. Dette vil installere libwebp (WebP Library).

   

Det er det. Lad os nu se på Sådan konverteres billeder til WebP ved hjælp af kommandolinjen.

Kommandoer til Konverter / Retur

Her er kommandoer til:

I - Konverter JPEG / PNG-billedfiler til WebP-format

Format: cwebp -q [image_quality] [JPEG / PNG_filnavn] -o [WebP_filnavn]

Eksempel:

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

II - Skjulte WebP-billedfiler tilbage til PNG

Format: dwebp [WebP_filnavn] -o [PNG_filnavn]

Eksempel:

dwebp image.webp -o image.png 

Mere: Hvis du perfer conversioni på andre måder, er der instruktioner til brug af Grunt og Gulp-opgaver for at konvertere JPG / PNG-filer til WebP.

Konverter med Online-værktøjer

Hvis du ikke ser på at installere programmer på dit operativsystem for at udføre denne opgave, skal du vælge disse onlineværktøjer i stedet. Her er et par, jeg er kommet til at kende:

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

Tip: Hvis du google konvertere webp online , du vil sikkert finde flere muligheder.

Photoshop-plugin

Du kan være glad for at vide, at der også er et Photoshop-plugin, der giver dig mulighed for at gemme billeder til WebP-format via Photoshop. Dette plugin understøtter Mac OS X (CS 2- CS 6) og Windows (32 bit og 64 bit). [Download plugin her.]

Bemærk: Bare troede du skulle vide, at jeg prøvede det på Photoshop CC. Fungerede ikke der.

WebP Browser Support

Endelig, lad os tale om kompatibilitet. I øjeblikket kan du se WebP-formatbilleder på følgende browsere (ref):

• Chrome / Chrome til iOS
• Opera / Opera Mini

Ikke så meget held til FireFox og Safari, som stadig ikke understøtter WebP-format indbygget. Du kan dog bruge WebPJS Javascript bibliotek til konvertere WebP-billeder til dataURI-streng på klientsiden.

Tilbage til andre billedformater

Det er altid en god idé at bruge en tilbagesendelse for at undgå at vise billedfejl på grund af ikke-understøttede browsere. I dette tilfælde vil tilbagesendelsen være til billedet i JPG eller PNG format. Sådan gør du det.

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

For denne kode, images / komplet-guide-til-brug-WebP-image-format_13.jpg vil blive indlæst, hvis brugeren brugte Firefox eller Safari.

Forhåndsvisning af WebP-billeder

Du kan forhåndsvise WebP-billeder på Chrome og Opera browsere. Men hvis du vil gøre det lokalt på din maskine, skal du bruge et par værktøjer.

Mac-brugere kan bruge WebPQuickLook til at forhåndsvise WebP-formatbilleder ved hjælp af Quick Look-funktionen (med billedet valgt eller markeret, tryk på mellemrumstasten).

For Windows-brugere vil WebPCodec vise et miniaturebillede af WebP-billeder i File Explorer. Både WebP og JPEG-ækvivalenterne vises. På visse understøttede Window OS (Vista, 7, 8) kan WebP-billedet også vises på Windows Photo Viewer.

Mere: ReSCR.it leverer billeder automatisk i WeBP-format, og det er tilgængeligt, hvis du gemmer dine billeder med MaxCDN. (Læs mere)

Yderligere henvisninger

• Konvertere animeret GIF til WebP
• Hvordan WebP fungerer
• Implementere WebP via Accepter indholdsforhandling
• Hurtigere, mindre og smukkere web med WebP
• Implementere nye billedformater på internettet
• WebP API-dokumentation