Programiści stron internetowych cały czas bawią się obrazami i w większości przypadków przeglądarki świetnie radzą sobie z skalowaniem obrazów, aby pasowały do projektowania witryny, a jednocześnie dbają o estetykę. Co się jednak stanie, gdy zechcesz kontrolować sposób, w jaki przeglądarka skaluje obrazy na stronie?
W Chrome 41 (wersja beta w styczniu 2015 r.) wprowadziliśmy nową właściwość CSS image-rendering: pixelated (Specyfikacja), która zapewnia trochę większą kontrolę nad sposobem renderowania powiększonego obrazu przez przeglądarkę.
Właściwość CSS image-rendering oraz wartość pixelated są interesujące, ponieważ wyłączają standardowe płynne skalowanie przeglądarki (normalnie biliniowa interpolacja) i zastępują je innym algorytmem skalowania (w większości przypadków najbliższy sąsiad) podczas zmiany rozmiaru obrazów.
Załóżmy, że masz obraz o wymiarach 2 × 2 piksele i przeskalowano go do 100 × 100 pikseli. Przeglądarka renderuje go w taki sposób, aby nie wyglądały na bloki. Na przykład:
W wielu przypadkach zalecamy użycie metody, która pozwala zachować dokładną reprezentację obrazu.
Aby uzyskać ten efekt, wystarczy zastosować atrybut 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 prezentację Jak widać, zastosowanie tej właściwości ma duży wpływ na sposób renderowania obrazu.
Tę właściwość można stosować w wielu miejscach:
- Elementy:
<img> - Elementy:
<canvas style="image-rendering: pixelated"> - Każdy element z właściwością
background-image
Nadal nie rozumiem. Gdzie mam go używać?
Jeśli w swojej witrynie wyświetlasz tylko zdjęcia, prawdopodobnie tego nie chcesz.
Świetnym przypadkiem są gry. Często trzeba powiększać obszar roboczy, aby prawidłowo dopasować rozmiar do ekranu. Przed wprowadzeniem tej właściwości CSS przeglądarka interpolowałaby obszar roboczy w taki sposób, że wyglądałby on niewyraźnie (patrz niżej [sic]).
Jeśli tworzysz narzędzie do sprzedaży biletów lotniczych lub aplikację, która wyświetla kody QR, użytkownicy często wolą, żeby była ona wyświetlana w trybie pełnoekranowym, co ułatwia skanowanie. Dlatego kluczowa jest kontrola renderowania obrazów.
Jeśli chcesz zobaczyć implementację, zapoznaj się z informacją o problemie 317991 (pozostawia on otwarty na potrzeby wdrożenia wartości) ostrych krawędzi. Oznacz problem gwiazdką, aby śledzić implementację).