image-rendering
Оновлено: 21.12.2022
image-rendering
Повідомляє браузеру, яким алгоритмом інтерполювати зображення під час масштабування його розмірів або зміни масштабу в параметрах браузера.
Коротка інформація
| Значення за замовчуванням | auto |
| Успадковується | Так |
| Застосовується | До зображень, фонових картинок, <video>, <canvas> |
| Анімується | Ні |
Синтаксис
image-rendering: auto | crisp-edges | pixelatedЗначення
| auto | Браузер застосовує вбудований у нього алгоритм інтерполяції, зазвичай використовується бікубічний метод. |
| crisp-edges | Мета алгоритму - швидке відображення картинки, для чого застосовується метод інтерполяції за найближчими точками. Він не створює згладжування навколо ліній і його можна рекомендувати в тих випадках, коли потрібно зберегти початковий набір кольорів і різкість країв. |
| pixelated | При збільшенні розміру картинки зберігає контраст і контури зображення, не допускаючи розмиття кольорів і контурів. При зменшенні розмірів аналогічний auto. |
Приклад
У цьому прикладі дві картинки з шириною 30 пікселів збільшуються до 200 пікселів з використанням різних алгоритмів.
Примітка
Internet Explorer підтримує нестандартну властивість -ms-interpolation-mode.Safari до версії 10 підтримує властивість -webkit-image-rendering.
Firefox підтримує значення -moz-crisp-edges.