Слева исходный PNG и справа - это версии, уменьшенные примерно до половины размера orignal с помощью <img width и height. См. [Ссылка удалена].
Почему измененное изображение выглядит так нечетким в Firefox. Есть ли что-то, что я могу сделать с этим, не меняя файл изображения. Нечеткость особенно раздражает, если изображение содержит большое количество математики или текста.
В Bugzilla есть давний билет ошибок, который был включен в Bugzilla, связанный с уменьшением масштаба изображения Firefox. Вам может понравиться следить за билетом, чтобы отслеживать его возможное разрешение или вносить свой патч самостоятельно, если вы чувствуете себя в состоянии.
Лучшим обходным решением является использование свойства CSS transform для применения крошечного поворота к изображению проблемы и принудительного подпиксельного рендеринга, как указано в Ответ Райана Уила.
Я знаю, что это уже поздно, но вы можете обмануть 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. Это полезно для очень медленной анимации - лучше всего объясняется на примере:
документация по визуализации изображений, связанная с Firefox, размывает изображение при масштабировании через css или inline style, ответ на который ссылается Su ', содержит инструкции по использованию image-rendering:optimizeQuality (который исправил проблему в моем тестировании на FF4) - пример:
Я думаю, что ваш ответ находится в ссылке сверху https://developer.mozilla.org/En/CSS/Image-rendering: "В настоящий момент auto и optimizeQuality по умолчанию равны, оба приводят к билинейной передискретизации". 'значение по умолчанию IE8 +: бикубическое (высокое качество)'
Далее: http://www.codinghorror.com/blog/2007/07/better-image-resizing.html "При уменьшении изображения используйте бикубический эффект, который имеет естественный эффект заточки. Вы хотите подчеркнуть данные, которые остаются на новом, меньшем изображении после отбрасывания всех дополнительных деталей из исходного изображения. '
Я могу придумать пару возможных обходных решений, но ни один из них не прост:
TL; DR: Масштабирование изображения вряд ли скоро будет исправлено. Где угодно.
Более длинная версия:
У Eris Brasseur есть страница, которая прекрасно сочетается с более широким вопросом: "Почему практически такое программное обеспечение для масштабирования изображений так плохо?"
http://www.4p8.com/eric.brasseur/gamma.html
Так как позиция W3C по этому вопросу примерно соответствует тому, что во всем мире лучше иметь неправильную, но одинаково неправильную реализацию, они избегают любого правильного отношения к гамма (что немного осложнит ситуацию). Таким образом, любой, кто привык к веб-стандартам, скорее всего, продолжит игнорировать гамма, что приведет к эффектам, описанным Эриком и в этой теме. Это гарантирует, что даже уменьшение масштаба далеко не определено, поскольку Джефф Этвуд помещает его в статью, связанную с другим ответом.
В такой среде такие методы, как Lanczos thrive, чья претензия на славу в основном состоит в том, что они выполняют достаточно хорошо, даже если реализованы неправильно.
Другими словами, браузеры являются программным эквивалентом гамбургеров McDonald, и этот факт останется. Его последствия не обязательно, но коэффициенты искажены.
Теперь (2017) ошибка закрыта 2 года назад. Короткий тест:
FF, 50%:
FF, 25%:
Обходной путь для этой проблемы заключается в том, чтобы просто изменить исходное изображение с помощью редактора изображений до нужного размера и использовать изображение как есть, не определяя его ширину и высоту в таблице стилей.