Houd Pixelachtige foto ‘ s Korrelig als Zij Schaal

0
67

Dit is een kleine herinnering dat er sprake is van een CSS-eigenschap voor het helpen bepalen wat er gebeurt met afbeeldingen als ze schalen: – beeld-weergave.

We zijn erg gewend aan het idee dat het schalen van een afbeelding groter is dan de natuurlijke grootte (upscaling) veroorzaakt wazig. Zo verschrikkelijk dat ook is, het is de browser het beste doen kan via algoritmen glad uit van een afbeelding meer pixels dan deze gegevens heeft. Maar laten we zeggen dat je liever niet doen. Zeggen dat de afbeelding is al pixel-y (pixel art), of als u liever het uiterlijk van een korrelig opschaling.

Je kunt het!

img {
afbeelding-rendering: korrelig;
afbeelding-rendering: -moz-scherpe-randen;
afbeelding-rendering: scherpe randen;
}

Het is een beetje onhandig in de spec biedt drie waarden: auto, korrelig, en scherpe randen. Zowel korrelig en scherpe randen, voor pixel-art, verschijnen om hetzelfde te doen voor mij, hoewel de spec spreekt over hen iets anders (korrelig raadt de “nearest neighbor” of soortgelijk algoritme terwijl de scherpe randen niet zo specifiek).

Toe te voegen aan de onbeholpenheid, Chrome ondersteunt alleen korrelig en Firefox ondersteunt alleen scherpe randen, en voor de diepste steun van de browser, moet u de prefix-moz-scherpe-randen. Gelukkig, je kunt, sla je ze allemaal samen en het lijkt goed.

Hier is een voorbeeld met en zonder het gebruik van een afbeelding van James T. vond ik op Tumblr:

Zie de Pen pixelachtige foto ‘ s van Chris Coyier (@chriscoyier) op CodePen.