Масштабирование изображения вызывает плохое качество в Firefox / Internet Explorer, но не в Chrome - PullRequest
49 голосов
/ 30 марта 2012

См. 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, похоже, ничего не делал, но я нашел их в Интернете, пока проводил некоторые исследования этой проблемы.

Ответы [ 10 ]

33 голосов
/ 16 августа 2012

Кажется, ты прав.Никакая опция не масштабирует изображение лучше:
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 не требуется!

12 голосов
/ 22 мая 2015

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

/* 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 / альманах / свойства / я / изображение-рендеринга /

7 голосов
/ 21 августа 2012

Один из способов «нормализовать» внешний вид в разных браузерах - использовать «серверную часть» для изменения размера изображения. Пример использования контроллера C #:

public ActionResult ResizeImage(string imageUrl, int width)
{
    WebImage wImage = new WebImage(imageUrl);
    wImage = WebImageExtension.Resize(wImage, width);
    return File(wImage.GetBytes(), "image/png");
}

где WebImage является классом в System.Web.Helpers.

WebImageExtension определяется ниже:

using System.IO;
using System.Web.Helpers;
using System.Drawing;
using System.Drawing.Imaging;
using System.Drawing.Drawing2D;
using System.Collections.Generic;

public static class WebImageExtension
{
    private static readonly IDictionary<string, ImageFormat> TransparencyFormats =
        new Dictionary<string, ImageFormat>(StringComparer.OrdinalIgnoreCase) { { "png", ImageFormat.Png }, { "gif", ImageFormat.Gif } };

    public static WebImage Resize(this WebImage image, int width)
    {
        double aspectRatio = (double)image.Width / image.Height;
        var height = Convert.ToInt32(width / aspectRatio);

        ImageFormat format;

        if (!TransparencyFormats.TryGetValue(image.ImageFormat.ToLower(), out format))
        {
            return image.Resize(width, height);
        }

        using (Image resizedImage = new Bitmap(width, height))
        {
            using (var source = new Bitmap(new MemoryStream(image.GetBytes())))
            {
                using (Graphics g = Graphics.FromImage(resizedImage))
                {
                    g.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias;
                    g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic;
                    g.DrawImage(source, 0, 0, width, height);
                }
            }

            using (var ms = new MemoryStream())
            {
                resizedImage.Save(ms, format);
                return new WebImage(ms.ToArray());
            }
        }
    }
}

обратите внимание на опцию InterpolationMode.HighQualityBicubic. Этот метод используется в Chrome.

Теперь вам нужно опубликовать на веб-странице. Давайте использовать бритву:

<img src="@Url.Action("ResizeImage", "Controller", new { urlImage = "<url_image>", width = 35 })" />

И это сработало очень хорошо для меня!

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

(Извините за мой плохой английский, я бразилец ...)

4 голосов
/ 02 февраля 2013

Вы должны стараться поддерживать правильное соотношение сторон между размерами, от которых вы масштабируете и до. Например, если ваш целевой размер составляет 28px, то размер источника должен быть в такой степени, например, 56 (28 x 2) или 112 (28 x 4). Это гарантирует, что вы можете масштабировать на 50% или 25%, а не на 0,233333%, который вы используете в настоящее время.

4 голосов
/ 30 марта 2012

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

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

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

1 голос
/ 30 августа 2017

Это возможно!По крайней мере теперь, когда преобразования CSS имеют хорошую поддержку:

Вам необходимо использовать CSS-преобразование для масштабирования изображения - хитрость заключается не только в использовании scale (), но и в применении очень маленького поворота.Это заставляет IE использовать более плавную интерполяцию изображения:

img {
    /* double desired size */
    width: 56px; 
    height: 56px;

    /* margins to reduce layout size to match the transformed size */ 
    margin: -14px -14px -14px -14px; 

    /* transform to scale with smooth interpolation: */
    transform: scale(0.5) rotate(0.1deg);
}
1 голос
/ 22 июня 2016

Масштабирование IE зависит от размера сокращения

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

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

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

1 голос
/ 24 января 2014

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

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

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

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

0 голосов
/ 19 февраля 2013

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

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

Мой смартфон без проблем справляется с контентом с 25 элементами на изменяемой странице - ни вычислениями для изменения размера, ни пропускной способностью. 3 секунды загружает страницу из свежих. Отлично смотрится на нашем 6-летнем презентационном ноутбуке (1366х768) и на проекторе (800х600).

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

0 голосов
/ 02 февраля 2013

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

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

...