Programiści stron internetowych cały czas bawią się obrazami, a w większości przypadków przeglądarki świetnie radzą sobie z ich skalowaniem, by dopasować je do granic projektu, a jednocześnie zachować ładny wygląd. 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:
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ć taki efekt, wystarczy zastosować image-rendering: pixelated; do obrazu w następujący 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.
Tę właściwość możesz stosować 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.
Doskonałym 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 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 (pozostawiono go otwartym w celu wdrożenia wartości o ostrych krawędziach. Oznaczyj problem gwiazdką, aby śledzić jego implementację.