В image-renderingопределяет свойство , как браузер должен отображать изображение , если оно масштабируется вверх или вниз от его первоначальных размеров. По умолчанию каждый браузер будет пытаться применить псевдоним к этому масштабированному изображению, чтобы предотвратить искажение, но иногда это может быть проблемой, если мы хотим, чтобы изображение сохраняло исходную пиксельную форму.
img ( image-rendering: auto; image-rendering: crisp-edges; image-rendering: pixelated; )Об этих трех возможных значениях:
auto: значение по умолчанию, которое использует стандартный алгоритм браузера для максимального увеличения внешнего вида изображения.crisp-edges: контраст, цвета и края изображения будут сохранены без сглаживания или размытия. Согласно спецификации, это было специально предназначено для пиксельной графики. Это значение применяется к изображениям, увеличенным или уменьшенным.pixelated: при изменении размера изображения браузер сохранит пиксельный стиль, используя масштабирование до ближайшего соседа. Это значение применяется только к увеличенным изображениям.
Это свойство может применяться к фоновым изображениям, canvasэлементам, а также встроенным изображениям. Однако важно отметить, что тестирование этих значений в настоящее время особенно запутано из-за отсутствия постоянной поддержки браузером.
Пример
Вот очень маленькое встроенное изображение, состоящее из четырех цветных пикселей:
Если мы изменим ширину этого встроенного изображения на 300pxthen в Chrome (41), мы обнаружим, что браузер пытался оптимизировать изображение как можно лучше:
Чтобы сохранить исходный пиксельный вид, мы можем использовать следующее pixelatedзначение, например:
img ( image-rendering: pixelated; )Это приводит к тому, что браузер выбирает альтернативный алгоритм обработки изображения. В этом примере Chrome удалит псевдоним по умолчанию:
К сожалению , после того, как много испытаний, кажется , что браузеры интерпретируют crisp-edgesи pixelatedзначение в очень запутанных пути в тот момент , так что важно еще раз отметить , что эта спецификация находится в его первые дни. Например, кажется, что Chrome отображает pixelatedизображения таким же образом, как Firefox и Safari crisp-edges.
Пример QR-кода
Другой вариант использования этого свойства может быть для QR-кодов, когда вы хотите увеличить его размер, не искажая его, используя стандартное сглаживание. Обязательно проверьте этот пример в полноэкранном режиме, чтобы увидеть растяжение изображения:
См. Демонстрацию рендеринга Pen Image от Робина Рендла (@robinrendle) на CodePen.
Переключить пример
С помощью пера ниже можно переключаться между этими значениями и видеть расхождения между браузерами:
См. Демонстрацию рендеринга Pen Image от Робина Рендла (@robinrendle) на CodePen.
Поддержка браузера
crisp-edgesв настоящее время требуются префиксы поставщика ( -moz-crisp-edges) для получения наилучшей поддержки.
Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.
Рабочий стол
| Хром | Fire Fox | IE | Край | Сафари |
|---|---|---|---|---|
| 41 год | 3,6 * | 11 * | 79 | 10 |
Мобильный / планшет
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 88 | 85 * | 81 год | 10,0-10,2 |
На момент этого обновления Firefox 61 поддерживает, crisp-edgesно не поддерживает, а pixelatedChrome 68 поддерживает, pixelatedно не поддерживает crisp-edges.