Volledige gids voor het gebruik van WebP Image Format

WebP, of onofficieel uitgesproken als weppy, is een afbeeldingsindeling die ongeveer 5 jaar geleden is geïntroduceerd door Google Developers. als u een webontwerper bent, of een ontwikkelaar die ernaar streeft uw beeldbestandsgrootte te verkleinen en optimaliseren, moet WebP in staat zijn om een glimlach op uw gezicht te toveren.

In het kort, hier zijn enkele van de belangrijke dingen die je moet weten over dit niet-zo-nieuwe-maar-nog-coole beeldformaat:

WebP gaat langs de extensie van .webp.
WebP gebruikt zowel lossy als lossless compressie.
WebP-lossy-afbeeldingen zijn mogelijk 25-34% kleiner dan JPEG.
WebP-verliesloze afbeeldingen zijn mogelijk 25% kleiner in vergelijking met PNG.
WebP ondersteunt verliesloze transparantie, d.w.z. PNG met alfakanaal.
WebP ondersteunt animatie. dat wil zeggen geanimeerde GIF's.

In een notendop is WebP in staat om de bestandsgrootte van JPEG, GIF, PNG's aanzienlijk te verkleinen. Hier is een opfriscursus op WebP die je zou moeten checken voordat we ingaan op de leuke dingen.

Een experiment

Het beste aan claims op het web is dat we altijd experimenten kunnen uitvoeren om de waarachtigheid en authenticiteit te controleren. Hier zijn enkele experimenten die ik heb gedaan om erachter te komen hoe klein een afbeelding kan krijgen nadat ze zijn geconverteerd van verschillende afbeeldingsindelingen (JPEG, PNG en GIF) naar WebP.

1. JPEG - verliesbestand

Hier is een willekeurige JPEG-afbeelding die ik heb gepakt van Pexels. Oorspronkelijke bestandsgrootte - 165KB. ↓

Beeld is geoptimaliseerd met JpegMini. Nieuwe bestandsgrootte - 101kb. ↓

Ten slotte wordt dezelfde afbeelding geconverteerd naar WebP-indeling. Uiteindelijke bestandsgrootte - 70kb. ↓

Aan een kanttekening: Hier zijn de verschillende bestandsformaten als dezelfde afbeelding is geconverteerd naar de volgende indelingen:

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

2. PNG - Lossless Image

Laten we het nu eens proberen met PNG met transparantie. (Bron). Oorspronkelijke bestandsgrootte - 587kb. ↓

Hier is de afbeelding geoptimaliseerd met tinypng. Nieuwe bestandsgrootte - 278kb. ↓

En als laatste, de afbeelding omgezet naar WebP-formaat. Uiteindelijke bestandsgrootte - 112kb. ↓

3. Geanimeerde GIF

Bij conversie naar WebP ging een JPEG-afbeelding van 165 kb naar 70 kb, terwijl een PNG-afbeelding van 587 kb naar 112 kb ging.

Laten we eens kijken hoe een geanimeerde GIF-kaart het doet:

Oorspronkelijke bestandsgrootte - 6.8mb
WebP-bestandsgrootte - 6,3 MB

Samenvatting:

Hier is een tabel om het hele experiment samen te vatten:

	Lossy (JPG)	Lossless (PNG)	Geanimeerde GIF
origineel	165KB	587kb	6.8mb
Geoptimaliseerd met tools	101kb	278kb	-
WebP-indeling	70kb	112kb	6.3MB

Zonder veel op wiskundige berekeningen te letten, geven die cijfers een aanzienlijke reductie van bestandsgroottes aan, en aan de hand van de afbeeldingen kan je het verschil niet duidelijk onderscheiden in termen van duidelijkheid en resolutie. Kleinere, lichtere bestandsgroottes met hetzelfde niveau van beeldkwaliteit, WebP is zeker de moeite van het bekijken waard.

Converteren naar WebP met hulpmiddelen

Als u al aan boord bent en wilt beginnen met het vrijgeven van afbeeldingen in WebP-indeling, laten we ons gaan verdiepen in en bekijken hoe u uw afbeeldingen gemakkelijk naar deze indeling kunt converteren. Alle onderstaande methoden variëren in termen van bedieningselementen, gebruiksgemak en betrouwbaarheid. Kies je gif.

WebPonize voor Mac

WebPonize is waarschijnlijk de eenvoudigste en snelste manier om afbeeldingen naar het WebP-formaat op de Mac te converteren. Het enige dat u hoeft te doen, is slepen en neerzetten van uw afbeeldingen naar WebPonize en het zal de conversie uitvoeren. U ontvangt de uitgang, de grootte van de vorige grootte, de naafmeting en het% reductie van het originele bestand. [WebPonize downloaden]

Webpconv voor ramen

Als u Windows gebruikt, is Webpconv de app die u moet installeren. Het komt ook in draagbare versie, zodat u het zelfstandig kunt uitvoeren op uw flash drive. [Webconv downloaden]

Converteren met opdrachtregels

