Renderowanie obrazu - CSS-Tricks

W image-renderingobiekcie określa jak przeglądarka powinna renderowania obrazu, jeśli jest skalowany w górę lub w dół od swoich pierwotnych wymiarów. Domyślnie każda przeglądarka będzie próbowała zastosować aliasing do tego skalowanego obrazu, aby zapobiec zniekształceniom, ale czasami może to stanowić problem, jeśli chcemy, aby obraz zachował swoją oryginalną pikselowaną postać.

img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )

O tych trzech możliwych wartościach:

auto: wartość domyślna wykorzystująca standardowy algorytm przeglądarki w celu zmaksymalizowania wyglądu obrazu.
crisp-edges: kontrast, kolory i krawędzie obrazu zostaną zachowane bez wygładzania lub rozmywania. Zgodnie ze specyfikacją było to specjalnie przeznaczone do grafiki pikselowej. Ta wartość dotyczy obrazów przeskalowanych w górę lub w dół.
pixelated: gdy obraz zmienia rozmiar, przeglądarka zachowuje swój styl pikselowy przy użyciu skalowania najbliższego sąsiada. Ta wartość dotyczy tylko obrazów, które są skalowane w górę.

Tę właściwość można zastosować do obrazów tła, canvaselementów, a także obrazów wbudowanych. Należy jednak zauważyć, że testowanie tych wartości w tym momencie jest szczególnie mylące ze względu na brak spójnej obsługi przeglądarek.

Przykład

Oto bardzo mały obraz w wierszu, który składa się z czterech kolorowych pikseli:

Jeśli zmienimy szerokość tego wbudowanego obrazu na taką 300pxw Chrome (41), okaże się, że przeglądarka próbowała zoptymalizować obraz najlepiej, jak potrafiła:

Aby zachować oryginalny wygląd w pikselach, możemy użyć następującej pixelatedwartości, na przykład:

img ( image-rendering: pixelated; )

Powoduje to, że przeglądarka wybiera alternatywny algorytm przetwarzania obrazu. W tym przykładzie Chrome usunie domyślny alias:

Niestety, po wielu testach wydaje się, że przeglądarki obecnie interpretują wartości crisp-edgesi pixelatedw bardzo mylący sposób, dlatego ważne jest, aby jeszcze raz zauważyć, że ta specyfikacja jest na bardzo wczesnym etapie. Na przykład Chrome wydaje się renderować pixelatedobrazy w taki sam sposób, w jaki Firefox i Safari będą renderować obrazy z crisp-edges.

Przykład kodu QR

Innym przypadkiem użycia tej właściwości może być kod QR, w którym chcesz zwiększyć jego rozmiar bez zniekształcania go za pomocą standardowego wygładzania krawędzi. Sprawdź ten przykład w trybie pełnoekranowym, aby zobaczyć rozciągnięty obraz:

Zobacz demo renderowania obrazów pióra autorstwa Robina Rendle (@robinrendle) w witrynie CodePen.

Przełącz przykład

W poniższym piórze można przełączać się między tymi wartościami i zobaczyć rozbieżności między przeglądarkami:

Zobacz demo renderowania obrazu pióra autorstwa Robina Rendle (@robinrendle) w witrynie CodePen.

Wsparcie przeglądarki

crisp-edgesobecnie wymaga prefiksów dostawców ( -moz-crisp-edges), aby uzyskać najlepszą możliwą obsługę.

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.