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

Question

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

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

Answer 1

Я знаю, что уже поздно, но вы можете обмануть 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/

Answer 2

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

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

Answer 3

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

Answer 4

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

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

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

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

Answer 5

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

FF, 50%:

FF, 25%:

Answer 6

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

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

У Эрис Брассер есть страница, на которой хорошо разбирается более широкий вопрос: «Почему практически любое программное обеспечение для масштабирования изображений так плохо?»

http://www.ericbrasseur.org/gamma.html

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

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

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

Answer 7

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