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

Ответ 1

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

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

  image-rendering: -webkit-optimize-contrast
  

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

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

Ответ 2

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

/* 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/

Ответ 3

Один из способов "нормализации" внешнего вида в разных браузерах - использовать "серверную сторону" для изменения размера изображения. Пример с использованием контроллера С#:

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

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

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

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

Ответ 5

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

Ответ 6

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

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

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

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

Ответ 7

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

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

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

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

Ответ 8

Это возможно! По крайней мере, теперь, когда 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);
}

Ответ 9

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

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

Ответ 10

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

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

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

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