Масштабирование изображений браузерами

В недрах Internet Explorer Developer Center обнаружено описание использования бикубического метода интерполяции (режима масштабирования), позволяющего без искажений отобразить картинку в IE7, если её размеры были изменены браузером.

Наверняка вы сталкивались со следующей проблемой: на сайте изображение должно отобразиться в заданном размере, но исходный файл оказывается на самом деле бОльшего размера. Конечно, в идеале, нужно отредактировать саму картинку в графическом редакторе. Но, часто такой возможности просто нет: таких изображений может быть слишком много, менять размеры каждого просто невозможно. А порой к исходным файлам просто нет доступа. Тогда простейшим решением будет указать размер картинки используя CSS.

Но при этом мы столкнёмся с новой проблемой. Дело в том, что не все браузеры умеют правильно масштабировать изображения. Opera, Safari и Google Chrome отобразят их почти без искажений. В Internet Explorer и Firefox (сюрприз!) картинка исказится. В IE искажения будет наиболее заметными.

Дело в том, что для ресемплинга (изменения размеров изображения) браузеры используют собственный, встроенный бикубический (Bicubic) метод. Вы наверняка сталкивались с этим понятием при работе в Photoshop, где при изменении размеров картинки используется три бикубических метода: Bicubic (лучше использовать для изображений с градиентом), Bicubic Smoother (наилучший вариант для увеличения изображения) и Bicubic Sharper (используется при уменьшении).

Как оказалось в IE 7 всё же есть бикубический метод ресемплинга, просто его нужно указывать явно. И делается это достаточно просто: img { -ms-interpolation-mode: bicubic; }
Смотреть примеры

Вообще-то, на сайте Microsoft MDSN сказано, что interpolation-mode имеет два значения: nearest-neighbor и bicubic. Nearest-neighbor является зачением по-умолчанию.

Описанный метод применим для всех поддерживаемых браузером изображений: jpeg, gif и png, причём как при увеличении, так и при уменьшении. В IE6 этот трюк не работает, к сожалению.