Codeer afbeeldingen efficiënt

In het gedeelte Mogelijkheden van uw Lighthouse-rapport worden alle niet-geoptimaliseerde afbeeldingen vermeld, met potentiële besparingen in kibibytes (KiB) . Optimaliseer deze afbeeldingen zodat de pagina sneller laadt en minder data verbruikt:

Een screenshot van de Lighthouse Efficiënt coderen van afbeeldingen-audit

Hoe Lighthouse afbeeldingen markeert als optimaliseerbaar

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 te optimaliseren

Er zijn veel stappen die u kunt nemen om uw afbeeldingen te optimaliseren, waaronder:

Optimaliseer afbeeldingen met GUI-tools

Een andere benadering is om uw afbeeldingen door een optimalisatieprogramma te laten lopen dat u op uw computer installeert en als GUI uitvoert. Met ImageOptim sleept u bijvoorbeeld afbeeldingen naar de gebruikersinterface, waarna de afbeeldingen automatisch worden gecomprimeerd zonder dat de kwaliteit merkbaar in gevaar komt. Als u een kleine site heeft en alle afbeeldingen handmatig kunt optimaliseren, is deze optie waarschijnlijk goed genoeg.

Squoosh is een andere optie. Squoosh wordt onderhouden door het Google Web DevRel-team.

Stapelspecifieke begeleiding

Drupal

Overweeg het gebruik van een module die automatisch de grootte van afbeeldingen die via de site worden geüpload, optimaliseert en verkleint, terwijl de kwaliteit behouden blijft. Zorg er ook voor dat u de native Responsive Image Styles 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 met behoud van kwaliteit.

Magento

Overweeg het gebruik van een Magento-extensie van derden die afbeeldingen optimaliseert .

WordPress

Overweeg het gebruik van een WordPress-plug-in voor beeldoptimalisatie die uw afbeeldingen comprimeert met behoud van kwaliteit.

Bronnen