Почему Firefox так плохо при изменении размеров изображений?

Слева исходный PNG и справа - это версии, уменьшенные примерно до половины размера orignal с помощью <img width и height. См. [Ссылка удалена].

Почему измененное изображение выглядит так нечетким в Firefox. Есть ли что-то, что я могу сделать с этим, не меняя файл изображения. Нечеткость особенно раздражает, если изображение содержит большое количество математики или текста.

Ответ 1

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

Лучшим обходным решением является использование свойства CSS transform для применения крошечного поворота к изображению проблемы и принудительного подпиксельного рендеринга, как указано в Ответ Райана Уила.

Ответ 2

Я знаю, что это уже поздно, но вы можете обмануть firefox в рендеринг изображения лучше, применяя оо-так-малое вращение. Я попытался translate() изображение получить тот же эффект... безрезультатно.

CSS

.image-scale-hack {
    transform: rotate( .0001deg );
}

Javascript

if( "MozAppearance" in document.documentElement.style ) {
    $('.logo img').addClass('image-scale-hack');
}

Я избегаю взлома браузера любой ценой. Я заимствовал этот нюх из yepnope.js, и я не плохо себя чувствую.

Также следует отметить, что этот же трюк можно использовать для принудительного отображения субпиксельного изображения как в webkit, так и в firefox. Это полезно для очень медленной анимации - лучше всего объясняется на примере:

http://jsfiddle.net/ryanwheale/xkxwN/

Ответ 3

документация по визуализации изображений, связанная с Firefox, размывает изображение при масштабировании через css или inline style, ответ на который ссылается Su ', содержит инструкции по использованию image-rendering:optimizeQuality (который исправил проблему в моем тестировании на FF4) - пример:

Ответ 4

Я думаю, что ваш ответ находится в ссылке сверху https://developer.mozilla.org/En/CSS/Image-rendering: "В настоящий момент auto и optimizeQuality по умолчанию равны, оба приводят к билинейной передискретизации". 'значение по умолчанию IE8 +: бикубическое (высокое качество)'

Далее: http://www.codinghorror.com/blog/2007/07/better-image-resizing.html "При уменьшении изображения используйте бикубический эффект, который имеет естественный эффект заточки. Вы хотите подчеркнуть данные, которые остаются на новом, меньшем изображении после отбрасывания всех дополнительных деталей из исходного изображения. '

Я могу придумать пару возможных обходных решений, но ни один из них не прост:

Измените размер изображения на сервере. Либо подавайте его на половину размера, и разрешите Firefox масштабировать его до полного (что, по-видимому, это будет нормально) или имеют разные URL-адреса для разных размеров изображения.
Возможно, вы сможете сделать эту работу в браузере плагинами (но пример, который я нашел, на самом деле не делает то, что вам нужно, поэтому я удалил его).

Ответ 5

TL; DR: Масштабирование изображения вряд ли скоро будет исправлено. Где угодно.

Более длинная версия:

У Eris Brasseur есть страница, которая прекрасно сочетается с более широким вопросом: "Почему практически такое программное обеспечение для масштабирования изображений так плохо?"

http://www.4p8.com/eric.brasseur/gamma.html

Так как позиция W3C по этому вопросу примерно соответствует тому, что во всем мире лучше иметь неправильную, но одинаково неправильную реализацию, они избегают любого правильного отношения к гамма (что немного осложнит ситуацию). Таким образом, любой, кто привык к веб-стандартам, скорее всего, продолжит игнорировать гамма, что приведет к эффектам, описанным Эриком и в этой теме. Это гарантирует, что даже уменьшение масштаба далеко не определено, поскольку Джефф Этвуд помещает его в статью, связанную с другим ответом.

В такой среде такие методы, как Lanczos thrive, чья претензия на славу в основном состоит в том, что они выполняют достаточно хорошо, даже если реализованы неправильно.

Другими словами, браузеры являются программным эквивалентом гамбургеров McDonald, и этот факт останется. Его последствия не обязательно, но коэффициенты искажены.

Ответ 6

Теперь (2017) ошибка закрыта 2 года назад. Короткий тест:

FF, 50%:

FF, 25%:

Ответ 7

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