image-rendering:pixelated

Jako deweloperzy stron internetowych ciągle pracujemy z obrazami i w większości przypadków przeglądarki świetnie radzą sobie z dostosowywaniem obrazów do granic projektów stron, zachowując przy tym ich atrakcyjność. Co jednak zrobić, gdy chcesz kontrolować, jak przeglądarka skaluje obrazy na stronie?

Chrome 41 (w wersji beta w styczniu 2015 r.) wprowadza nową właściwość CSS image-rendering: pixelated (Spec), która daje nieco większą kontrolę nad tym, jak przeglądarka renderuje powiększony obraz.

Właściwość CSS image-rendering i wartość pixelated są interesujące, ponieważ wyłączają standardowe płynne skalowanie przeglądarki (zwykle interpolację dwuliniową) i zastępują je innym algorytmem skalowania (w większości przypadków jest to skalowanie najbliższego sąsiada) podczas zmiany rozmiaru obrazów.

Wyobraź sobie, że masz obraz o wymiarach 2 × 2 piksele i powiększysz go do 100 × 100 pikseli. Przeglądarka wyświetli go w sposób, który nie będzie wyglądał na blokowy. Na przykład:

Płynne renderowanie

W wielu przypadkach nie będziesz potrzebować wygładzania. Zamiast tego możesz użyć metody, która zapewnia bardziej dokładne odwzorowanie obrazu.

Aby uzyskać ten efekt, po prostu zastosuj image-rendering: pixelated; do obrazu w ten sposób:

<img
    style="image-rendering: pixelated;"
    width="100" height="100"
    src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
Pikselizacja

Wypróbuj wersję demonstracyjną. Jak widać, zastosowanie tej właściwości ma duży wpływ na sposób renderowania obrazu.

Tej właściwości można używać w wielu miejscach:

  • Elementy: <img>
  • Elementy: <canvas style="image-rendering: pixelated">
  • dowolny element z właściwością background-image,

Nadal nie rozumiem. Gdzie można jej używać?

Jeśli w swojej witrynie wyświetlasz tylko zdjęcia, prawdopodobnie nie jest to dla Ciebie odpowiednie.

Świetnym przykładem zastosowania jest gra, w której często trzeba powiększyć płótno, aby pasowało do rozmiaru ekranu. Przed wprowadzeniem tej właściwości CSS przeglądarka interpolowała płótno w taki sposób, że wyglądało ono rozmycie (patrz poniżej).

Jeśli tworzysz narzędzie do sprzedaży biletów lotniczych lub aplikację wyświetlającą kody QR, użytkownik często będzie chciał wyświetlić je na pełnym ekranie, aby ułatwić skanowanie. Dlatego kontrolowanie renderowania obrazu jest bardzo ważne.

Jeśli chcesz zobaczyć implementację, zapoznaj się z problemem 317991 (pozostawiono go otwartym w celu wdrożenia wartości o ostrych krawędziach. Oznaczyć problem gwiazdką, aby śledzić jego implementację.