Strona główna >CSS >Leksykon CSS – właściwości, selektory, funkcje >image-rendering

image-rendering

image-rendering: auto | smooth | crisp-edges | pixelated

Jak przeglądarka skaluje obrazki rastrowe – gładko albo z ostrymi krawędziami pikseli. Nadaje się do pixel artu, kodów QR i małych obrazków powiększanych na dużą powierzchnię.

Wartości

  • auto – domyślnie: przeglądarka wygładza powiększony obrazek (zdjęcia wyglądają dobrze, małe obrazki są nieostre).
  • pixelated – przy powiększaniu każdy piksel obrazka rysuje się jako ostry kwadrat.
  • crisp-edges – zachowuje ostre krawędzie i kontrast (bez wygładzania); Chrome obsługuje to bez prefiksu od wersji 148.
  • smooth – wygładzanie dla zdjęć; zna je tylko Firefox.

Wartość początkowa: auto. Dziedziczona: tak. Dotyczy: wszystkich elementów (działa na obrazki, obrazki tła i canvas).

Przykłady

Obrazek 4 × 4 px powiększony do 96 × 96 px:

<figure><div class="small"></div><figcaption>auto</figcaption></figure>
<figure><div class="small sharp"></div><figcaption>pixelated</figcaption></figure>

figure {
  display: inline-block;
  margin: 0 8px 8px 0;
  vertical-align: top;
}
figcaption { font: 12px/1.6 monospace; }
.small {
  width: 96px;
  height: 96px;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAIAAAAmkwkpAAAAKklEQVR42mNg6Lj4/7U1lPz/2vqlXPJLuWQQh6HjIoTD0HGRAa7m///AMRpHEE2hF01AAAAAElFTkSuQmCC);
  background-size: 100% 100%;
}
.sharp { image-rendering: pixelated; }
Wynik
auto
pixelated

Kod QR wygenerowany w niskiej rozdzielczości, powiększony o całkowitą wielokrotność:

<img class="qr" src="/img/qr-33px.png" alt="Kod QR z linkiem do strony">

.qr {
  width: 165px;   /* 33 px × 5 */
  height: 165px;
  image-rendering: pixelated;
}

Na co uważać

  • Powiększaj o całkowitą wielokrotność (2×, 3×, 5×…). Przy innym stosunku piksele mają różną wielkość – przy kodzie QR może to pogorszyć skanowanie.
  • Na obrazki wektorowe (SVG) i gradienty, które są ostre w każdym rozmiarze, nie ma wpływu.
  • Właściwość jest dziedziczona: ustawiona na rodzicu dotyczy wszystkich obrazków w nim.
  • crisp-edges obsługują Chrome dopiero od wersji 148 (starsze wersje tylko niestandardowe -webkit-optimize-contrast), Firefox od 65 i Safari od 7. pixelated jest od dawna obsługiwane wszędzie (Chrome 41, Firefox 93, Safari 10) i do ostrych pikseli jest pewniejszym wyborem.

Obsługa w przeglądarkach

Baseline – szeroko dostępne: we wszystkich popularnych przeglądarkach od stycznia 2020, za szeroko dostępne uznawane od lipca 2022. Od wersji: Chrome 13, Firefox 3.6, Safari 6. Stan: październik 2026 (MDN browser-compat-data).

Zobacz też:
object-fit
background-size
url()
filter