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?
W Chrome 41 (wersja beta z stycznia 2015 r.) wprowadzono 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 przeskalujesz go do 100 × 100 pikseli. Przeglądarka zrenderuje go w sposób, który nie powoduje, że obraz wygląda na blokowy. Na przykład:
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=">
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ć kod na pełnym ekranie, aby ułatwić jego 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. Oznacz problem gwiazdką, aby śledzić jego implementację.