El escalado de imágenes causa mala calidad en firefox / internet explorer pero no en chrome

Respuesta tardía pero esto funciona:

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

Aquí hay otro enlace también que habla sobre el soporte del navegador:

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

Una forma de "normalizar" la apariencia en los diferentes navegadores es usar su "lado del servidor" para cambiar el tamaño de la imagen. Un ejemplo usando un controlador C#:

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

Donde WebImage es una clase en System.Web.Ayudante.

WebImageExtension se define a continuación:

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());
            }
        }
    }
}

Tenga en cuenta la opción InterpolationMode.Un Cubic de alta calidad. Este es el método utilizado por Chrome.

Ahora necesita publicar en una página web. Vamos a usar razor:

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

Y esto funcionó muy bien para ¡Yo!

Idealmente será mejor guardar la imagen de antemano en anchuras diferentes, utilizando este algoritmo de cambio de tamaño, para evitar el proceso del controlador en cada carga de imagen.

(Lo siento por mi pobre inglés, soy brasileño...)

Su problema es que está confiando en el navegador para cambiar el tamaño de sus imágenes. Los navegadores tienen algoritmos de escalado de imagen notoriamente pobres, lo que causará la pixelización fea.

Primero debe cambiar el tamaño de sus imágenes en un programa de gráficos antes de usarlas en la página web.

Además, tienes un error ortográfico: debería decir moz-crisp-edges; sin embargo, eso no te ayudará en tu caso (porque ese algoritmo de redimensionamiento no te dará un redimensionamiento de alta calidad: https://developer.mozilla.org/En/CSS/Image-rendering )

Debe tratar de mantener una relación de aspecto adecuada entre los tamaños desde y hacia los que está escalando. Por ejemplo, si su tamaño de destino es 28px, entonces su tamaño de origen debe ser una potencia de esa, como 56 (28 x 2) o 112 (28 x 4). Esto garantiza que pueda escalar un 50% o un 25% en lugar del 0.233333% que está utilizando actualmente.

He visto lo mismo en Firefox, css transform scaled png transparente mirando muy áspero.

Me di cuenta de que cuando previamente tenían un color de fondo establecido la calidad era mucho mejor, así que intenté establecer un fondo RGBA con el menor valor de opacidad posible.

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

Esto funcionó para mí, inténtalo.

IE Escala Depende de la Cantidad de Downsize

Algunas personas dijeron que una reducción de la fracción uniforme evita el problema. No estoy de acuerdo.

En IE11 encuentro que reducir una imagen en un 50% (por ejemplo, 300px a 150px) produce un cambio de tamaño irregular (como si estuviera usando nearest-neighbor). Un cambio de tamaño a ~99% o 73% (por ejemplo, 300px a 276px) produce una imagen más suave: bilineal o bicúbico, etc.

En respuesta he estado usando imágenes que son solo retina-ish: tal vez un 25% más grande que se usaría en un tradicional pantalla de mapeo de píxeles 1:1, de modo que IE solo cambia el tamaño un poco y no desencadena la fealdad.

Esto es posible! Al menos ahora que las transformaciones css tienen un buen soporte:

Necesita usar una transformación CSS para escalar la imagen - el truco no es solo usar una escala(), sino también aplicar una rotación muy pequeña. Esto desencadena IE para utilizar una interpolación más suave de la imagen:

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);
}

Parece Chrome downscaling es mejor, pero la verdadera pregunta es por qué utilizar una imagen tan masiva en la web si se utiliza mostrar es tan masivamente reducido? Los tiempos de descarga como se ve en la página de prueba anterior son terribles. Especialmente para los sitios web receptivos, una cierta cantidad de escala tiene sentido, en realidad más una escala hacia arriba que hacia abajo. Pero nunca en tal escala.

Parece que esto es más un problema teórico que Chrome parece tratar muy bien, pero en realidad no debe suceder y en realidad no debe ser utilizado en la práctica en mi Humilde opinión.

Recuerde que los tamaños en la web están aumentando dramáticamente. hace 3 años, hice una revisión para llevar nuestro diseño de sitio de 500 px a 1000. Ahora, donde muchos sitios están haciendo el salto a 1200, saltamos más allá de eso y fuimos a un máximo de 2560 optimizado para 1600 de ancho (o 80% dependiendo del nivel de contenido) área de contenido principal con capacidad de respuesta para permitir exactamente las mismas proporciones y apariencia en un portátil (1366x768) y en el móvil (1280x720 o más pequeño).

El redimensionamiento dinámico es una parte integral de esto y solo será más-por lo que la capacidad de respuesta se vuelve más y más importante en 2013.

Mi teléfono inteligente no tiene problemas para lidiar con el contenido con 25 elementos en una página que se está redimensionando, ni el cálculo para redimensionar ni el ancho de banda. 3 segundos carga la página desde fresco. Se ve muy bien en nuestro portátil de presentación de 6 años (1366x768) y en el proyector (800x600).

Solo en Mozilla Firefox se ve realmente atroz. Incluso se ve muy bien en IE8 (nunca usado / actualizado desde que lo instalé hace 2.5 años).