Als u zich nerdy voelt, wilt u waarschijnlijk de conversie uitvoeren met behulp van opdrachtregels. cwebp converteert uw JPEG-, PNG- of TIFF-afbeeldingen naar het WebP-formaat en dwebp converteert ze terug naar PNG-indeling. Laten we kijken hoe dit werkt.

Notitie: Hieronder wordt het voor Mac OS X beschreven. Klik hier voor Windows- en Linux-gebruikers.

MacPorts instellen op Mac OSX

Zorg er eerst voor dat Xcode is geïnstalleerd en voer de volgende stappen uit:

Download en installeer MacPorts. Als je MacPorts al op je Mac hebt geïnstalleerd, ga je verder met stap 2.
Lancering Terminal.
Type "sudo port zelfupdate"en druk op enter. Hiermee worden uw MacPorts bijgewerkt naar de nieuwste versie.
Typ vervolgens "sudo port webp installeren"en druk op Enter. Dit zal worden geïnstalleerd libwebp (WebP-bibliotheek).

Dat is het. Laten we nu eens kijken hoe afbeeldingen naar WebP converteren via de opdrachtregel.

Opdrachten om te converteren / terugzetten

Hier zijn de commando's om:

I - JPEG- / PNG-afbeeldingsbestanden converteren naar WebP-indeling

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

Voorbeeld:

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

II - Verborgen WebP-afbeeldingsbestanden terug naar PNG

Formaat: dwebp [WebP_filename] -o [PNG_bestandsnaam]

Voorbeeld:

dwebp image.webp -o image.png

Meer: Als u conversie via andere middelen uitvoert, vindt u hier instructies voor het gebruik van Grunt en Gulp-taken om JPG / PNG-bestanden naar WebP te converteren.

Converteren met online hulpmiddelen

Als u niet op zoek bent naar het installeren van applicaties op uw besturingssysteem om deze taak uit te voeren, kiest u in plaats daarvan voor deze online tools. Hier zijn een paar die ik heb leren kennen:

Online-converter.com
Webp-convertor.com
Zamzar

Tip: Als je googelt webp online converteren , je zult waarschijnlijk meer opties vinden.

Photoshop-plug-in

U bent misschien blij om te weten dat er ook een Photoshop-invoegtoepassing is waarmee u afbeeldingen via Photoshop in WebP-indeling kunt opslaan. Deze plug-in ondersteunt Mac OS X (CS 2- CS 6) en Windows (32 bit & 64 bit). [Download hier de plug-in.]

Notitie: Ik dacht dat je zou moeten weten dat ik het heb geprobeerd met Photoshop CC. Werkte daar niet.

WebP Browser-ondersteuning

Ten slotte laten we het hebben over compatibiliteit. Momenteel kunt u afbeeldingen in WebP-indeling bekijken in de volgende browsers (ref):

Chrome / Chrome voor iOS
Opera / Opera Mini

Niet zo veel geluk voor FireFox en Safari, die het WebP-formaat nog steeds niet standaard ondersteunen. U kunt echter de WebPJS Javascript-bibliotheek gebruiken voor WebP-afbeeldingen omzetten in gegevensURI-tekenreeks op de clientsite.

Ga terug naar andere beeldformaten

Het is altijd een goed idee om een fallback te gebruiken om te voorkomen dat beeldfouten worden weergegeven vanwege niet-ondersteunde browsers. In dit geval is de fallback naar de afbeelding in JPG- of PNG-indeling. Dit is hoe je het doet.

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

Voor deze code, images / compleet-guide-to-gebruik-webp-image-format_13.jpg wordt geladen als de gebruiker Firefox of Safari heeft gebruikt.

Een voorbeeld van WebP-afbeeldingen bekijken

U kunt een voorbeeld van WebP-afbeeldingen bekijken in Chrome- en Opera-browsers. Maar als u het lokaal op uw machine wilt doen, heeft u een paar hulpmiddelen nodig.

Mac-gebruikers kunnen WebPQuickLook gebruiken om afbeeldingen in WebP-indeling te bekijken met de functie Snel bekijken (met de geselecteerde of gemarkeerde afbeelding, druk op de spatiebalk).

Voor Windows-gebruikers geeft WebPCodec een miniatuurvoorbeeld van WebP-afbeeldingen weer in Verkenner. Zowel de WebP- als JPEG-equivalenten worden getoond. Op bepaalde ondersteunde Window OS (Vista, 7, 8) kan de WebP-afbeelding ook op de Windows Photo Viewer worden getoond.

Meer: ReSCR.it levert automatisch afbeeldingen in WeBP-formaat en is beschikbaar als u uw afbeeldingen opslaat met MaxCDN. (Lees verder)

Verdere referenties

Geanimeerde GIF converteren naar WebP
Hoe WebP werkt
WebP gebruiken via acceptatie van contentonderhandeling
Sneller, kleiner en mooier web met WebP
Nieuwe afbeeldingsindelingen implementeren op internet
WebP API-documentatie