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

Question

Когда я визуально масштабирую изображение, Firefox 3 размывает его. Firefox 2 и другие браузеры этого не делают. Такое поведение я ожидаю. Это особенно плохо для создания веб-игры с использованием спрайтов png или gif.

Например, при отображении изображения 100x100 в Firefox 3, например:

<img src="sprite.gif" width="200" />

или

<img src="sprite.gif" style="width:200px; height:200px;" />

это выглядит размытым в FF3, а не в IE.

Есть идеи, как это предотвратить?

Answer 1

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

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

Таким образом, размещение этого в вашем CSS исправит это:

image-rendering: -moz-crisp-edges;

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

Answer 2

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

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

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

Answer 3

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

Answer 4

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.

Answer 5

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

Answer 6

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

Answer 7

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

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

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

Answer 8

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

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

Answer 9

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