Własność CSS image-rendering

Własność CSS image-rendering określa, w jaki sposób przeglądarka ma wyrenderować obrazy, które zostały powiększone lub zmniejszone. Jest to własność dziedziczona, a więc ma zastosowanie nie tylko bezpośrednio do elementu, dla którego jest zdefiniowana, ale także do wszystkich obrazów ustawionych za pomocą innych własności CSS jak i elementów potomnych.

Domyślnie przeglądarki stosują algorytmy wygładzania do skalowanych obrazów, aby zapewnić im jak najlepszy wygląd. W większości przypadków jest to korzystne, ale czasami autor woli zachować oryginalną formę, np. kiedy pokazuje obrazy w „kanciastej” pikselowej formie. W takim przypadku może posłużyć się własnością image‑rendering, która zapobiegnie zniekształceniu grafiki przez algorytmy wygładzające.

Wartości i składnia

Własność image‑rendering przyjmuje jako wartość trzy słowa kluczowe:

• auto – przeglądarka sama wybiera algorytm skalowania.
• crisp-edges – algorytm skalowania obrazu zachowuje kontrast i krawędzie oraz nie stosuje wygładzania kolorów ani rozmazania. To ustawienie jest przeznaczone głównie dla rysunków konturowych.
• pixelated – algorytm stara się maksymalnie zachować pikselowanie oryginału, ale dopuszcza lekkie wygładzanie, jeśli ma ono pomóc uniknąć zniekształcenia obrazu.

Przykłady

Jednym z dobrych przykładów sytuacji, w których może przydać się własność image‑rendering, jest pokazywanie na stronach internetowych kodów kreskowych albo QR w powiększeniu. Poniżej znajduje się oryginalny obraz:

Jeśli powiększymy go czterokrotnie w przeglądarce i nie użyjemy własności image‑rendering lub nadamy jej wartość auto, to kod ten będzie wyglądał tak:

Jak widać, obraz jest lekko niewyraźny i zamglony. Zastosujemy więc własność image‑rendering o własności crisp-edges:

img {
  image-rendering: crisp-edges;
}

Teraz ten sam obraz w tym samym powiększeniu wygląda tak:

Grafika jest o wiele bardziej wyraźna. Praktycznie taki sam efekt uzyskamy, gdy użyjemy wartości pixelated:

img {
  image-rendering: pixelated;
}

Efekt:

Zastosowanie

Własność CSS image‑rendering ma zastosowanie do wszystkich elementów HTML.

Podsumowanie