In het gedeelte 'Opportunities' van uw Lighthouse-rapport worden alle niet-geoptimaliseerde afbeeldingen weergegeven, met potentiële besparingen in kibibytes (KiB) . Optimaliseer deze afbeeldingen zodat de pagina sneller laadt en minder data verbruikt:
Hoe Lighthouse afbeeldingen als optimaliseerbaar markeert
Lighthouse verzamelt alle JPEG- of BMP-afbeeldingen op de pagina, stelt het compressieniveau van elke afbeelding in op 85 en vergelijkt vervolgens de originele versie met de gecomprimeerde versie. Als de potentiële besparing 4KiB of meer bedraagt, markeert Lighthouse de afbeelding als optimaliseerbaar.
Hoe afbeeldingen optimaliseren
Er zijn veel stappen die u kunt nemen om uw afbeeldingen te optimaliseren, waaronder:
- Het gebruik van image-CDN's
- Afbeeldingen comprimeren
- Geanimeerde GIF's vervangen door video
- Lazy loading-afbeeldingen
- Responsieve afbeeldingen aanbieden
- Afbeeldingen serveren met de juiste afmetingen
- WebP-afbeeldingen gebruiken
Optimaliseer afbeeldingen met behulp van GUI-hulpmiddelen
Een andere aanpak is om je afbeeldingen door een optimizer te halen die je op je computer installeert en als GUI gebruikt. Met ImageOptim sleep je bijvoorbeeld afbeeldingen naar de gebruikersinterface, waarna de afbeeldingen automatisch worden gecomprimeerd zonder merkbaar kwaliteitsverlies. Als je een kleine website hebt en alle afbeeldingen handmatig kunt optimaliseren, is deze optie waarschijnlijk voldoende.
Squoosh is een andere optie. Squoosh wordt onderhouden door het Google Web DevRel-team.
Stapelspecifieke begeleiding
Drupal
Overweeg een module te gebruiken die automatisch de grootte van afbeeldingen die via de site worden geüpload optimaliseert en verkleint, met behoud van kwaliteit. Zorg er ook voor dat je de standaard responsieve afbeeldingsstijlen van Drupal gebruikt voor alle afbeeldingen die op de site worden weergegeven.
Joomla
Overweeg het gebruik van een plug-in voor beeldoptimalisatie die uw afbeeldingen comprimeert, maar de kwaliteit wel behoudt.
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.