| Інтернет Експлорер | Хром | Опера | Сафарі | Файрфокс | Андроїд | iOS |
| 10.0+ | 11.60+ | 3.6+ |
Коротка інформація
| Значення за замовчуванням | авто |
|---|---|
| Успадковується | Так |
| Застосовується | До зображень, фонових картинок, <відео>, <холст> |
Версії CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Опис
Повідомляє браузеру, яким алгоритмом інтерполювати зображення при зміні його розмірів або масштабуванні у параметрах браузера.
Синтаксис
image-rendering: авто | optimizeSpeed | optimizeQuality | inherit | crisp-edges
Значення
- авто
- Браузер автоматично підбирає алгоритм інтерполяції, зазвичай відповідає оптимізації якості.
- optimizeSpeed
- Ціль алгоритму — швидке відображення зображення, застосовується метод інтерполяції за найближчими точками. Він не створює згладжування навколо ліній і його можна рекомендувати у випадках, коли потрібно зберегти початковий набір кольорів і чіткість країв.
- optimizeQuality
- Підвищує якість зображення за рахунок використання бікубічного методу інтерполяції. Це дає згладжені межі і плавний тоновий діапазон кольорів.
- crisp-edges
- Зберігає контраст і контури зображення, не допускаючи розмиття кольорів і контурів.
Вплив різних значень на вигляд зображення при збільшенні його масштабу показано на мал. 1.
Приклад
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>image-rendering</title>
<style>
img { border: 1px solid #ccc; }
.fast {
image-rendering: optimizeSpeed;
}
</style>
</head>
<body>
<p><img src="images/russia.png" alt="Прапор" width="200">
<img src="images/russia.png" alt="Прапор" width="200" class="fast"></p>
</body>
</html>У цьому прикладі два зображення з шириною 30 пікселів збільшуються до 200 пікселів за допомогою різних алгоритмів. Для лівого зображення застосовується алгоритм, заданий за замовчуванням (білінійний), для правого — метод інтерполяції за найближчими точками (мал. 2).
Браузери
Хром не підтримує значення optimizeSpeed і optimizeQuality. Замість crisp-edges підтримує значення -webkit-optimize-contrast.
Опера підтримує значення -o-crisp-edges.
Файрфокс підтримує значення -moz-crisp-edges.