In het gedeelte Mogelijkheden van uw Lighthouse-rapport worden alle afbeeldingen op uw pagina vermeld die niet het juiste formaat hebben, samen met de potentiële besparingen in kibibytes (KiB) . Pas het formaat van deze afbeeldingen aan om gegevens te besparen en de laadtijd van de pagina te verbeteren:
Hoe Lighthouse te grote afbeeldingen berekent
Voor elke afbeelding op de pagina vergelijkt Lighthouse de grootte van de weergegeven afbeelding met de grootte van de werkelijke afbeelding. De weergegeven grootte houdt ook rekening met de pixelverhouding van het apparaat. Als de weergegeven grootte minimaal 4KiB kleiner is dan de werkelijke grootte, voldoet de afbeelding niet aan de audit.
Strategieën voor het juiste formaat van afbeeldingen
Idealiter zou uw pagina nooit afbeeldingen moeten weergeven die groter zijn dan de versie die op het scherm van de gebruiker wordt weergegeven. Alles groter dan dat resulteert alleen maar in verspilde bytes en vertraagt de laadtijd van de pagina.
De belangrijkste strategie voor het weergeven van afbeeldingen met de juiste grootte wordt 'responsieve afbeeldingen' genoemd. Met responsieve afbeeldingen genereert u meerdere versies van elke afbeelding en geeft u vervolgens op welke versie u in uw HTML of CSS wilt gebruiken met behulp van mediaquery's, viewport-afmetingen, enzovoort. Bovendien is RespImageLint een handige bookmarklet voor het identificeren van de optimale waarden voor srcset en sizes voor uw afbeeldingen. Zie Responsieve afbeeldingen weergeven voor meer informatie over deze kenmerken.
Afbeeldings-CDN's zijn een andere belangrijke strategie voor het weergeven van afbeeldingen met de juiste grootte. Je kunt denken aan image-CDN’s, zoals webservice-API’s voor het transformeren van afbeeldingen.
Een andere strategie is het gebruik van vectorgebaseerde afbeeldingsformaten, zoals SVG. Met een beperkte hoeveelheid code kan een SVG-afbeelding naar elk formaat worden geschaald. Zie Complexe pictogrammen vervangen door SVG voor meer informatie.
Tools zoals gulp-responsive of responsive-images-generator kunnen helpen bij het automatiseren van het proces van het converteren van een afbeelding naar meerdere formaten. Er zijn ook afbeeldings-CDN's waarmee u meerdere versies kunt genereren, wanneer u een afbeelding uploadt of deze vanaf uw pagina opvraagt.
Stapelspecifieke begeleiding
AMP
Gebruik de ondersteuning van de amp-img component voor srcset om op te geven welke afbeeldingselementen moeten worden gebruikt op basis van de schermgrootte. Zie ook Responsieve afbeeldingen met srcset, maten en hoogtes .
Hoekig
Overweeg het hulpprogramma BreakpointObserver in de Component Dev Kit (CDK) te gebruiken om afbeeldingsbreekpunten te beheren.
Drupal
Zorg ervoor dat u de native Responsive Image Styles van Drupal gebruikt. Gebruik de responsieve afbeeldingsstijlen bij het renderen van afbeeldingsvelden via weergavemodi, weergaven of afbeeldingen die zijn geüpload via de WYSIWYG-editor.
Gatsby
Gebruik de gatsby-image- plug-in om meerdere kleinere afbeeldingen voor smartphones en tablets te genereren. Het kan ook tijdelijke aanduidingen voor SVG-afbeeldingen maken voor efficiënt lui laden.
Joomla
Overweeg het gebruik van een plug-in voor responsieve afbeeldingen .
WordPress
Upload afbeeldingen rechtstreeks via de mediabibliotheek om ervoor te zorgen dat de vereiste afbeeldingsformaten beschikbaar zijn en voeg ze vervolgens in vanuit de mediabibliotheek of gebruik de afbeeldingswidget om ervoor te zorgen dat de optimale afbeeldingsgroottes worden gebruikt (inclusief die voor de responsieve breekpunten). Vermijd het gebruik van afbeeldingen Full Size , tenzij de afmetingen geschikt zijn voor het gebruik ervan. Zie Afbeeldingen in berichten en pagina's invoegen .