image-rendering

При помощи свойства image-rendering можно сообщить браузеру как интерполировать изображение когда его масштаб меняется. Интерполяция происходит всякий раз когда меняется размер изображения, это нужно чтобы изменить количество пикселей и справиться с искажениями на изображении.

Можно использовать с изображениями, фоновыми картинками, <video> и <canvas>.

        
          
          img {  image-rendering: -webkit-optimize-contrast;  image-rendering: -o-crisp-edges;  image-rendering: -moz-crisp-edges;  image-rendering: crisp-edges;}
          img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: -o-crisp-edges;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В качестве значений можно использовать одно из ключевых слов.

• auto — Значение по умолчанию. Применяется встроенный алгоритм интерполяции.
• crisp-edges — применяется метод интерполяции по ближайшим точкам. Такое значение можно использовать когда важно поддержать первоначальный набор цветов и резкость.
• pixelated — работает по-разному при увеличении и при уменьшении.
• smooth — Экспериментальное значение. Применяется метод билинейной интерполяции, подходит для задач когда надо максимально сохранить качество изображения, например для фотографий.
• high-quality — Экспериментальное значение. Работает так же как smooth, но с предпочтением более качественного масштабирования если ресурсов железа не хватает такие изображения имеют больший приоритет. Когда изображение увеличивается сохраняется контрастность и контуры, а когда уменьшается работает алгоритм по умолчанию.

Исходный размер картинки в демо 185 на 185 пикселей. Можно потянуть за правый нижний угол чтобы изменить размер картинки и посмотреть как работают разные режимы.

crisp-edges нужно писать с вендорными префиксами.

• -webkit-optimize-contrast для Chrome;
• -o-crisp-edges для Opera;
• -moz-crisp-edges для Firefox;

Проверяйте поддержку экспериментальных значений smooth и high-quality на Can I use.

Что такое интерполяция вообще?

Представьте что собираетесь устроить вечеринку с друзьями и думаете сколько пицц нужно заказать на вашу большую компанию.

Если вы собираете эту компанию первый раз, то статистических данных совсем немного, предугадать нужно количество коробок сложно.

Что заказать, достаточно ли будет Пепперони и Маргарит, или кто-то предпочитает поострее и нужно взять Диабло?

После первой встречи у вас будет совсем немного данных насчёт предпочтений, их станет побольше после второй. На основании двух вечеринок можно будет выявить какую-то вкусовую закономерность, а чем больше вечеринок, тем больше данных,значит у вас на руках будет больше информации из которой можно строить закономерности.

Такой же принцип работает и с изображениями, чем больше данных о пикселях, тем лучше сработает алгоритм. Важно помнить, что значения пикселей могут меняться довольно резко от точки к точке, именно поэтому изображение сильно теряет в качестве если его растянуть, да и добавить несуществующей детальности не получится.