Beeldweergave - CSS-trucs | CSS Almanac 2025

De image-renderingeigenschap definieert hoe de browser een afbeelding moet renderen als deze wordt vergroot of verkleind ten opzichte van de oorspronkelijke afmetingen. Standaard probeert elke browser aliasing toe te passen op deze geschaalde afbeelding om vervorming te voorkomen, maar dit kan soms een probleem zijn als we willen dat de afbeelding zijn oorspronkelijke korrelige vorm behoudt.

img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )

Over die drie mogelijke waarden:

auto: standaardwaarde die het standaardalgoritme van de browser gebruikt om het uiterlijk van een afbeelding te maximaliseren.
crisp-edges: het contrast, de kleuren en de randen van de afbeelding blijven behouden zonder enige afvlakking of vervaging. Volgens de specificatie was dit specifiek bedoeld voor pixelkunst. Deze waarde is van toepassing op afbeeldingen die omhoog of omlaag zijn geschaald.
pixelated: als de grootte van de afbeelding verandert, behoudt de browser zijn gepixelde stijl door schaling van de dichtstbijzijnde buur te gebruiken. Deze waarde is alleen van toepassing op afbeeldingen die zijn opgeschaald.

Deze eigenschap kan worden toegepast op achtergrondafbeeldingen, canvaselementen en inline afbeeldingen. Het is echter belangrijk op te merken dat het testen van deze waarden op dit moment bijzonder verwarrend is vanwege het gebrek aan consistente browserondersteuning.

Voorbeeld

Hier is een heel klein inline-beeld dat bestaat uit vier gekleurde pixels:

Als we de breedte van deze inline afbeelding wijzigen 300pxin Chrome (41), zullen we zien dat de browser heeft geprobeerd de afbeelding zo goed mogelijk te optimaliseren:

Om de oorspronkelijke korrelige look te behouden, kunnen we de volgende pixelatedwaarde gebruiken, zoals:

img ( image-rendering: pixelated; )

Dit heeft tot gevolg dat de browser een alternatief algoritme kiest om de afbeelding te verwerken. In dit voorbeeld verwijdert Chrome de standaard aliasing:

Helaas lijkt het er na veel testen op dat browsers de crisp-edgesen pixelatedwaarden op dit moment op zeer verwarrende manieren interpreteren, dus het is belangrijk om nogmaals op te merken dat deze specificatie nog in de kinderschoenen staat. Chrome lijkt bijvoorbeeld pixelatedafbeeldingen weer te geven op dezelfde manier als Firefox en Safari afbeeldingen zullen weergeven crisp-edges.

QR-codevoorbeeld

Een ander gebruik van deze eigenschap kan zijn voor QR-codes waarvan u de grootte wilt vergroten zonder deze te vervormen door gebruik te maken van de standaard anti-aliasing. Zorg ervoor dat u dit voorbeeld in volledig scherm bekijkt om de afbeelding uit te rekken:

Bekijk de demo over het renderen van Pen Image door Robin Rendle (@robinrendle) op CodePen.

Toggle voorbeeld

In de onderstaande pen is het mogelijk om tussen deze waarden te schakelen en de verschillen tussen browsers te zien:

Bekijk de demo voor het renderen van Pen Image door Robin Rendle (@robinrendle) op CodePen.

Browser-ondersteuning

crisp-edgesvereist momenteel leveranciersvoorvoegsels ( -moz-crisp-edges) om de best mogelijke ondersteuning te krijgen.

Deze browserondersteuningsgegevens zijn van Caniuse, die meer details bevat. Een getal geeft aan dat de browser de functie ondersteunt vanaf die versie.