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

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

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

7 60
image-processing firefox resize

7 ответов:

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

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

28

Я знаю, что это поздно, но вы можете обмануть 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.js и я не чувствую себя плохо из-за этого.

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

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

43

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

enter image description here

12

Я думаю, что ваш ответ находится в ссылке сверху 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. вы можете быть в состоянии сделать эту работу в браузере с помощью плагинов (но пример, который я нашел, на самом деле не делает то, что вам нужно, поэтому я удалил его).
3

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

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

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

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

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

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

1

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

FF, 50%:

FF, 50%

FF, 25%:

FF, 25%

1

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

0