In het gedeelte Kansen van uw Lighthouse-rapport worden alle afbeeldingen in oudere afbeeldingsformaten weergegeven, met de potentiële besparingen die u kunt behalen door AVIF-versies van die afbeeldingen te gebruiken:
Waarom afbeeldingen in AVIF- of WebP-formaat aanbieden?
AVIF en WebP zijn afbeeldingsformaten met superieure compressie en kwaliteitskenmerken in vergelijking met hun oudere JPEG- en PNG-tegenhangers. Door uw afbeeldingen in deze formaten te coderen in plaats van JPEG of PNG, worden ze sneller geladen en verbruiken ze minder mobiele data.
AVIF wordt ondersteund in Chrome, Firefox en Opera en biedt kleinere bestandsgroottes dan andere formaten met dezelfde kwaliteitsinstellingen. Zie Serving AVIF Images Codelab voor meer informatie over AVIF.
WebP wordt ondersteund in de nieuwste versies van Chrome, Firefox, Safari, Edge en Opera en biedt betere lossy en lossless compressie voor afbeeldingen op het web. Zie Een nieuw afbeeldingsformaat voor het web voor meer informatie over WebP.
Hoe Lighthouse potentiële besparingen berekent
Lighthouse verzamelt alle BMP-, JPEG- en PNG-afbeeldingen op de pagina, converteert ze naar WebP en schat de AVIF-bestandsgrootte. Op basis van de conversiecijfers worden de potentiële besparingen gerapporteerd.
Browsercompatibiliteit
WebP wordt ondersteund door de nieuwste versies van Chrome, Firefox, Safari, Edge en Opera, terwijl AVIF-ondersteuning beperkter is. Voor oudere browserondersteuning moet u een fallback-afbeelding in PNG- of JPEG-formaat aanbieden. Zie Hoe kan ik browserondersteuning voor WebP detecteren? voor een overzicht van fallback-technieken en de onderstaande lijst met browserondersteuning voor afbeeldingsformaten.
Bekijk de onderstaande vermeldingen voor de huidige browserondersteuning voor elk modern formaat:
Stapelspecifieke begeleiding
AMP
Overweeg om alle amp-img -componenten weer te geven in WebP-indelingen en geef daarbij een geschikte terugvaloptie op voor andere browsers.
Drupal
Overweeg de installatie en configuratie van een module om WebP-afbeeldingsformaten op uw site te benutten . Dergelijke modules genereren automatisch een WebP-versie van uw geüploade afbeeldingen om de laadtijden te optimaliseren.
Joomla
Overweeg om een plug-in of service te gebruiken die uw geüploade afbeeldingen automatisch converteert naar de optimale formaten.
Magento
Overweeg om op de Magento Marketplace te zoeken naar diverse extensies van derden waarmee u gebruik kunt maken van nieuwere afbeeldingsformaten.
iPhone
Houd er rekening mee dat webp-, avif-afbeeldingen en webm-video's niet werken op iPhones lager dan iOS 16.
WordPress
Overweeg om een plug-in of service te gebruiken die uw geüploade afbeeldingen automatisch converteert naar de optimale formaten.