Afbeeldingen voor het web optimaliseren zonder kwaliteitsverlies

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.

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 en PNG versus JPG gaan dieper in op elk paar.

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 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.

<picture>
  <source type="image/avif"
    srcset="/img/hero-960.avif 960w, /img/hero-1440.avif 1440w, /img/hero-1920.avif 1920w"
    sizes="100vw" />
  <source type="image/webp"
    srcset="/img/hero-960.webp 960w, /img/hero-1440.webp 1440w, /img/hero-1920.webp 1920w"
    sizes="100vw" />
  <img src="/img/hero-1920.jpg" alt="Morning light over the harbour"
    width="1920" height="1080" fetchpriority="high" decoding="async" />
</picture>

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

<!-- Below the fold: let the browser wait -->
<img src="/img/team-720.webp" alt="The team at the spring workshop"
  width="720" height="480" loading="lazy" decoding="async" />

<!-- The hero: fetch first, never lazy -->
<img src="/img/hero-1920.webp" alt="Morning light over the harbour"
  width="1920" height="1080" fetchpriority="high" />

Deze hints sluiten direct aan op Core Web Vitals. De heroafbeelding is vaak het Largest Contentful Paint-element, dat volgens web.dev 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.

Een checklist voordat je publiceert

1. 1

   Meet de ruimte

   Zoek de grootste getoonde breedte van elke afbeelding in je layout.

2. 2

   Exporteer op de juiste maten

   Een tot twee keer de breedte van de ruimte, plus kleinere versies voor telefoons.

3. 3

   Kies het formaat

   AVIF of WebP voor foto’s en kleurverlopen, SVG voor logo’s, PNG alleen als het wint.

4. 4

   Comprimeer op het oog

   Verlaag de kwaliteit tot je een verandering ziet en verhoog hem dan een stap.

5. 5

   Zet de markup op

   srcset, sizes, width, height, alt en lazy loading onder de vouw.

6. 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 elk beginnen op het formaat dat de pagina zal tonen.