Als webontwikkelaars spelen we constant met afbeeldingen en in de meeste gevallen zijn browsers uitstekend in staat om afbeeldingen te schalen zodat ze binnen de grenzen van onze websiteontwerpen passen, zonder dat ze er lelijk uitzien. Maar wat gebeurt er als je zelf wilt bepalen hoe de browser de afbeeldingen op je pagina schaalt?
Chrome 41 (bètaversie in januari 2015) introduceert een nieuwe CSS-eigenschap image-rendering: pixelated ( Spec ). Hiermee hebt u iets meer controle over hoe de browser een vergrote afbeelding weergeeft.
De CSS-eigenschap image-rendering en de waarde pixelated zijn interessant omdat ze de standaard soepele schaalvergroting van de browser (normaal gesproken bi-lineaire interpolatie) uitschakelen en vervangen door een ander schaalalgoritme (in de meeste gevallen 'nearrest neighbor') bij het wijzigen van de grootte van de afbeeldingen.
Stel je voor dat je een afbeelding van 2x2 pixels hebt en je schaalt die op naar 100x100 pixels, dan zou de browser die zo weergeven dat hij er niet blokkerig uitziet. Zoiets als:
Er zijn veel gevallen waarin u dit gladstrijken niet wilt en in plaats daarvan een methode wilt gebruiken die een nauwkeurigere weergave van de afbeelding behoudt.
Om dit effect te krijgen, past u eenvoudig image-rendering: pixelated; toe op uw afbeelding, als volgt.
<img
style="image-rendering: pixelated;"
width="100" height="100"
src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Probeer de demo . Zoals u kunt zien, heeft de toepassing van de eigenschap een aanzienlijk effect op hoe de afbeelding wordt weergegeven.
Deze eigenschap kan op veel plaatsen worden toegepast:
-
<img>-elementen -
<canvas style="image-rendering: pixelated">elementen - Elk element met een
background-image
Ik snap het nog steeds niet. Waar moet ik dit gebruiken?
Als u op uw site alleen maar foto's plaatst, is dit waarschijnlijk niet de bedoeling.
Een goede usecase zijn games, waarbij je het canvas vaak moet opschalen om het correct op het schermformaat te laten passen. Vóór deze CSS-eigenschap interpoleerde de browser het canvas zodanig dat het er wazig uitzag (zie hieronder [sic]).
Als u een hulpmiddel voor het boeken van vliegtickets of een app voor het weergeven van QR-codes bouwt, wil de gebruiker deze vaak op volledig scherm weergeven, zodat scannen gemakkelijker is. In dat geval is het van cruciaal belang dat u de beeldweergave goed regelt.
Als u geïnteresseerd bent in de implementatie, bekijk dan Issue 317991 (deze is open gelaten voor de implementatie van de crisp-edges-waarde. Markeer het issue met een ster om de implementatie te volgen).