Techniek · Compressie · Image Formats
Afbeeldingen comprimeren.
Afbeeldingen comprimeren zonder kwaliteitsverlies: 4 moderne formats (WebP, AVIF, JPEG, PNG) vergeleken, 6 compressie-tools voor verschillende workflows, en mijn 5-stappen optimalisatie-aanpak.
01 — formats4 image-formats vergeleken — wat past wanneer?
De keuze van het juiste image-format is belangrijker dan compressie-instellingen. Een verkeerd format = onnodig grote bestanden zelfs na compressie. Hieronder de vier hoofdformats die in 2026 relevant zijn en hun ideale use-cases. Voor breder context op image-optimalisatie zie lazy loading voor afbeeldingen.
Bestandsgrootte · zelfde afbeelding, 4 formatsvisuele vergelijking
Voorbeeld — identieke foto in verschillende formats:
PNG (lossless)~2400 KB · 100%
JPEG (Q85)~1488 KB · 62%
WebP (Q85)~912 KB · 38%
AVIF (Q60)~600 KB · 25%
Indicatieve verhoudingen — actuele compressie hangt af van inhoud (foto met veel detail vs vlakke graphic). Belangrijk: moderne formats (WebP, AVIF) zijn typisch 40-75% kleiner dan PNG/JPEG bij vergelijkbare visuele kwaliteit.
De 4 formats in detail:
Format 01
PNG (lossless)
Voor graphics met transparantie of vlakke kleuren. Logo's, screenshots, line-art. Lossless = geen kwaliteitsverlies maar grote bestanden. Niet voor fotografie.
.pngLosslessTransparency: ✓Compatible: 100%
Format 02
JPEG (lossy)
Klassieker voor fotografie. Goede compressie voor foto's, maar geen transparantie. Quality 80-85 is sweet spot — geen zichtbaar verlies bij grote compressie-winst.
.jpg/.jpegLossyTransparency: ✗Compatible: 100%
Format 03
WebP (modern standaard)
Sinds 2020 in alle browsers ondersteund. 25-50% kleiner dan JPEG/PNG. Ondersteunt zowel lossy als lossless. Transparantie net als PNG. Default voor 2026.
.webpBothTransparency: ✓Compatible: 95%+
Format 04
AVIF (state-of-the-art)
Beste compressie ratio op de markt. 40-75% kleiner dan JPEG. Ondersteund in Chrome, Firefox, Safari 16+. Encoding-tijd nog steeds langzaam — soms 10-100x JPEG. Voor maximale optimalisatie.
.avifBothTransparency: ✓Compatible: 90%+
02 — workflow5-stappen optimalisatie-workflow
Hieronder mijn praktische 5-stappen-aanpak voor image-optimalisatie. Werkt voor zowel WordPress (via plugin) als custom builds (via build-script). Resulteert typisch in 50-70% kleinere images zonder zichtbaar kwaliteitsverlies.
5 stappen · image-optimalisatieworkflow
01
Bron-afbeelding op juiste resolutie
Foto's worden vaak in 4000px+ aangeleverd. Voor hero-images max 2000px breed, voor content-images 1200px, voor thumbnails exact display-grootte. Resize vóór compressie scheelt 40-80% bytes.
02
Verwijder EXIF + metadata
Camera-data, GPS, software-info voegt bytes toe zonder waarde. Tools zoals ImageOptim, jpegoptim, ExifTool verwijderen dit. Bespaart 5-15% bytes en beschermt privacy (geen GPS-locaties in foto's).
03
Quality-instelling correct kiezen
JPEG: Q80-85 = sweet spot. Onder Q70 zichtbare artefacten. WebP: Q75-85. AVIF: Q55-70 (AVIF gebruikt agressievere algoritmes, lagere quality-getallen). Test visueel — niet alleen vertrouwen op default.
04
Convert naar moderne formats (WebP/AVIF)
Squoosh.app (free, browser-based) voor handmatige conversie. Bulk via CLI: cwebp, avifenc. WordPress: Imagify, ShortPixel, EWWW plugins. Lever beide formats via picture-element voor fallback.
05
CDN met automatische optimalisatie
Cloudflare Polish (Pro plan), Bunny Optimizer, ImageKit, Cloudinary. Detecteert device + format-support + serveert optimale variant. Eenmalig configureren, daarna automatisch. Aanbevolen voor sites met veel images.
03 — faqVeelgestelde vragen
FAQ · 3 vragenklik om te openen
Welke tool gebruik ik voor handmatige image-optimalisatie?›
Tool-keuze hangt af van platform en volume. Zes opties voor verschillende situaties. (1) Squoosh.app (gratis, web-based). Google's open-source tool. Real-time preview van compressie-resultaat. Ondersteunt WebP, AVIF, JPEG, PNG. Mijn first-choice voor single images of testing. (2) ImageOptim (macOS, gratis). Drag-and-drop bulk-optimalisatie. Lossless EXIF-removal. Werkt op JPEG, PNG, GIF, SVG. Voor Mac-gebruikers die snel meerdere images willen optimaliseren. (3) TinyPNG / TinyJPG. Web-based, gratis tot 20 images per maand. Hoge kwaliteit lossy compressie. API beschikbaar voor automation. Goed voor occasional optimalisatie. (4) Adobe Photoshop "Export As". Voor designers al in Photoshop-workflow. Goede WebP/JPEG export, quality-slider met preview. Niet voor bulk-werk. (5) FFmpeg / cwebp / avifenc (CLI). Voor developers die batch-processing willen. Scriptable, integreerbaar in build-process. Steiler learning-curve. (6) ShortPixel / Imagify (WordPress). Automatische compressie bij upload. Bulk-optimalisatie van bestaande images. €5-25/maand afhankelijk van volume. Voor breder context zie SEO tools voor agencies.
Verlies ik kwaliteit bij conversie naar WebP/AVIF?›
Niet zichtbaar bij correcte instellingen. Vijf principes voor lossless-conversion-feel. (1) Source quality matters. WebP/AVIF compressie van een al gecompresseerde JPEG (bijv. Q70) versterkt artefacten. Werk met origineel of hoge-quality bron. (2) Test visueel, niet alleen op file-size. Vergelijk side-by-side via Squoosh's split-view. Bij gelijke visuele kwaliteit kies kleiner bestand. (3) Quality-getallen ≠ vergelijkbaar. JPEG Q85 ≠ WebP Q85 ≠ AVIF Q85. AVIF gebruikt veel agressievere algoritmes — Q55-70 vergelijkbaar met JPEG Q85. (4) Photographic vs graphic content. Foto's met veel detail blijven scherp tot Q60-70 in WebP/AVIF. Graphics met scherpe randen (logo's) kunnen artefacten tonen — gebruik lossless modus of houd PNG. (5) Banding-issues bij gradients. Lossy compressie kan kleur-banding veroorzaken in subtle gradients. Test gradient-heavy images extra. Soms PNG-8 met dither beter dan lossy WebP. Voor breder context zie lazy loading voor afbeeldingen.
Hoe gebruik ik picture-element voor format-fallback?›
picture-element is essentieel voor moderne formats met fallback. Zes principes voor correcte implementatie. (1) Source-tags in volgorde van voorkeur. AVIF eerst (kleinste), dan WebP (compatibele tweede keuze), dan img-tag met JPEG/PNG als universele fallback. Browser pakt eerste format dat het ondersteunt. (2) Mime-types correct opgeven.
type="image/avif", type="image/webp". Browser kan zo zonder request te starten weten of het format ondersteund wordt. Bespaart bandwidth. (3) img-tag binnen picture verplicht. Hierin staat de uiteindelijke fallback + alt-tekst + dimensions. Browser gebruikt deze als geen source-tag matched. (4) Loading-attribute op img. loading="lazy" voor below-fold images werkt ook binnen picture-element. Combineer voor maximale performance. (5) Width/height op img. Voor aspect-ratio en CLS-prevention. Belangrijk ongeacht welk source-format wordt gebruikt. (6) Srcset voor verschillende resoluties. Combinatie picture + srcset = beide format én resolution-keuze. Optimaal maar complex. Voor breder context zie lazy loading voor afbeeldingen.Image-optimalisatie voor jouw site?
Image-audit met bulk-conversie naar WebP/AVIF, picture-element implementation voor fallback, CDN-setup met automatische optimization, en monitoring van page-weight reductie via PageSpeed Insights.
Plan een gesprek met Ralf →