Képalkotás - CSS-trükkök | CSS Almanach 2025

A image-renderingtulajdonság meghatározza, hogy a böngésző miként jelenítsen meg egy képet, ha felfelé vagy lefelé méretezik az eredeti méretét. Alapértelmezés szerint minden böngésző megpróbálja álnevet alkalmazni erre a méretezett képre a torzítások elkerülése érdekében, de ez néha problémát jelenthet, ha azt akarjuk, hogy a kép megőrizze eredeti pixeles formáját.

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

A három lehetséges értékről:

auto: alapértelmezett érték, amely a böngésző szabványos algoritmusát használja a kép megjelenésének maximalizálására.
crisp-edges: a kép kontrasztja, színei és szélei simítás vagy elmosódás nélkül megmaradnak. A specifikáció szerint ezt kifejezetten pixel art-ra szánták. Ez az érték a felfelé vagy lefelé méretezett képekre vonatkozik.
pixelated: amint a kép mérete változik, a böngésző megőrzi pixelezett stílusát a legközelebbi szomszéd méretezésével. Ez az érték csak a felnagyított képekre vonatkozik.

Ez a tulajdonság alkalmazható háttérképekre, canvaselemekre, valamint beépített képekre is. Fontos megjegyezni, hogy ezeknek az értékeknek a tesztelése jelenleg különösen zavaró a következetes böngésző-támogatás hiánya miatt.

Példa

Itt egy nagyon kicsi, négy színes képpontból álló, inline kép:

Ha ennek a belső képnek a szélességét megváltoztatjuk a 300pxChrome-ra (41), akkor azt találjuk, hogy a böngésző megpróbálta a lehető legjobban optimalizálni a képet:

Az eredeti pixeles megjelenés megőrzéséhez a következő pixelatedértéket használhatjuk, például:

img ( image-rendering: pixelated; )

Ennek eredményeként a böngésző alternatív algoritmust választ a kép feldolgozásához. Ebben a példában a Chrome eltávolítja az alapértelmezett álnevet:

Sajnos a sok teszt után úgy tűnik, hogy a böngészők pillanatnyilag nagyon zavaros módon értelmezik a crisp-edgesés pixelatedértékeket, ezért fontos még egyszer megjegyezni, hogy ez a specifikáció még a legelején van. Például úgy tűnik, hogy a Chrome pixelatedugyanúgy rendereli a képeket, mint a Firefox és a Safari crisp-edges.

QR-kód példa

Ennek a tulajdonságnak egy másik felhasználási esete lehet a QR-kódok esetében, ahol a méretet a torzítás nélkül megnövelni szeretné a szokásos anti-aliasing használatával. Ellenőrizze ezt a példát teljes képernyős módban, hogy lássa a képet:

Lásd Robin Rendle (@robinrendle) Pen Image-rendering demóját a CodePen-en.

Váltási példa

Az alábbi Tollban lehet váltani ezen értékek között, és láthatja a böngészők közötti eltéréseket:

Lásd Robin Rendle (@robinrendle) Pen Image rendering demóját a CodePen-en.

Böngésző támogatás

crisp-edgesjelenleg a szállító előtagokra ( -moz-crisp-edges) van szükség a lehető legjobb támogatás eléréséhez.

Ez a böngésző támogatási adat a Caniuse cégtől származik, amely részletesebben szerepel. Egy szám azt jelzi, hogy a böngésző támogatja az adott és újabb verziók szolgáltatásait.