Komplett guide till användning av WebP Image Format

WebP, eller oofficiellt uttalad som weppy, är ett bildformat som introducerades av Google Developers för omkring 5 år sedan. om du är webbdesigner eller en utvecklare som strävar efter att minska och optimera din bildfilstorlek, vad WebP kan klara av, bör du ha ett leende på ditt ansikte.

I korthet, här är några av de viktiga sakerna du behöver veta om detta inte-så-nya men ändå svala bildformat:

• WebP går av filtillägget av .webp.
• WebP adopterar både lossy och förlustfri komprimering.
• WebP-lossande bilder är potentiellt 25-34% mindre än JPEG.
• WebP förlustfria bilder är potentiellt 25% mindre jämfört med PNG.
• WebP stöder förlustfri transparens, dvs PNG med alfakanal.
• WebP stöder animering. d.v.s. animerade GIFs.

I ett nötskal kan WebP betydligt minska JPEG, GIF, PNGs bildfilstorlek. Här är en uppdatering på WebP du borde kolla innan vi går in i de roliga grejerna.

Ett experiment

De bästa sakerna med påståenden på webben är att vi alltid kan köra experiment för att kontrollera sanningen och äktheten. Här är några experiment som jag gjorde för att ta reda på hur liten en bild kan få efter att de har konverterats från olika bildformat (JPEG, PNG och GIF) till WebP.

1. JPEG - Lossy Image

Här är en slumpmässig JPEG-bild som jag grep från Pexels. Original filstorlek - 165 KB. ↓

Bilden optimeras med JpegMini. Ny filstorlek - 101kb. ↓

Slutligen konverteras samma bild till WebP-format. Slutlig filstorlek - 70kb. ↓

På en sidotal: Här är de olika filformaten om samma bild konverterades till följande format:

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

2. PNG - Lossless Image

Nu, låt oss försöka med PNG med öppenhet. (Källa). Original filstorlek - 587kb. ↓

Här är bilden optimerad med tinypng. Ny filstorlek - 278kb. ↓

Och slutligen omvandlades bilden till WebP-format. Slutlig filstorlek - 112kb. ↓

3. Animerad GIF

När den konverterades till WebP, gick en JPEG-bild från 165kb till 70kb, medan en PNG-bild gick från 587kb till 112kb.

Låt oss se hur en animerad GIF kostar:

• Original filstorlek - 6.8mb
• WebP-filstorlek - 6.3mb

Sammanfattning:

Här är en tabell för att sammanfatta hela experimentet:

	Lossy (JPG)	Lossless (PNG)	Animerad-GIF
Original	165 KB	587kb	6,8MB
Optimerad med verktyg	101kb	278kb	-
WebP-format	70kb	112kb	6.3mb

Utan att bo mycket i matematiska beräkningar indikerar dessa siffror en väsentlig minskning av filstorlekarna och dömande från bilderna kan du inte riktigt säga skillnaden när det gäller tydlighet och upplösning. Mindre, lättare filstorlekar med samma bildkvalitet, WebP är definitivt värt att titta på.

Konvertera till WebP med verktyg

Om du redan är ombord och vill börja släppa bilder i WebP-format, låt oss dyka in och titta på hur du enkelt kan konvertera dina bilder till det här formatet. Alla metoder som nämns nedan varierar när det gäller kontroller, användarvänlighet och övertygelse. Välj ditt gift.

WebPonize för Mac

WebPonize är förmodligen det enklaste och snabbaste sättet att konvertera bilder till WebP-format på Mac. Allt du behöver göra är att dra och släppa dina bilder i WebPonize och det gör konverteringen. Du kommer att få ouput, före storlek, efter storlek och% av minskningen av originalfilen. [Ladda ner WebPonize]

Webpconv för Windows

Om du kör Windows är Webpconv den app du ska installera. Det kommer också i bärbar version så att du kan köra det självständigt på din flash-enhet. [Hämta Webconv]

Konvertering med kommandorader

Om du känner dig nörd, kan du förmodligen vilja exkludera konverteringen med kommandoraden. cwebp konverterar dina JPEG-, PNG- eller TIFF-bilder till WebP-format och dwebp konverterar dem tillbaka till PNG-format. Låt oss se hur det här fungerar.

