Jako deweloperzy stron internetowych ciągle pracujemy z obrazami i w większości przypadków przeglądarki świetnie radzą sobie ze skalowaniem obrazów, aby pasowały do granic naszych projektów stron, a przy tym zachowują ich atrakcyjność. Co jednak zrobić, gdy chcesz kontrolować, jak przeglądarka skaluje obrazy na stronie?
W Chrome 41 (w wersji beta w styczniu 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 wyświetli go w sposób, który nie będzie wyglądał na blokowy. Na przykład:
W wielu przypadkach nie będziesz chciał stosować tego działania wygładzającego i zamiast tego użyjesz metody, która zachowuje 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. Często trzeba zwiększyć rozmiar kanwy, aby pasowała 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 chce, aby były one wyświetlane na pełnym ekranie, co ułatwia skanowanie. Dlatego kontrolowanie renderowania obrazu jest bardzo ważne.
Jeśli chcesz zobaczyć implementację, zapoznaj się z problemem 317991 (pozostawiony otwarty w celu wdrożenia wartości o ostrych krawędziach. Oznacz problem gwiazdką, aby śledzić jego implementację.