html - cross - image-rendering



Масштабирование изображения приводит к плохому качеству в Firefox/Internet Explorer, но не хрома (7)

Масштабирование IE зависит от величины уменьшения

Некоторые люди говорили, что сокращение доли даже позволяет избежать проблемы. Я не согласен.

В IE11 я обнаружил, что уменьшение изображения на 50% (например, от 300 пикселей до 150 пикселей) дает зазубренное изменение размера (например, использование ближайшего соседа). Изменение размера до ~ 99% или 73% (например, от 300 до 276 пикселей) дает более гладкое изображение: билинейное или бикубическое и т. Д.

В ответ я использую изображения, которые являются только сетчаткой: возможно, на 25% больше, чем на традиционном экране отображения 1: 1 пикселей, так что IE только немного изменяет размер и не вызывает уродство.

См. http://jsfiddle.net/aJ333/1/ в Chrome, а затем в Firefox или Internet Explorer. Изображение изначально 120px, и я уменьшаю до 28px, но он выглядит неплохо в значительной степени независимо от того, к чему вы его масштабируете.

Изображение представляет собой PNG и имеет альфа-канал (прозрачность).

Вот соответствующий код:

HTML:

<a href="http://tinypic.com?ref=2z5jbtg" target="_blank">
    <img src="http://i44.tinypic.com/2z5jbtg.png" border="0" alt="Image and video hosting by TinyPic">
</a>​

CSS:

a {
    width: 28px;
    height: 28px;
    display: block;
}

img {
    max-width: 100%;
    max-height: 100%;
    image-rendering: -moz-crisp-edges;
    -ms-interpolation-mode: bicubic;
}

Линии image-rendering и -ms-interpolation-mode CSS, похоже, ничего не делали, но я нашел их в Интернете, проведя некоторое исследование проблемы.


Answer #1

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

Сначала вы должны изменить размер изображений в графической программе, прежде чем использовать их на веб-странице.

Кроме того, у вас есть орфографическая ошибка: он должен сказать moz-crisp-edge; однако это не поможет вам в вашем случае (поскольку этот алгоритм изменения размера не даст вам высокое качество изменения: https://developer.mozilla.org/En/CSS/Image-rendering )


Answer #2

Кажется, вы правы. Нет опции масштабирует изображение лучше:
http://www.maxrev.de/html/image-scaling.html

Я тестировал FF14, IE9, OP12 и GC21. Только GC имеет лучшее масштабирование, которое можно дезактивировать с помощью image-rendering: -webkit-optimize-contrast . У всех других браузеров нет / плохого масштабирования.

Снимок экрана с различным выходом: http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png

Обновление 2017

Между тем некоторые другие браузеры поддерживают плавное масштабирование:

  • ME38 (Microsoft Edge) имеет хорошее масштабирование. Он не может быть отключен, и он работает для JPEG и PNG, но не для GIF.

  • FF51 (относительно комментария @karthik с FF21) имеет хорошее масштабирование, которое можно отключить с помощью следующих настроек:

    image-rendering: optimizeQuality
    image-rendering: optimizeSpeed
    image-rendering: -moz-crisp-edges
    

    Примечание. Что касается MDN, параметр optimizeQuality является синонимом для auto (но auto не отключает плавное масштабирование):

    Значения optimizeQuality и optimizeSpeed, присутствующие в раннем проекте (и исходящие от его SVG-аналога), определяются как синонимы для автоматического значения.

  • OP43 ведет себя как GC (не удивляет, поскольку он основан на Chromium с 2013 года ) и его по-прежнему этот параметр, который отключает плавное масштабирование:

    image-rendering: -webkit-optimize-contrast
    

Нет поддержки в IE9-IE11. Параметр -ms-interpolation-mode работал только в IE6-IE8, но был удален в IE9 .

PS Гладкое масштабирование выполняется по умолчанию. Это означает, что не требуется опция image-rendering !


Answer #3

Кажется, масштабирование Chrome лучше, но реальный вопрос в том, почему использование такого массивного изображения в Интернете, если вы используете шоу, настолько массово уменьшено? Downloadtimes, как видно на тестовой странице выше, ужасны. Особенно для чувствительных веб-сайтов определенная степень масштабирования имеет смысл, на самом деле больше масштаб, чем масштабирование. Но никогда в такой (извините, каламбур) шкале.

Похоже, это более теоретическая проблема, с которой Chrome, похоже, хорошо справляется, но на самом деле этого не должно происходить и на самом деле не следует использовать на практике ИМХО.


Answer #4

Поздний ответ, но это работает:

/* applies to GIF and PNG images; avoids blurry edges */
img[src$=".gif"], img[src$=".png"] {
    image-rendering: -moz-crisp-edges;         /* Firefox */
    image-rendering:   -o-crisp-edges;         /* Opera */
    image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}

https://developer.mozilla.org/en/docs/Web/CSS/image-rendering

Вот еще одна ссылка, которая рассказывает о поддержке браузера:

https://css-tricks.com/almanac/properties/i/image-rendering/


Answer #5

Помните, что размеры в Интернете резко возрастают. 3 года назад я провела капитальный ремонт, чтобы обеспечить максимальный размер сайта размером 500 пикселей до 1000. Теперь, когда многие сайты совершают прыжок до 1200, мы прыгали мимо этого и переходили на максимальный максимум 2560 для 1600 широкоформатных (или 80% в зависимости от на уровне контента), в основном, с учетом способности реагировать на одинаковые отношения и внешний вид на ноутбуке (1366x768) и на мобильном телефоне (1280x720 или меньше).

Динамическое изменение размеров является неотъемлемой частью этого и будет только больше, так как отзывчивость становится все более важной в 2013 году.

У моего смартфона нет проблем с контентом с 25 элементами на изменяемой странице - ни для расчета для изменения размера, ни для полосы пропускания. 3 секунды загружает страницу из свежей. Выглядит отлично на нашем 6-летнем ноутбуке (1366x768) и на проекторе (800x600).

Только на Mozilla Firefox это выглядит действительно ужасно. Он даже отлично выглядит на IE8 (никогда не использовался / обновлялся с тех пор, как я установил его 2,5 года назад).


Answer #6

Я видел то же самое в firefox, css transform scaled transparent png выглядит очень грубо.

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

background:rgba(255,255,255,0.001);

Это сработало для меня, попробуйте.





scaling