Responsieve afbeeldingen

Silktide laadt je pagina's in een echte browser en vergelijkt de werkelijke afmetingen van elke afbeelding met de grootte waarin deze wordt weergegeven. Afbeeldingen die veel groter zijn dan ze op het scherm worden weergegeven, worden gemeld, samen met de hoeveelheid gegevens die door de extra resolutie wordt verspild.

Waarom dit belangrijk is

Een veelvoorkomend patroon: er wordt een foto van 4000 pixels geüpload, terwijl de pagina deze 400 pixels breed weergeeft. Bezoekers downloaden het bestand in volledige resolutie — mogelijk meerdere megabytes — om te zien wat een veel kleiner bestand precies hetzelfde zou weergeven. De verspilling is het grootst op telefoons, die de kleinste schermen en vaak de traagste en duurste verbindingen hebben. Snellere pagina's zorgen ervoor dat meer bezoekers blijven en dragen via bij aan een hogere positie in zoekresultaten.

Zo los je dit op

Bied elke afbeelding in verschillende formaten aan en laat de browser het juiste formaat voor het apparaat kiezen:

<!-- De browser downloadt alleen het benodigde formaat -->
<img src="flower-800.jpg"
     srcset="flower-400.jpg 400w, flower-800.jpg 800w, flower-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Bloemenkraam op de markt">

Automatiseer het aanpassen van het formaat. De meeste genereren bij het uploaden meerdere formaten en kunnen afbeeldingen bij levering aanpassen — beide voorkomen dat het probleem terugkeert.
Pas eenmalige afbeeldingen vóór het uploaden aan tot ongeveer het formaat waarin ze worden weergegeven.

Zo test Silktide dit

Laad de pagina in een echte browser en leg vast in welk formaat elke afbeelding wordt weergegeven, rekening houdend met de scherpere schermen van moderne apparaten.
Vergelijk dit met de afmetingen van het daadwerkelijk gedownloade afbeeldingsbestand.
Meld afbeeldingen waarbij het verschil betekenisvol is, met het aantal bytes dat een afbeelding met het juiste formaat zou besparen, waarbij de grootste besparing als eerste wordt weergegeven.

Problemen oplossen

Wat is het verschil met de andere afbeeldingscontroles?

Deze controle gaat over afmetingen: een fysiek grotere afbeelding aanbieden dan de pagina weergeeft. Afbeeldingscompressie en Afbeeldingsoptimalisatie gaan over het kleiner maken van het bestand bij dezelfde afmetingen, en Moderne afbeeldingsformaten gaat over het converteren naar WebP of AVIF. Dezelfde afbeelding kan in verschillende controles voorkomen — de oplossingen vullen elkaar aan.

De afbeelding ziet er scherp uit dankzij schermen met een hoge resolutie

Moderne schermen hebben inderdaad meer pixels nodig dan het weergegeven formaat doet vermoeden, en meting houdt daar rekening mee. Afbeeldingen worden alleen gemeld wanneer ze groter zijn dan zelfs een scherm met hoge resolutie kan benutten.