Afbeeldingslevering verbeteren in PageSpeed Insights

1. 01Open de betrokken pagina in PageSpeed Insights of Lighthouse. Kies het mobiele of desktoprapport, open de melding over afbeeldingslevering en noteer de gemarkeerde afbeeldings-URL en voorgestelde wijziging.
2. 02Zoek de afbeelding op de pagina. Vergelijk in ontwikkelaarstools het gedownloade bestand met de weergegeven afmetingen, rekening houdend met schermdichtheid. Controleer de gekozen bron, niet alleen het origineel in je mediabibliotheek.
3. 03Bevat de geleverde afbeelding te veel pixels, herstel dan eerst responsieve maten of thema-instellingen. Kloppen de afmetingen, vergelijk dan compressie of een ondersteund alternatief formaat.
4. 04Maak in een afbeeldingseditor een kopie met de benodigde afmetingen. Gebruik de Bitinz-afbeeldingscompressor voor geschikte bestanden en bekijk tekst, randen, transparantie en verlopen voordat je vervangt.
5. 05Publiceer de vervanging of sjabloonwijziging. Controleer of de pagina de nieuwe afbeelding opvraagt in plaats van een oude gecachte versie en herhaal het rapport met dezelfde apparaatinstelling.

Chrome schat besparingen uit de downloadgrootte en een efficiënte verhouding tussen bytes en pixels voor het formaat. Afbeeldingen met minder dan 4 KiB geschatte besparing worden niet gemarkeerd. Dat is een rapportdrempel, geen aanbevolen maximumgrootte.

Lighthouse 13 verving de oude afbeeldingscontroles door dit inzicht; Lighthouse 12 toonde inzichten al standaard. Formaatwaarschuwingen, overmatige afmetingen en zware animaties vragen mogelijk andere oplossingen. Volg voor het hele publicatieproces afbeeldingen comprimeren voor een website.

• WordPress: controleer de gekozen afbeeldingsgrootte in blok of thema en de echte srcset- en sizes-markering. WordPress maakt responsieve varianten, maar een aangepast sjabloon of onjuiste layoutbeschrijving kan een verkeerde grootte leveren. Alleen het origineel aanpassen kan eerder gegenereerde kopieën in gebruik laten.
• Shopify: winkelafbeeldingen worden al via de CDN van Shopify geoptimaliseerd, inclusief formaatkeuze. Volgens Shopify is handmatige compressie vooraf niet nodig. Controleer bij een waarschuwing de door het thema gevraagde breedte en responsieve markering in plaats van de bron steeds te verslechteren. Een themaontwikkelaar kan image_url en image_tag controleren.
• Next.js: gebruik de responsieve instellingen van de Image-component en laat sizes aansluiten op de echte layout, vooral met fill. Zonder passende waarde kan een smalle afbeelding als schermbreed worden behandeld en een groter bestand worden gekozen. Alleen kwaliteit veranderen herstelt die mismatch niet.

Bewaar een bewerkbaar origineel. Vergelijk voor zelfstandig geleverde afbeeldingen echte bestandsgrootte en uiterlijk; JPG, PNG en WebP vergelijken helpt kiezen. Bitinz verandert geen afbeeldingsafmetingen. WebP-conversie kan een groter bestand opleveren, dus bewaar de versie die bij de pagina past.

Voor herhaalde publicaties kan de ontwikkelaars-API geschikte bestanden verwerken met een account en maandquotum. De API herstelt geen themamarkering of responsieve layout. Controleer de geleverde pagina opnieuw na het aansluiten van automatisering.

• De gemarkeerde URL hoort bij de afbeelding en versie die je veranderde.
• De browser kiest een geschikte bron voor verschillende schermmaten.
• Compressie behoudt nuttige details, transparantie en vloeiende verlopen.
• De belangrijkste zichtbare afbeelding wordt niet vertraagd door onjuiste uitgestelde laadinstellingen.
• Het nieuwe rapport gebruikt dezelfde apparaatinstelling; uiterlijk en laden zijn ook gecontroleerd.