Notera: Följande guider det för Mac OS X. För Windows och Linux-användare, klicka här.

Konfigurera MacPorts på Mac OSX

Först upp, se till att du har Xcode installerat, följ sedan dessa steg:

1. Hämta och installera MacPorts. Om du redan har MacPorts installerade på din Mac, fortsätt till steg 2.
2. Lansera Terminal.
3. Skriv "sudo port selfupdate"och klicka på Enter. Detta uppdaterar MacPorts till den senaste versionen.

   

4. Skriv sedan "sudo port installera webp"och tryck på Enter. Detta kommer att installeras libwebp (WebP Library).

   

Det är allt. Låt oss nu ta en titt på hur man konverterar bilder till WebP med kommandoraden.

Kommandon för att konvertera / återgå

Här är kommandon till:

I - Konvertera JPEG / PNG-bildfiler till WebP-format

Formatera: cwebp -q [image_quality] [JPEG / PNG_filnamn] -o [WebP_filnamn]

Exempel:

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

II - Dolda WebP-bildfiler tillbaka till PNG

Formatera: dwebp [WebP_filnamn] -o [PNG_filnamn]

Exempel:

dwebp image.webp -o image.png 

Mer: Om du perferar conversioni på annat sätt, här är instruktioner för att använda Grunt och Gulp-uppgifter för att konvertera JPG / PNG-filer till WebP.

Konvertera med onlineverktyg

Om du inte tittar på att installera några program på ditt operativsystem för att utföra den här uppgiften väljer du istället dessa onlineverktyg. Här är några som jag har kommit att veta:

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

Tips: Om du google konvertera webp på nätet , du kommer säkert hitta fler alternativ.

Photoshop-plugin

Du kan vara glad att veta att det också finns ett Photoshop-plugin som låter dig spara bilder till WebP-format via Photoshop. Denna plugin stöder Mac OS X (CS 2- CS 6) och Windows (32 bitar och 64 bitar). [Ladda ner plugin här.]

Notera: Tänk bara att du borde veta att jag försökte det på Photoshop CC. Fungerade inte där.

WebP Browser Support

Slutligen, låt oss prata om kompatibilitet. För närvarande kan du visa WebP-formatbilder på följande webbläsare (ref):

• Chrome / Chrome för iOS
• Opera / Opera Mini

Inte så mycket tur för FireFox och Safari, som fortfarande inte stöder WebP-format. Du kan dock använda WebPJS Javascript-bibliotek till konvertera WebP-bilder till dataURI-sträng på klientens webbplats.

Återgå till andra bildformat

Det är alltid en bra idé att använda en återgång för att undvika bildfel på grund av ostödda webbläsare. I det här fallet kommer nedgången att vara i bilden i JPG- eller PNG-format. Så här gör du det.

  källa srcset = "example.webp 1x" type = "image / webp">   

För den här koden, images / komplett-guide-till-hjälp-WebP-image-format_13.jpg kommer att laddas om användaren använde Firefox eller Safari.

Förhandsgranska WebP-bilder

Du kan förhandsgranska WebP-bilder på Chrome- och Opera-browsare. Men om du vill göra det lokalt på din maskin, behöver du några verktyg.

Mac-användare kan använda WebPQuickLook för att förhandsgranska WebP-formatbilder med funktionen Quick Look (med den markerade eller markerade bilden, tryck på mellanslagstangenten).

För Windows-användare kommer WebPCodec att visa en miniatyrförhandsvisning av WebP-bilder i File Explorer. Både WebP- och JPEG-ekvivalenterna visas. På vissa stödda Windows-operativsystem (Vista, 7, 8) kan WebP-bilden också visas i Windows Photo Viewer.

Mer: ReSCR.it levererar bilder i WeBP-format automatiskt och det är tillgängligt om du lagrar dina bilder med MaxCDN. (Läs mer)

Ytterligare referenser

• Konvertera animerad GIF till WebP
• Hur WebP fungerar
• Implementera WebP via Acceptera Content Negotiation
• Snabbare, mindre och vackrare webb med WebP
• Använda nya bildformat på webben
• WebP API-dokumentation