Kies nuttige afbeeldingsafmetingen voor displays met hoge dichtheid

Een kaart die wordt weergegeven bij 800 CSS-pixels breed, kan een afbeeldingskandidaat gebruiken die 1600 beeldpixels breed is als een 2x voorbeeld. De browser kan een geschikte bron kiezen op basis van lay-out, apparaatdichtheid en andere voorwaarden wanneer de website responsive image markup biedt. Het bestand van 1600 pixels betekent niet dat de kaart 1600 CSS-pixels op de pagina moet innemen.

Meet de werkelijke lay-out voordat u exporteert. Een artikelkolom, een banner over de volledige breedte en een kleine productkaart hebben zelden dezelfde brongrootte nodig. Controleer ook de lay-out van de telefoon, waar de afbeelding een andere breedte kan innemen of een ander bijsnijd kan gebruiken. Door elk bestand twee keer de grootste desktop-viewportbreedte te maken, kan bytes worden verspild. Behandel de export van hogere dichtheid als kandidaten voor een echte responsieve implementatie in plaats van een enkel oversized bestand dat elk apparaat moet downloaden.

Deze pagina begint met een WebP Fit Box van 1600 bij 1600 pixels. Het is een illustratieve grens, dus vervang het door waarden op basis van de weergavegrootte die u hebt gemeten. Past binnen houdt verhoudingen en vergroot een kleinere bron niet. Een breed origineel kan bijvoorbeeld 1600 pixels bereiken, terwijl een portret in plaats daarvan op de hoogte past. Controleer de werkelijke uitvoerafmetingen.

Als een bron slechts 700 pixels breed is, maakt het schrijven van een 1600-pixel export niet het detail van een groter origineel. Gebruik een betere bron of accepteer een kleinere kandidaat. Vergelijk lichte verscherping met OFF na het verkleinen en inspecteer fijne texturen op de beoogde weergavegrootte. Gebruik voor transparante afbeeldingen in plaats daarvan PNG, aangezien de huidige WebP-export hier ondoorzichtig is. Bewaar het originele ontwerp of de foto, zodat u later verschillende kandidaten kunt maken.

De converter produceert een bestand; Uw website moet deze nog steeds correct selecteren en presenteren. Zorg voor geschikte bronkandidaten, nauwkeurige maathints en gereserveerde afbeeldingsdimensies in de implementatie. Een telefoon mag niet de grootste afbeelding ontvangen alleen omdat deze bestaat. Controleer de gedownloade afbeelding in Browser Developer Tools bij het evalueren van de laatste pagina, omdat een Content Management-systeem deze opnieuw kan transformeren.

Bekijk de pagina bij gewone en hoge dichtheid scherminstellingen en vergelijk de details met de overdrachtsgrootte. Een afbeelding met een hogere resolutie is niet automatisch de beste afweging voor een kleine decoratieve kaart. Evenzo kan één te klein beeld er slecht uitzien in een grote productweergave. Test zinvolle inhoud zoals gezichten en labels in plaats van alleen een wazige achtergrond te beoordelen. Houd de laadprioriteit die past bij de positie van de afbeelding en meet de echte pagina voordat u een verbetering van de snelheid of kernwebvitaliteit claimt.

Stel dat uw breedste kaart 400 CSS-pixels is en dat een illustratie op die breedte duidelijk blijft. Een kandidaat van 800 pixels is een mogelijke 2x export wanneer de bron dit ondersteunt. Controleer de kaart ook in smallere lay-outs, aangezien een afbeelding die het hele telefoonscherm beslaat, een andere weergavebreedte kan hebben dan de desktopkaart. Export uit het origineel voor elke benodigde kandidaat in plaats van de kleinste te vergroten. Bevestig welk bestand de browser selecteert op de eigenlijke pagina. Die uiteindelijke selectiecontrole is wat een berekening van een lokale dimensie verbindt met de bytes die bezoekers echt voor de afbeelding ontvangen.