Bildåtergivning - CSS-tricks | CSS Almanack 2025

De image-renderingfastighets definierar hur webbläsaren ska gör en bild om den skalas upp eller ner från sina ursprungliga dimensioner. Som standard försöker varje webbläsare använda aliasing på den här skalade bilden för att förhindra förvrängning, men det kan ibland vara ett problem om vi vill att bilden ska bevara sin ursprungliga pixelform.

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

Om dessa tre möjliga värden:

auto: standardvärde som använder webbläsarens standardalgoritm för att maximera en bilds utseende.
crisp-edges: bildens kontrast, färger och kanter bevaras utan någon utjämning eller suddighet. Enligt specifikationen var detta särskilt avsett för pixelkonst. Detta värde gäller för bilder som skalas upp eller ner.
pixelated: när bilden ändrar storlek kommer webbläsaren att bevara sin pixelformade stil genom att använda skalning av närmaste granne. Detta värde gäller endast för bilder som skalas upp.

Den här egenskapen kan tillämpas på bakgrundsbilder, canvaselement såväl som inline-bilder. Det är dock viktigt att notera att testning av dessa värden just nu är särskilt förvirrande på grund av bristen på konsekvent webbläsarstöd.

Exempel

Här är en mycket liten inbyggd bild som består av fyra färgade pixlar:

Om vi ändrar bredden på den inbyggda bilden till 300pxsedan i Chrome (41) kommer vi att hitta att webbläsaren har försökt optimera bilden så bra den kan:

För att bevara sitt ursprungliga pixelerade utseende kan vi använda följande pixelatedvärde, som så:

img ( image-rendering: pixelated; )

Detta resulterar i att webbläsaren väljer en alternativ algoritm som bilden ska bearbetas med. I det här exemplet tar Chrome bort aliasningen:

Tyvärr efter en hel del tester verkar det som att webbläsare tolkar crisp-edgesoch pixelatedvärdena på mycket förvirrande sätt just nu, så det är viktigt att notera återigen att denna specifikation är i sina mycket tidiga dagar. Till exempel verkar Chrome göra pixelatedbilder på samma sätt som Firefox och Safari kommer att göra bilder med crisp-edges.

QR-kodsexempel

Ett annat användningsfall för den här egenskapen kan vara för QR-koder där du vill öka storleken utan att snedvrida den genom att använda standard anti-aliasing. Se till att kontrollera detta exempel i helskärmsläge för att se bildsträckan:

Se pennbild rendering demo av Robin Rendle (@robinrendle) på CodePen.

Växla exempel

I pennan nedan är det möjligt att växla mellan dessa värden och se skillnaderna mellan webbläsare:

Se pennbild rendering demo av Robin Rendle (@robinrendle) på CodePen.

Webbläsarstöd

crisp-edgeskräver för närvarande leverantörsprefix ( -moz-crisp-edges) för att få bästa möjliga support.

Denna webbläsares supportdata kommer från Caniuse, som har mer detaljer. Ett nummer indikerar att webbläsaren stöder funktionen i den versionen och uppåt.