Gepubliceerd: 8 oktober 2025
Het verkorten van de downloadtijd van afbeeldingen kan de waargenomen laadtijd van de pagina en de LCP verbeteren.
Hoe het inzicht mislukt
De analyse wijst op afbeeldingen met een onnodig grote downloadgrootte. De geschatte besparing in bytes wordt berekend door de downloadgrootte van de afbeelding te vergelijken met een efficiënte byte-pixelverhouding voor het betreffende afbeeldingsformaat.
Hoe verkort je de downloadtijd van afbeeldingen?
Deze inzichten bevelen verschillende strategieën aan om de downloadtijd van afbeeldingen te verbeteren, afhankelijk van de weergegeven grootte en het bestandsformaat van de afbeelding. Het inzetten van een CDN voor afbeeldingen kan voor al deze strategieën zeer nuttig zijn.
Verhoog de beeldcompressiefactor
De meeste afbeeldingsformaten ondersteunen een compressieniveau dat kan worden aangepast om de bestandsgrootte te verkleinen ten koste van de beeldkwaliteit. Je kunt beeldbewerkingsprogramma's zoals ImageOptim , Squoosh en Imagemin gebruiken om de compressiefactor van de afbeelding te optimaliseren.
Gebruik moderne afbeeldingsformaten.
AVIF en WebP zijn afbeeldingsformaten met superieure compressie- en kwaliteitseigenschappen in vergelijking met de oudere formaten JPEG en PNG. Het coderen van uw afbeeldingen in deze nieuwere formaten is een goede strategie om de downloadgrootte van afbeeldingen te verkleinen.
AVIF wordt ondersteund in de nieuwste versie van alle belangrijke browsers en biedt kleinere bestandsgroottes in vergelijking met andere formaten met dezelfde kwaliteitsinstellingen. Zie de Codelab-handleiding 'Serving AVIF Images' voor meer informatie over AVIF.
WebP wordt ondersteund door alle belangrijke browsers en biedt betere compressie met en zonder kwaliteitsverlies voor afbeeldingen op het web. Zie WebP-afbeeldingen gebruiken voor meer informatie over WebP.
Gebruik videoformaten voor geanimeerde content.
Grote GIF-bestanden zijn minder efficiënt voor het weergeven van animaties dan video's. Overweeg om MPEG4- of WebM-video's te gebruiken voor animaties en PNG- of WebP-bestanden voor statische afbeeldingen in plaats van GIF's om netwerkdata te besparen.
Zie 'Vervang geanimeerde GIF's door video voor snellere paginaladingen' voor meer informatie over het vervangen van GIF-afbeeldingen door video's.
Afbeeldingen weergeven met een aangepast formaat.
Idealiter zou uw pagina nooit afbeeldingen moeten weergeven die groter zijn dan de versie die op het scherm van de gebruiker wordt getoond. Alles wat groter is dan dat, leidt tot onnodig dataverbruik en vertraagt de laadtijd van de pagina.
Een strategie is om vectorgebaseerde afbeeldingsformaten te gebruiken, zoals SVG. Met een beperkte hoeveelheid code kan een SVG-afbeelding naar elk gewenst formaat worden geschaald. Zie Complexe pictogrammen vervangen door SVG voor meer informatie.
Als vectorafbeeldingen geen optie zijn, is het het beste om 'responsieve' afbeeldingen te gebruiken. Bij responsieve afbeeldingen genereer je meerdere versies van elke afbeelding en geef je vervolgens in je HTML of CSS aan welke versie je wilt gebruiken met behulp van mediaqueries, viewport-afmetingen, enzovoort.
Het <img> -element heeft bijvoorbeeld de attributen srcset en sizes waarmee afbeeldings-URL's voor verschillende formaten kunnen worden gespecificeerd:
Als je de afbeelding volledig wilt wijzigen, kun je het <picture> -element gebruiken:
Zie Responsieve afbeeldingen en Het afbeeldingselement voor meer informatie.
Stack-specifieke richtlijnen
Dit inzicht biedt tevens stackspecifieke richtlijnen voor pagina's die gebruikmaken van de volgende technologieën:
AMP
- Overweeg om alle
amp-imgcomponenten in WebP-formaat weer te geven en daarbij een geschikte fallback voor andere browsers op te geven . - Gebruik voor geanimeerde content
amp-animom het CPU-gebruik te minimaliseren wanneer de content buiten beeld is.
Drupal
- Overweeg het gebruik van een module die automatisch de via de site geüploade afbeeldingen optimaliseert en de bestandsgrootte verkleint, met behoud van kwaliteit.
- Zorg ervoor dat u voor alle afbeeldingen op de site de ingebouwde responsieve afbeeldingsstijlen van Drupal gebruikt.
Joomla
Overweeg het gebruik van een plug-in of service die uw geüploade afbeeldingen automatisch naar de optimale formaten converteert.
Magento
Overweeg het gebruik van een Magento-extensie van een derde partij die afbeeldingen optimaliseert .
WordPress
Overweeg het gebruik van een WordPress-plugin voor beeldoptimalisatie die je afbeeldingen comprimeert met behoud van kwaliteit.