Redare imagine - CSS-Tricks | Almanah CSS 2025

De image-renderingdefinește proprietatea modul în care browser - ul ar trebui să asigure o imagine dacă este scalat în sus sau în jos de la dimensiunile sale originale. În mod implicit, fiecare browser va încerca să aplice aliasing la această imagine scalată pentru a preveni distorsiunea, dar uneori aceasta poate fi o problemă dacă vrem ca imaginea să își păstreze forma pixelată originală.

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

Despre aceste trei valori posibile:

auto: valoare implicită care folosește algoritmul standard al browserului pentru a maximiza aspectul unei imagini.
crisp-edges: contrastul, culorile și marginile imaginii vor fi păstrate fără nicio netezire sau estompare. Conform specificațiilor, acest lucru a fost destinat în mod special pentru pixel art. Această valoare se aplică imaginilor scalate în sus sau în jos.
pixelated: pe măsură ce imaginea își schimbă dimensiunea, browserul își va păstra stilul pixelat utilizând scalarea cea mai apropiată. Această valoare se aplică numai imaginilor care sunt mărite la scară.

Această proprietate poate fi aplicată imaginilor de fundal, canvaselementelor și imaginilor în linie. Cu toate acestea, este important să rețineți că testarea acestor valori în acest moment este deosebit de confuză din cauza lipsei suportului consistent al browserului.

Exemplu

Iată o imagine foarte mică în linie, formată din patru pixeli colorați:

Dacă schimbăm lățimea acestei imagini în linie, 300pxatunci în Chrome (41) vom descoperi că browserul a încercat să optimizeze imaginea cât de bine poate:

Pentru a-și păstra aspectul original pixelat, putem folosi următoarea pixelatedvaloare:

img ( image-rendering: pixelated; )

Astfel, browserul alege un algoritm alternativ cu care să proceseze imaginea. În acest exemplu, Chrome va elimina aliasarea implicită:

Din păcate, după o mulțime de testări, se pare că browserele interpretează valorile crisp-edgesși pixelatedvalorile în moduri foarte confuze în acest moment, deci este important să rețineți încă o dată că această specificație este în primele sale zile. De exemplu, Chrome pare să redea pixelatedimagini în același mod în care Firefox și Safari vor reda imagini crisp-edges.

Exemplu de cod QR

Un alt caz de utilizare a acestei proprietăți ar putea fi pentru codurile QR în care doriți să măriți dimensiunea acesteia fără a o distorsiona folosind anti-aliasingul standard. Asigurați-vă că verificați acest exemplu în modul ecran complet pentru a vedea întinderea imaginii:

Vedeți demo-ul de redare a imaginii stilou de Robin Rendle (@robinrendle) pe CodePen.

Comutați exemplul

În stiloul de mai jos este posibil să comutați între aceste valori și să vedeți discrepanțele dintre browsere:

Consultați demonstrația de redare a imaginii stilului de către Robin Rendle (@robinrendle) pe CodePen.

Suport pentru browser

crisp-edgesnecesită în prezent prefixele furnizorului ( -moz-crisp-edges) pentru a obține cel mai bun suport posibil.

Aceste date de asistență pentru browser provin de la Caniuse, care are mai multe detalii. Un număr indică faptul că browserul acceptă funcția în versiunea respectivă și în sus.