Візуалізація зображень - CSS-хитрощі

В image-renderingвизначає властивість , як браузер повинен відображати зображення , якщо воно масштабується вгору або вниз від його початкових розмірів. За замовчуванням кожен браузер намагатиметься застосувати псевдонім до цього масштабованого зображення, щоб запобігти спотворенням, але іноді це може бути проблемою, якщо ми хочемо, щоб зображення зберегло початкову піксельну форму.

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

Про ці три можливі значення:

auto: значення за замовчуванням, яке використовує стандартний алгоритм браузера для максимального вигляду зображення.
crisp-edges: контраст, кольори та краї зображення зберігатимуться без згладжування та розмиття. Відповідно до специфікації, це було спеціально призначене для піксельного мистецтва. Це значення стосується зображень, збільшених або зменшених.
pixelated: у міру зміни розміру зображення браузер збереже свій піксельний стиль за допомогою масштабування найближчого сусіда. Це значення стосується лише зображень, які збільшені.

Цю властивість можна застосувати до фонових зображень, canvasелементів, а також до вбудованих зображень. Однак важливо зазначити, що тестування цих значень на даний момент особливо заплутане через відсутність постійної підтримки браузера.

Приклад

Ось дуже маленьке вбудоване зображення, яке складається з чотирьох кольорових пікселів:

Якщо ми змінимо ширину цього вбудованого зображення на, 300pxто в Chrome (41) ми виявимо, що браузер намагався оптимізувати зображення якнайкраще:

Щоб зберегти свій первісний нерівній вигляд, ми можемо використовувати наступне pixelatedзначення, приблизно так:

img ( image-rendering: pixelated; )

В результаті браузер вибирає альтернативний алгоритм, за допомогою якого оброблятиме зображення. У цьому прикладі Chrome видалить псевдонім за замовчуванням:

На жаль, після багатого тестування здається, що браузери на даний момент інтерпретують значення crisp-edgesі pixelatedзначення дуже заплутано, тому важливо ще раз зазначити, що ця специфікація знаходиться на дуже ранніх стадіях. Наприклад, Chrome видає pixelatedзображення так само, як і Firefox та Safari crisp-edges.

Приклад QR-коду

Інший варіант використання цієї властивості може бути для QR-кодів, де ви хочете збільшити його розмір, не спотворюючи його, використовуючи стандартне згладжування. Не забудьте перевірити цей приклад у повноекранному режимі, щоб побачити розтягнення зображення:

Перегляньте демонстраційну програму Pen Image-rendering від Robin Rendle (@robinrendle) на CodePen.

Переключити приклад

У ручці нижче можна перемикатися між цими значеннями та бачити розбіжності між браузерами:

Дивіться демонстраційне зображення Pen Image від Robin Rendle (@robinrendle) на CodePen.

Підтримка браузера

crisp-edgesв даний час потрібні префікси постачальника ( -moz-crisp-edges), щоб отримати найкращу підтримку.

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.