In het gedeelte Mogelijkheden van uw Lighthouse-rapport worden alle afbeeldingen in oudere afbeeldingsformaten vermeld, waarbij de potentiële besparingen worden weergegeven die kunnen worden behaald door AVIF-versies van die afbeeldingen weer te geven:
![Een screenshot van de Lighthouse Serve-afbeeldingen in moderne formaten audit](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-webp-images/image/a-screenshot-the-lightho-f5772f34fea23.png?authuser=5&hl=nl)
Waarom afbeeldingen in AVIF- of WebP-formaat weergeven?
AVIF en WebP zijn beeldformaten met superieure compressie- en kwaliteitskenmerken vergeleken met hun oudere JPEG- en PNG-tegenhangers. Het coderen van uw afbeeldingen in deze formaten in plaats van JPEG of PNG betekent dat ze sneller worden geladen en minder mobiele data verbruiken.
AVIF wordt ondersteund in Chrome, Firefox en Opera en biedt kleinere bestandsgroottes in vergelijking met andere formaten met dezelfde kwaliteitsinstellingen. Zie AVIF-afbeeldingen aanbieden Codelab voor meer informatie over AVIF.
WebP wordt ondersteund in de nieuwste versies van Chrome, Firefox, Safari, Edge en Opera en biedt betere compressie met en zonder verlies voor afbeeldingen op internet. Zie Een nieuw afbeeldingsformaat voor het web voor meer informatie over WebP.
Hoe Lighthouse potentiële besparingen berekent
Lighthouse verzamelt elke BMP-, JPEG- en PNG-afbeelding op de pagina, converteert ze naar WebP en schat de AVIF-bestandsgrootte, waarbij de potentiële besparingen worden gerapporteerd op basis van de conversiecijfers.
Browsercompatibiliteit
WebP wordt ondersteund door de nieuwste versies van Chrome, Firefox, Safari, Edge en Opera, terwijl AVIF-ondersteuning beperkter is. Voor ondersteuning van oudere browsers moet u een reserve-PNG- of JPEG-afbeelding leveren. Zie Hoe kan ik browserondersteuning voor WebP detecteren? voor een overzicht van fallback-technieken en onderstaande lijst voor browserondersteuning van afbeeldingsformaten.
Bekijk de onderstaande vermeldingen om de huidige browserondersteuning voor elk modern formaat te zien:
Stapelspecifieke begeleiding
AMP
Overweeg om alle amp-img
componenten in WebP-formaten weer te geven en tegelijkertijd een geschikte fallback voor andere browsers op te geven .
Drupal
Overweeg een module te installeren en configureren om WebP-afbeeldingsformaten op uw site te gebruiken . Dergelijke modules genereren automatisch een WebP-versie van uw geüploade afbeeldingen om de laadtijden te optimaliseren.
Joomla
Overweeg het gebruik van een plug-in of service die uw geüploade afbeeldingen automatisch naar de optimale formaten converteert.
Magento
Overweeg om op de Magento Marketplace te zoeken naar een verscheidenheid aan extensies van derden om nieuwere afbeeldingsformaten te benutten.
iPhone
Houd er rekening mee dat webp, avif-afbeeldingen en webm-video's niet werken op iPhones onder iOS 16.
WordPress
Overweeg het gebruik van een plug-in of service die uw geüploade afbeeldingen automatisch naar de optimale formaten converteert.