--- title: "WebP-bestand: wat het is en waarom het kleiner is" description: "WebP is een afbeeldingsformaat van Google dat afbeeldingen kleiner opslaat dan JPEG en PNG bij vergelijkbare kwaliteit." canonical: https://www.keurigonline.nl/begrippenlijst/webp last_modified: 2025-12-18 --- [Terug naar begrippenlijst](https://www.keurigonline.nl/begrippenlijst) # WebP WebP is een afbeeldingsformaat van Google dat afbeeldingen kleiner opslaat dan JPEG en PNG bij vergelijkbare kwaliteit. WebP is een afbeeldingsformaat dat Google in 2010 introduceerde om afbeeldingen op websites kleiner te maken. Het kent zowel lossy compressie, waarbij net als bij JPEG wat detail verloren gaat, als lossless compressie zonder kwaliteitsverlies, zoals bij PNG. Een WebP-bestand herken je aan de extensie .webp. Volgens Google zijn lossless WebP-afbeeldingen gemiddeld 26 procent kleiner dan PNG, en lossy WebP-afbeeldingen 25 tot 34 procent kleiner dan JPEG bij vergelijkbare kwaliteit. WebP ondersteunt bovendien transparantie en animatie, dus het kan ook GIF vervangen. De lossy modus is afgeleid van de videocodec VP8, de lossless modus gebruikt een eigen algoritme. Alle grote browsers tonen WebP. Safari volgde als laatste, in september 2020 met iOS 14 en macOS Big Sur. Wil je toch een terugval voor oudere software, dan zet je in een picture-element eerst een WebP-bron en daarna een gewone JPEG. Het nieuwere AVIF presteert vaak nog beter, maar werkt op minder apparaten. Op je hosting kun je sinds WordPress 5.8 WebP-bestanden gewoon uploaden in de mediabibliotheek. Bestaande JPEG- en PNG-bestanden zet je om met de beeldoptimalisatie van LiteSpeed Cache. De plugin stuurt ze naar de dienst QUIC.cloud en maakt WebP- of AVIF-versies als je die optie aanzet. Levert een WebP-versie geen besparing op, dan gooit de plugin hem weg en blijft het origineel in gebruik. ## Geschiedenis Google kondigde WebP aan op 30 september 2010 ([Chromium Blog](https://blog.chromium.org/2010/09/webp-new-image-format-for-web.html)). Het formaat was gebaseerd op de videocodec VP8, die Google na de overname van On2 Technologies in mei 2010 als open source had vrijgegeven. In een eerste test met ongeveer een miljoen afbeeldingen van het web werden de bestanden gemiddeld 39 procent kleiner. Belangrijke mijlpalen: - **30 september 2010:** Google maakt WebP bekend - **November 2011:** WebP krijgt een lossless modus en transparantie ([Wikipedia](https://en.wikipedia.org/wiki/WebP)) - **September 2020:** Safari ondersteunt WebP vanaf iOS 14 en macOS Big Sur, waarmee alle grote browsers het formaat tonen - **2021:** [WordPress 5.8](https://make.wordpress.org/core/2021/06/07/wordpress-5-8-adds-webp-support/) accepteert WebP-uploads in de mediabibliotheek - **November 2024:** [RFC 9649](https://datatracker.ietf.org/doc/html/rfc9649) legt het WebP-formaat vast als IETF-document ## Bronnen 1. **Google for Developers** - [An image format for the Web](https://developers.google.com/speed/webp) 2. **Google for Developers** - [WebP Compression Study](https://developers.google.com/speed/webp/docs/webp_study) 3. **IETF (2024)** - [RFC 9649: WebP Image Format](https://datatracker.ietf.org/doc/html/rfc9649) 4. **MDN Web Docs** - [Image file type and format guide](https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types) 5. **Can I use** - [WebP image format](https://caniuse.com/webp) 6. **LiteSpeed Technologies** - [Image Optimization \| LSCache for WordPress](https://docs.litespeedtech.com/lscache/lscwp/imageopt/) ## Gerelateerde artikelen WordPress 13 jul 2026 [WordPress-afbeeldingen naar WebP omzetten zonder plugin](https://www.keurigonline.nl/blog/wordpress-afbeeldingen-comprimeren-en-webp-omzetten) **Samenvatting: WordPress-afbeeldingen comprimeren en WebP omzetten** WordPress zet geuploade JPEG's en PNG's niet automatisch om naar WebP, ook al ondersteunt het CMS WebP-uploads al sinds versie 5.8. Met het native filter `image_editor_output_format` (core sinds WordPress 6.4/6.5) laat je nieuwe uploads zonder plugin als WebP-bestanden opslaan, gemiddeld 25 tot 34% kleiner dan een vergelijkbare JPEG.[\[2\]](https://developers.google.com/speed/webp/docs/webp_study) Bestaande afbeeldingen converteer je apart via WP-CLI. Hosting 3 jul 2026 [HTTP/2 Server Push & WordPress: wat nu écht werkt (2026)](https://www.keurigonline.nl/blog/http-2-server-push-instellen-voor-wordpress-snelheid) Het verschil met Early Hints: bij preload moet de browser eerst de HTML-pagina zelf binnenhalen voordat hij de preload-hint ziet, dus je wint iets minder tijd dan met Early Hints. Het voordeel is dat het de hoofdresource niet blokkeert en dat je er geen serverversie voor nodig hebt. In WordPress voeg je dit toe via een `wp_head`-hook in het `functions.php`-bestand van je (child-)theme, zonder plugin: ```php function keurigonline_preload_kritieke_resources() { echo '' . "\n"; echo '' . "\n"; } add_action( 'wp_head', 'keurigonline_preload_kritieke_resources', 1 ); ``` Let op het verschil met `preconnect`: `rel=preload` haalt een specifiek bestand alvast op, terwijl `rel=preconnect` alleen de DNS-lookup en TCP/TLS-verbinding met een externe host alvast opzet (handig voor bijvoorbeeld een lettertypen-CDN), zonder het bestand zelf te downloaden. Gebruik ze samen wanneer je kritieke resources van een extern domein laadt. SEO 2 jul 2026 [Google algoritme update voorbereiding: stresstest 2026](https://www.keurigonline.nl/blog/google-algoritme-update-voorbereiding) LCP is de metric die de meeste impact heeft: hij meet hoe snel het grootste zichtbare element op je pagina laadt. Een LCP boven 2,5 seconden op mobiel vertelt Google dat jouw mobiele gebruikerservaring onvoldoende is. Met meer dan de helft van alle zoekopdrachten afkomstig van mobiele apparaten is dit geen randgeval. ### Drie directe maatregelen voor een betere LCP 1. **Afbeeldingen optimaliseren en laadstrategie scheiden.** De hero-afbeelding is op de meeste pagina's het LCP-element. Zet de hero in WebP-formaat, comprimeer tot onder 100 KB en voeg `loading="eager"` toe aan dit element (juist geen lazy-load). Voeg `loading="lazy"` toe aan alle afbeeldingen lager op de pagina. 2. **Kritische CSS inlinen.** Externe stylesheets blokkeren de render. Extraheer de CSS die nodig is voor de bovenste viewport en zet die inline in de ``. Laad de rest asynchroon. Dit verlaagt de Time to First Paint direct.