Gepubliceerd: 8 okt. 2025
Door de downloadtijd van afbeeldingen te verkorten, kunt u de waargenomen laadtijd van de pagina en LCP verbeteren.
Hoe het inzicht faalt
Het inzicht markeert afbeeldingen met onnodig grote downloadgroottes. De geschatte bytebesparing wordt berekend door de downloadgrootte van de afbeelding te vergelijken met een efficiënte bytes/pixelverhouding voor het afbeeldingsformaat.
Hoe de downloadtijd van afbeeldingen te verbeteren
Dit inzicht beveelt verschillende strategieën aan om de downloadtijd van afbeeldingen te verbeteren, afhankelijk van de weergegeven grootte en het bestandsformaat van de afbeelding. Het implementeren van een image-CDN 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 verbeteren, ten koste van de beeldkwaliteit. U kunt hulpmiddelen voor afbeeldingen zoals ImageOptim , Squoosh en Imagemin gebruiken om de compressiefactor te optimaliseren.
Gebruik moderne afbeeldingsformaten
AVIF en WebP zijn beeldformaten met superieure compressie en kwaliteitskenmerken in vergelijking met hun oudere JPEG- en PNG-tegenhangers. 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 versies van alle belangrijke browsers en biedt kleinere bestandsgroottes dan andere formaten met dezelfde kwaliteitsinstellingen. Zie Serving AVIF Images Codelab voor meer informatie over AVIF.
WebP wordt ondersteund door alle grote browsers en biedt betere lossy en lossless compressie voor afbeeldingen op het web. Zie WebP-afbeeldingen gebruiken voor meer informatie over WebP.
Gebruik videoformaten voor geanimeerde inhoud
Grote GIF's zijn inefficiënt voor het weergeven van geanimeerde content in vergelijking met video's. Overweeg MPEG4/WebM-video's te gebruiken voor animaties en PNG/WebP voor statische afbeeldingen in plaats van GIF om netwerkbytes te besparen.
Zie Geanimeerde GIF's vervangen door video voor snellere paginalading om te leren hoe u GIF-afbeeldingen vervangt door video's.
Serveer afbeeldingen met responsieve afmetingen
Idealiter zou je pagina nooit afbeeldingen moeten tonen die groter zijn dan de versie die op het scherm van de gebruiker wordt weergegeven. Alles wat groter is, resulteert alleen maar in verspilling van bytes en vertraagt de laadtijd van de pagina.
Eén strategie is het gebruik van vectorgebaseerde afbeeldingsformaten, zoals SVG. Met een beperkte hoeveelheid code kan een SVG-afbeelding naar elke gewenste grootte worden geschaald. Zie Complexe pictogrammen vervangen door SVG voor meer informatie.
Als vectorgebaseerde afbeeldingen geen optie zijn, is het het beste om afbeeldingen te gebruiken die 'responsief' zijn. Met responsieve afbeeldingen genereert u meerdere versies van elke afbeelding en geeft u vervolgens in uw HTML of CSS aan welke versie u wilt gebruiken met behulp van mediaquery's, viewportafmetingen, enzovoort.
Het <img> -element heeft bijvoorbeeld de attributen srcset en sizes , waarmee u afbeeldings-URL's voor verschillende formaten kunt opgeven:
Als u de afbeelding volledig wilt wijzigen, kunt u het element <picture> gebruiken:
Zie Responsieve afbeeldingen en Het afbeeldingelement voor meer informatie.
Stapelspecifieke begeleiding
Dit inzicht biedt ook stackspecifieke richtlijnen voor pagina's die de volgende technologieën gebruiken:
AMP
- Overweeg om alle
amp-img-componenten weer te geven in WebP-indelingen en geef daarbij een geschikte terugvaloptie op voor andere browsers. - Voor geanimeerde content gebruikt u
amp-animom het CPU-gebruik te minimaliseren wanneer de content zich buiten het scherm bevindt.
Drupal
- Overweeg het gebruik van een module die automatisch de grootte van afbeeldingen die u via de site uploadt, optimaliseert en verkleint, zonder dat de kwaliteit verloren gaat.
- Zorg ervoor dat u de ingebouwde responsieve afbeeldingsstijlen van Drupal gebruikt voor alle afbeeldingen op de site.
Joomla
Overweeg om een plug-in of service te gebruiken die uw geüploade afbeeldingen automatisch converteert naar de optimale formaten.
Magento
Overweeg het gebruik van een Magento-extensie van derden die afbeeldingen optimaliseert .
WordPress
Overweeg om een WordPress-plug-in voor beeldoptimalisatie te gebruiken die uw afbeeldingen comprimeert, maar de kwaliteit wel behoudt.