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

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

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

enter image description here

7 ответов


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

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


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

в CSS

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

в JavaScript

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

я избегаю браузера нюхает любой ценой. Я позаимствовал эту соплю от yepnope.мы с Джей-ЭС не переживаем из-за этого.

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

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


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

enter image description here


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

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

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

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

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

больше вариант:

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

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

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

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

другими словами, браузеры являются программным эквивалентом гамбургеров Mcdonald'S, и этот факт останется. В этом нет необходимости, но шансы искажены.


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

FF, 50%:

FF, 50%

FF, 25%:

FF, 25%


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