Beeldoptimalisatie voor internet: complete gids

Langzaam laden van pagina's doodt conversies. Uit onderzoek blijkt dat 40% van de gebruikers een site verlaat die langer dan 3 seconden duurt. De grootste oorzaak? Niet-geoptimaliseerde afbeeldingen. Eén enkele foto van 5 MB op uw startpagina kan de laadtijd aanzienlijk verhogen, zelfs bij snelle verbindingen.

De checklist voor beeldoptimalisatie

1. Juiste afmetingen — verzend geen afbeelding van 4000 px waar u 800 px weergeeft
2. Juiste indeling — moderne WebP/AVIF, fallback JPG/PNG
3. Juiste compressie — 75-85% kwaliteit voor foto's, verliesvrij voor afbeeldingen
4. Juiste levering — lui laden, responsieve srcset

Aanbevolen afmetingen in 2026

• Hero-afbeeldingen: 1920×1080 (Full HD) of 2560×1440 (2K) max
• Blogpostheld: 1200×675 (16:9)
• Productfoto's: 1500×1500 met zoomondersteuning, 800×800 standaardweergave
• Avatars: 256×256 (miniaturen worden verkleind)
• Open Graph (sociaal delen): 1200×630
• Favicon: 32×32, 192×192, 512×512 PNG

Wijzig het formaat van foto's naar deze afmetingen met ons hulpprogramma voor het wijzigen van het formaat van afbeeldingen voordat u ze uploadt.

Formaten: wanneer wat te gebruiken

• WebP: Standaard voor 95% van de webafbeeldingen. 25-35% kleiner dan JPG met dezelfde kwaliteit. Universele browserondersteuning.
• AVIF: Nog kleiner (50% kleiner dan JPG). Gebruik voor heldenafbeeldingen. Nieuwere browsers ondersteunen dit.
• JPG: Foto's zonder transparantie. Uitstekende compatibiliteit.
• PNG: Logo's, schermafbeeldingen, alles met transparantie. Zonder verlies.
• SVG: Vectorafbeeldingen, pictogrammen, eenvoudige illustraties. Kleine bestandsgrootte, oneindige schaling.

Converteer tussen deze formaten met PDF7 Image Convert.

Compressie: hoe agressief is te agressief?

Voor foto's: begin bij 85% kwaliteit. Daling tot 75% voor bandbreedte-kritische pagina's. Onder de 70% worden artefacten zichtbaar. Gebruik onze tool voor het comprimeren van afbeeldingen om de juiste balans te vinden.

Responsieve afbeeldingen met srcset

Geen 2K-afbeelding weergeven op een telefoon. Gebruik het srcset-attribuut van HTML:

De browser kiest de kleinste afbeelding die past. Je hebt 3 formaten per afbeelding nodig.

Lazy laden

Voeg loading="lazy" toe aan alle afbeeldingen onder de vouw. Moderne browsers laden ze pas als de gebruiker er dichtbij scrollt, waardoor bandbreedte wordt bespaard bij elke pagina die wordt geladen.

De 100 KB-regel

Streef naar individuele afbeeldingen van minder dan 100 KB. Hero-afbeeldingen kunnen zich uitstrekken tot 200 KB. Als een enkele foto meer dan 500 KB groot is, heb je een fout gemaakt. Pas het formaat aan en comprimeer het opnieuw.