Оптимизация изображений для Internet Explorer

Question

На моем сайте мой клиент сообщает, что изображения, размер которых уменьшен с помощью кода (т. Е. Указаны ширина / высота), выглядят неровными и пиксельными.Я спросил ее, какой браузер она использует, и это неизбежно Internet Explorer.

Есть ли способ оптимизировать изображения в IE или мне нужно вручную изменить размер изображений в фотошопе, прежде чем размещать их на сайте?

Размеры рассматриваемых изображений уменьшены с 220x220 до 80x80и у меня есть javascript, который расширяет их до 220x220 при нажатии.

Answer 1

Уменьшение или увеличение в браузере может выглядеть ужасно.Он варьируется от браузера к браузеру, но, по-видимому, IE является худшим .

Лучше всего либо написать сценарий на стороне сервера для создания миниатюр, либо вручную, если качество изображения выполняется самостоятельноэто важно.Это также экономит полосу пропускания, поскольку вам не нужно загружать большое изображение и отображать только 1/10 пикселей.

Answer 2

http://acidmartin.wordpress.com/2009/01/05/better-image-scaling-and-resampling-in-internet-explorer/

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

img
{
-ms-interpolation-mode: bicubic;
}

Answer 3

Вы должны избегать использования ширины и высоты для изменения размера.Это приведет к увеличению времени загрузки (при медленных соединениях и больших изображениях).

Лучшей идеей будет создание миниатюр (например, с помощью Photoshop) и использование параметра «Сохранение в Интернете», чтобы еще больше уменьшить размер.

Answer 4

используйте timthumb, он создаст для вас миниатюры, вам просто нужно указать ссылку на скрипт, указать размер миниатюры и все.http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/

Я использую его на одном из моих сайтов -> http://iv -designs.org / Вы можете видеть, что изображения чистые и не имеют пикселов.

Answer 5

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

img { -ms-interpolation-mode: bicubic; }

Имейте в виду, что это влияет на производительность (его частое использование замедляет работу браузера). Он также не действует в IE6 и больше не требуется в IE8.

Другой способ (который работает в IE6) - использовать замечательный скрипт Fluid Images Этана Маркотта , который использует несколько чертовски умных CSS-фильтров для решения проблемы в IE6 и 7. Мой собственный вариант на тему исправляет проблему правого клика, но требует jQuery.