Firefox размывает изображение при масштабировании с помощью внешнего CSS или встроенного стиля

Вы увеличиваете изображение по сравнению с его исходным размером - желаемый эффект - обычно для плавного масштабирования, и, похоже, FFX3 начал это делать (я предполагаю билинейную фильтрацию). Я думаю, если вы посмотрите на Safari и Opera, вы обнаружите, что они также фильтруют изображение.

На самом деле я предпочитаю, как это делает FF, поскольку он использует интерполяцию при масштабировании изображений, в большинстве случаев это заставляет изображения выглядеть намного лучше, чем в IE. Однако я предполагаю, что могут быть случаи, когда это нехорошо, например, при использовании спрайтов.

Я не думаю, что есть способ обойти это.

Вам следует избегать масштабирования изображения на стороне клиента. Масштабирование изображения вверх похоже на масштабирование, браузер не имеет информации для изображения, чтобы отобразить его в более высоком разрешении, чем оно есть на самом деле, поэтому вы не можете сделать это без размытия изображения, возможно, это не заметно в IE, попробуйте изменение 200 пикселей на 400 пикселей.

Я сам просто подумал об этом, но, похоже, это жестко запрограммировано в ff3 :( http://forums.mozillazine.org/viewtopic.php?f=7&t=752735&p=5008845

ff2 не выполнял никакой интерполяции

IE по умолчанию не работает, но вы можете включить его: http://www.joelonsoftware.com/items/2008/12/22.html

К сожалению, у меня нет решения для этого, но это полный отказ от сделки для большого количества пользователей (например, художников по пикселям). Если это затронуло вас, отправьте отзыв на http://hendrix.mozilla.org/ и проголосуйте за соответствующая ошибка.

К сожалению, Mozilla игнорирует эту проблему. Для многих затронутых пользователей это означает, что нет другого выбора, кроме как переключить браузеры. IE имеет CSS свойство для выбора фильтра изменения размера, так что это кажется лучшим выбором.

Вот отчет об ошибке для Google Chrome, у которого та же проблема, что и у Firefox. Я не знаю об Opera, но я слышал, что они используют некоторые эвристики для более разумного автоматического масштабирования.

Я обнаружил эту новую функцию FireFox:

http://developer.mozilla.org/En/CSS/Image-rendering

Поместив это в свой CSS, вы исправите это:

image-rendering: -moz-crisp-edges;

Думал поделиться этой информацией. Извините за ответ на мой вопрос;)

http://developer.mozilla.org/En/CSS/Image-rendering применяется только к текущим сборкам ствола Firefox (Minefield / 3.6a1pre / Gecko 1.9.2). Этой функции нет в Firefox 3.0 и не будет в следующем выпуске 3.5. Первый выпуск с этой опцией будет следующим основным выпуском после 3.5, который в настоящее время находится на ранних этапах планирования с ориентировочным выпуском в 2010 году.

Интересно, добьетесь ли вы лучших результатов, если создадите спрайты самого большого размера, который, как вы ожидаете, будут просматриваться, а затем уменьшите их по мере необходимости?

Internet Explorer 8 также "размывает" изображения по умолчанию при их масштабировании. На самом деле это хорошо. Большинство изображений выглядят лучше при масштабировании с использованием бикубической выборки вместо выборки ближайшего соседа.

Если вы хотите, чтобы Internet Explorer 8 масштабировал изображения, как в предыдущих версиях, поместите это в свой CSS:

-ms-interpolation-mode: nearest-neighbor;

Если вы хотите, чтобы Internet Explorer 7 масштабировал изображения, такие как IE 8, используйте это:

-ms-interpolation-mode: bicubic;

Помимо внешнего вида изображения, вы также должны учитывать производительность. Я обнаружил, что IE 7 и IE 8 требуют значительно большей мощности процессора для масштабирования изображений при использовании бикубической выборки, чем Firefox 3.6.