# Afbeeldingen voor het web optimaliseren zonder kwaliteitsverlies [Canonical HTML page](https://gradiently.design/nl/guide/lighthouse-image-performance) Afbeeldingen zijn meestal het zwaarste deel van een pagina en de reden dat Lighthouse klaagt. Hier is een werkwijze die werkt: de juiste pixelmaten, het juiste formaat, responsieve markup en laadhints, zonder zichtbaar verlies. ## The short version - Om afbeeldingen voor het web te optimaliseren exporteer je elke afbeelding op de grootte waarop ze wordt getoond, ruwweg verdubbeld voor schermen met hoge dichtheid, in plaats van het origineel te uploaden. - AVIF en WebP geven veel kleinere bestanden dan JPEG en PNG bij vergelijkbare beeldkwaliteit, en elke huidige browser ondersteunt WebP. - Met de attributen srcset en sizes downloadt de browser de kleinste afbeelding die op elk scherm nog scherp oogt. - Laad afbeeldingen onder de vouw lazy met loading="lazy", maar laad de hoofdafbeelding bovenaan meteen met fetchpriority="high", want die bepaalt meestal de Largest Contentful Paint. - Stel altijd width en height in op afbeeldingen, zodat de browser ruimte reserveert en de layout niet verspringt tijdens het laden. Om **afbeeldingen voor het web te optimaliseren** zonder zichtbaar verlies doe je vijf dingen: exporteer elke afbeelding op de pixelgrootte waarop ze wordt getoond (ongeveer het dubbele voor scherpe schermen), kies een modern formaat zoals AVIF of WebP, comprimeer tot een gematigde kwaliteit en vergelijk op het oog, lever meerdere maten met `srcset` en laad alles onder de vouw lazy. Die stappen lossen de meeste afbeeldingswaarschuwingen in Lighthouse op en verlagen het paginagewicht meestal drastisch, omdat de originele foto rechtstreeks uit een camera of designtool vele malen groter is dan het scherm nodig heeft. ## Stap 1: exporteer op de grootte die je toont Een afbeelding die 800 pixels breed wordt getoond, hoeft niet 4.000 pixels breed te zijn. Lighthouse markeert te grote afbeeldingen, omdat de extra pixels worden gedownload, gedecodeerd en weggegooid. Meet hoe breed de afbeelding in je layout maximaal verschijnt en exporteer dan op ongeveer het dubbele van die breedte voor telefoons en laptops met hoge dichtheid. Meer dan twee keer ziet er zelden scherper uit en kost altijd bytes. | Afbeelding | Getoond op | Exportbreedte | | --- | --- | --- | | Hero over de volle breedte | Tot 1920 px | 1920 px, plus kleinere versies | | Artikelafbeelding | Ongeveer 720 px | 1440 px | | Kaartminiatuur | Ongeveer 360 px | 720 px | | Avatar | 48 px | 96 px | | Open Graph-afbeelding | Buiten de site | Precies 1200×630 | Typische doelen. Een hero over de volle breedte is de uitzondering op verdubbelen: 1920 px dekt de meeste schermen, en zeer grote schermen krijgen tegen een redelijke prijs een iets zachter beeld. - Website-hero 1920×1080: 1920 × 1080 - Blogbanner 1200×600: 1200 × 600 - Linkpreview 1200×630: 1200 × 630 Drie veelgebruikte webafbeeldingsformaten op schaal. Ontwerp op het eindformaat, zodat er na het exporteren niets wordt bijgesneden of geschaald. ## Stap 2: kies het juiste formaat Het formaat telt zwaarder dan elke compressieschuif. AVIF geeft meestal het kleinste bestand, WebP komt dichtbij en wordt overal ondersteund, en JPEG en PNG blijven de veilige terugvallen. [WebP versus PNG](https://gradiently.design/nl/guide/webp-images) en [PNG versus JPG](https://gradiently.design/nl/guide/png-vs-jpeg) gaan dieper in op elk paar. | Formaat | Het best voor | Opmerkingen | | --- | --- | --- | | AVIF | Foto’s, kleurverlopen, grote heroes | Kleinste bestanden; trager te coderen | | WebP | Bijna alles | Met en zonder verlies, transparantie, brede ondersteuning | | JPEG | Foto’s, als terugval | Geen transparantie; banden in vloeiende verlopen | | PNG | Screenshots, vlakke graphics, transparantie | Zonder verlies en groot voor foto’s | | SVG | Logo’s, pictogrammen, illustraties | Vector, piepklein als het eenvoudig is; zie [SVG versus PNG](https://gradiently.design/nl/guide/svg-vs-png) | Kies op inhoud, niet uit gewoonte. Vloeiende kleurverlopen zijn het moeilijkste geval voor JPEG, en daar helpen WebP en AVIF het meest. > **Kleurverlopen comprimeren slecht** Vloeiende kleurovergangen laten compressie zien als zichtbare trappen. Voeg vóór het exporteren een beetje korrel toe, zoals beschreven bij [banding in verlopen](https://gradiently.design/nl/guide/gradient-banding), en de encoder kan harder werken zonder dat iemand het ziet. Nog beter: teken webverlopen in CSS. Een herokleurverloop in ongeveer 70 bytes: `linear-gradient(160deg, #0f172a 0%, #1e3a8a 50%, #0ea5e9 100%)` Dit verloop kost als CSS minder dan één regel van de pagina. Als afbeelding van 1920×1080 geëxporteerd zou hetzelfde vele kilobytes wegen. Zie [prestaties van CSS-verlopen](https://gradiently.design/nl/guide/css-gradient-performance). ## Stap 3: comprimeer, en kijk dan Formaten met verlies hebben een kwaliteitsinstelling, en de juiste waarde hangt af van de afbeelding. Begin rond 75 tot 80 voor WebP en rond 50 tot 60 voor AVIF, exporteer en vergelijk met het origineel op 100% zoom. Verlaag het tot je een verschil ziet en ga dan één stap terug omhoog. Gezichten, fijne tekst en kleurverlopen vragen meer kwaliteit dan drukke landschappen. [Beeldcompressie](https://gradiently.design/nl/guide/image-compression) legt uit wat de encoder weggooit. Verwijder ondertussen metadata zoals cameragegevens en ingesloten miniaturen. De meeste exporttools doen dat met één vinkje, en het haalt bytes weg die niemand ziet. ## Stap 4: responsieve markup met srcset en sizes Als je meerdere breedtes hebt geëxporteerd, laat je de browser kiezen. `srcset` somt de bestanden en hun breedtes op; `sizes` vertelt de browser hoe breed de afbeelding zal verschijnen. De browser downloadt dan het kleinste bestand dat scherp genoeg is voor dat scherm. ```html Morning light over the harbour ``` De browser gebruikt de eerste bron die hij ondersteunt. Het img-element is zowel de terugval als de plek voor alt, width, height en laadhints. Voor een afbeelding in een kolom beschrijf je de layout in `sizes`, bijvoorbeeld `sizes="(min-width: 1024px) 720px, 100vw"`. Een verkeerde `sizes` is de meest voorkomende reden dat een responsieve opzet toch het grote bestand downloadt. ## Stap 5: laadhints die ertoe doen ```html The team at the spring workshop Morning light over the harbour ``` Met width en height kan de browser ruimte reserveren op basis van de beeldverhouding, zodat niets verspringt als afbeeldingen binnenkomen. CSS kan de afbeelding nog steeds fluïde maken met max-width: 100% en height: auto. ### Veelgemaakte fouten - `loading="lazy"` op de heroafbeelding - Geen width en height, dus de pagina verspringt - Eén enorm bestand voor elk scherm - Een JPEG van een vlak logo of screenshot - Kleurverloopachtergronden als afbeelding opgeslagen ### Doe dit - De hero laadt meteen met `fetchpriority="high"` - Stel beide attributen in op elke img - `srcset` met drie of vier breedtes - SVG of PNG voor vlakke graphics - CSS-verlopen, zo nodig met korrel Deze hints sluiten direct aan op Core Web Vitals. De heroafbeelding is vaak het Largest Contentful Paint-element, dat volgens [web.dev](https://web.dev/articles/lcp) binnen 2,5 seconden zou moeten worden weergegeven, en ontbrekende afmetingen zijn een klassieke oorzaak van layoutverschuiving. Is je hero een video in plaats van een afbeelding, dan geldt dezelfde gedachte bij [videoachtergronden voor websites](https://gradiently.design/nl/guide/video-background-website). ## Een checklist voordat je publiceert 1. **Meet de ruimte** Zoek de grootste getoonde breedte van elke afbeelding in je layout. 2. **Exporteer op de juiste maten** Een tot twee keer de breedte van de ruimte, plus kleinere versies voor telefoons. 3. **Kies het formaat** AVIF of WebP voor foto’s en kleurverlopen, SVG voor logo’s, PNG alleen als het wint. 4. **Comprimeer op het oog** Verlaag de kwaliteit tot je een verandering ziet en verhoog hem dan een stap. 5. **Zet de markup op** `srcset`, `sizes`, `width`, `height`, `alt` en lazy loading onder de vouw. 6. **Test het** Draai Lighthouse in een incognitovenster en controleer de afbeeldingsaudits en het LCP-element. Veel hiervan is makkelijker als de afbeelding meteen op het eindformaat wordt gemaakt. In Gradiently ontwerp je één keer en brengt Pro het in één stap naar alle formaten, en exporteert dan PNG, JPG of SVG op exacte afmetingen tot 4K, zodat de hero, de banner en de [Open Graph-afbeelding](https://gradiently.design/nl/guide/open-graph-tags) elk beginnen op het formaat dat de pagina zal tonen. ## FAQ ### Hoe optimaliseer ik afbeeldingen voor het web zonder kwaliteitsverlies? Exporteer op de getoonde grootte, gebruik AVIF of WebP, verlaag de kwaliteitsinstelling alleen tot je een verschil ziet en lever meerdere maten met srcset. Het meeste zichtbare verlies komt van zware compressie, niet van verkleinen. ### Wat is het beste afbeeldingsformaat voor websites? WebP is de veilige moderne standaard en AVIF is meestal nog kleiner. Gebruik SVG voor logo’s en pictogrammen en houd JPEG of PNG als terugval. ### Moet ik alle afbeeldingen lazy laden? Nee. Laad afbeeldingen onder de vouw lazy, maar laad de heroafbeelding meteen, want vertraging daarvan vertraagt de Largest Contentful Paint. ### Hoe groot moeten afbeeldingen op een website zijn? Ongeveer twee keer de breedte waarop ze worden getoond, voor scherpe schermen met hoge dichtheid. Een hero over de volle breedte op 1920 px dekt de meeste schermen. ### Waarom zegt Lighthouse dat mijn afbeeldingen niet de juiste grootte hebben? Het bestand heeft meer pixels dan de ruimte die het op de pagina vult. Exporteer een kleinere versie en gebruik srcset en sizes, zodat de browser de juiste kiest.