Volledige gids voor het gebruik van WebP Image Format
WebP, of onofficieel uitgesproken als Weppy, is een beeldformaat dat ongeveer 5 jaar geleden werd 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 voorbij aan de extensie van .webp.
- WebP gebruikt zowel lossy als lossless compressie.
- WebP-lossy-afbeeldingen zijn mogelijk 25-34% kleiner dan JPEG .
- WebP lossless-afbeeldingen zijn mogelijk 25% kleiner in vergelijking met PNG .
- WebP ondersteunt verliesloze transparantie, dwz 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 worden 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 - 165 kb. ↓



- GIF - 285 kb
- 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 . ↓

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

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
Overzicht:
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 vermindering van de 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 wat 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 afmeting na en de reductie van het oorspronkelijke bestand. [WebPonize downloaden]

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

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 naar PNG-indeling. Laten we kijken hoe dit werkt.
Opmerking: de volgende handleiding is bedoeld voor Mac OS X. Klik hier voor Windows- en Linux-gebruikers.
MacPorts instellen op Mac OSX
Zorg er eerst voor dat Xcode is geïnstalleerd.
( 1 ) MacPorts downloaden en installeren. Als je MacPorts al op je Mac hebt geïnstalleerd, ga je verder met stap 2.
( 2 ) Terminal lanceren.
( 3 ) Typ " sudo port selfupdate " en druk op Enter. Hiermee worden je MacPorts bijgewerkt naar de nieuwste versie.


Opdrachten om te converteren / terugzetten
Hier zijn de commando's om:
I - JPEG / PNG-afbeeldingsbestanden converteren naar WebP-indeling
Indeling : cwebp -q [image_quality] [JPEG / PNG_bestandsnaam] -o [WebP_bestandsnaam]
Voorbeeld :
cwebp -q 80 example.png -o example.webp
II - Verborgen WebP-afbeeldingsbestanden terug naar PNG
Indeling : dwebp [WebP_filename] -o [PNG_bestandsnaam]
Voorbeeld :
dwebp image.webp -o image.png
Meer : als u conversie via andere middelen uitvoert, zijn 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 u Google convert webp online
, vindt u waarschijnlijk meer opties.
Photoshop-plug-in
U bent misschien blij om te weten dat er ook een Photoshop-invoegtoepassing is waarmee u afbeeldingen kunt opslaan in WebP-indeling via Photoshop. Deze plug-in ondersteunt Mac OS X (CS 2- CS 6) en Windows (32 bit & 64 bit). [Download hier de plug-in.]
Opmerking : ik dacht dat je zou moeten weten dat ik het heb geprobeerd met Photoshop CC. Werkte daar niet.

Laten we tenslotte praten over compatibiliteit. Momenteel kunt u WebP-formaatafbeeldingen bekijken in de volgende browsers (ref):
- Chrome / Chrome voor iOS
- Opera / Opera Mini

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 worden img / tech-design-tips / 697 / complete-guide-using-webp-image-format-13.jpg geladen als de gebruiker Firefox of Safari gebruikte.
Een voorbeeld van WebP-afbeeldingen bekijken
U kunt een voorbeeld van WebP-afbeeldingen bekijken in Chrome en Opera browers. 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, drukt u op de spatiebalk).


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

10 Beste iPhone-trainingsapps voor hardlopers
Als je het gevoel hebt dat je je nieuwjaarsresolutie hebt verraden om de sportschool te verslaan en / of (weer) af te vallen, neem dan je hart dat je jezelf gemakkelijk kunt verzilveren door nu te beginnen. En wat is een betere manier om de weg op te gaan dan te rennen! Het is de eenvoudigste vorm van lichaamsbeweging, omdat er geen lidmaatschapskosten of extra uitrusting bij betrokken zijn - alles wat je nodig hebt is een paar loopschoenen en een gewillig hart

Hoe een eenvoudige Auto-Login Bot met Python en Selenium te bouwen
Automatisering is ongetwijfeld een van de meest begeerde vaardigheden die een programmeur kan bezitten. Automatisering wordt meestal gebruikt voor taken die repetitief, saai, tijdrovend of anderszins inefficiënt zijn zonder het gebruik van een script.Met webautomatisering kunt u gemakkelijk een bot maken om verschillende taken op het web uit te voeren, bijvoorbeeld om concurrerende hoteltarieven op internet te controleren en de beste prijs te bepalen.