Коли розмір зображення збільшується, то підвищується кількість пікселів, але оскільки вони ніяк не з'являться з нізвідки, то браузеру доводиться додавати їх самостійно. При зменшенні зображення, навпаки, скорочується кількість пікселів та зайві браузер видаляє. Побудова картинки нового розміру на основі існуючого базується на математичній інтерполяції, при цьому браузер використовує для цієї мети різні алгоритми. Ось пара найпоширеніших.
- Бікубічний — дає згладжені межі та плавний перехід кольорів; цей алгоритм використовується стандартними браузерами.
- За найближчими точками — дає чіткі краї ліній.
Для підвищення різкості картинки при збільшенні або зменшенні її розмірів використовується властивість image-rendering зі значенням pixelated. Firefox підтримує лише значення -moz-crisp-edges, а Internet Explorer працює лише з власною властивістю -ms-interpolation-mode. Edge взагалі нічого поки що не підтримує. У результаті, комбінуючи різні властивості та значення, отримаємо універсальний код (приклад 1).
Приклад 1. Підвищення різкості
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Різкість картинки</title> <style> body {background: #f0f0f0; /* Колір тла */
}
.sharp { image-rendering: pixelated; image-rendering:-moz-crisp-edges; /* Firefox */
-ms-interpolation-mode: nearest-neighbor; /* IE */
}
</style>
</head>
<body> <p> <img src="image/russia.png" alt="" width="300"> <img src="image/russia.png" alt="" width="300" class="sharp">
</p> <p> <img src="image/berry.jpg" alt="" width="300"> <img src="image/berry.jpg" alt="" width="300" class="sharp">
</p>
</body>
</html>Результат даного прикладу показаний на рис. 1 — ліворуч вихідне зображення; праворуч зображення, до якого додається клас sharp. Перша картинка має вихідну ширину 30 пікселів і збільшується до 300 пікселів. Браузер спочатку розмиває межі переходу між кольоровими областями, додавання image-rendering до зображення робить межі переходу різкими. Друга фотографія має вихідну ширину 500 пікселів і зменшена до 300 пікселів.
Рис. 1. Підвищення різкості зображень