Serveer afbeeldingen in moderne formaten

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

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.

Bronnen