Image scaling leads to poor quality in Firefox / Internet Explorer, but not chrome

Question

See http://jsfiddle.net/aJ333/1/ in Chrome, and then in Firefox or Internet Explorer. The image is initially 120px, and I reduce it to 28px, but it looks pretty good no matter what you scale it to.

The image is a PNG and has an alpha channel (transparency).

Here is the relevant code:

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

The image-rendering and -ms-interpolation-mode CSS lines did not seem to do anything, but I found them on the Internet, doing some research on the problem.

Answer 1

You seem to be right. No option scales the image better:
http://www.maxrev.de/html/image-scaling.html

I tested FF14, IE9, OP12 and GC21. Only the GC has the best scaling that can be deactivated via image-rendering: -webkit-optimize-contrast . All other browsers have no / poor scaling.

Screenshot with different output: http://www.maxrev.de/files/2012/08/screenshot_interpolation_jquery_animate.png

Update 2017

Meanwhile, some browsers support smooth scaling:

• ME38 (Microsoft Edge) has good scaling. It cannot be disabled, and it works for JPEG and PNG, but not for GIF.

• FF51 (relative to @karthik's comment, since FF21) has good scaling, which can be disabled using the following settings:

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

  Note: Regarding MDN , the optimizeQuality parameter is a synonym for auto (but auto does not disable smooth scaling):

  The values ​​optimizeQuality and optimizeSpeed ​​are present at the beginning of the project (and, based on its SVG counterpart), are defined as synonyms for auto value.

• OP43 behaves like a GC (not surprising, since it 's based on Chromium since 2013 ) and its still this option, which disables smooth scaling

   image-rendering: -webkit-optimize-contrast 

No support in IE9-IE11. The -ms-interpolation-mode worked only in IE6-IE8, but was removed in IE9 .

PS By default, smooth scaling is performed. This means that the image-rendering option is not required!

Answer 2

Late answer, but this works:

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

Here is another link that talks about browser support:

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

Answer 3

One way to "normalize" the appearance in different browsers is to use the "server side" to resize the image. Example using a C # controller:

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

where WebImage is a class in System.Web.Helpers.

WebImageExtension is defined below:

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

Check out the InterpolationMode.HighQualityBicubic option. This is the method used by Chrome.

Now you need to publish it on the web page. Let's use a razor:

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

And it worked very well for me!

Ideally, it is better to save the image in advance in different widths using this resizing algorithm to avoid the controller process every time the image is loaded.

(Sorry for my poor English, I'm Brazilian ...)

Answer 4

Your problem is that you rely on the browser to resize your images. Browsers have weak image scaling algorithms that will cause ugly pixelation.

You must first resize the images in a graphics program before using them on a web page.

Also, you have a spelling mistake: it should say moz-crisp-edge; however, this will not help you in your case (since this resizing algorithm will not give you high quality: https://developer.mozilla.org/En/CSS/Image-rendering )

Answer 5

You should try to maintain the correct aspect ratio between the sizes from which you scale. For example, if your target size is 28px, then your source size should be 56 (28 x 2) or 112 (28 x 4). This ensures that you can scale to 50% or 25%, not the 0.233333% that you are currently using.

Answer 6

I saw the same thing in firefox, css transform scaled transparent png looks very rude.

I noticed that when they used to have a background color, the quality was much better, so I tried to set the RGBA background with as little opacity as possible.

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

It worked for me, try it.

Answer 7

IE scaling depends on the number of reduced sizes

Some people said that reducing the share even avoids the problem. I do not agree.

In IE11, I found that reducing the image by 50% (e.g., from 300 pixels to 150 pixels) produces uneven resizing (e.g., using the closest neighbor). Resizing to ~ 99% or 73% (for example, from 300 to 276 pixels) gives a smoother image: bilinear or bicubic, etc.

In response, I use images that are only a retina: maybe 25% more than on a traditional 1: 1 pixel display screen, so IE only resizes a bit and doesn't cause ugliness.

Answer 8

It is possible! At least now that css conversions have good support:

You need to use CSS transform to scale the image - the trick is not only to use scale (), but also to use very little rotation. This forces IE to use smoother image interpolation:

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

Answer 9

Chrome's downscaling seems to be better, but the real question is why is using such a massive image on the web if you're using a show so massively reduced? Downloadtimes, as seen on the test page above, are terrible. Especially for sensitive websites, a certain degree of scaling makes sense, in fact more scale than scaling. But never on such a scale (sorry).

This seems to be a more theoretical issue that Chrome seems to be doing well, but this should not actually happen and should not really be used in practice IMHO.

Answer 10

Remember that the size of the Internet is increasing dramatically. 3 years ago I made a major overhaul to ensure the maximum site size of 500 pixels to 1000. Now that many sites are jumping to 1200, we jumped past this and switched to a maximum maximum of 2560 for 1600 widescreen (or 80% depending on content level), mainly taking into account the ability to respond to accurate relationships and appearance on a laptop (1366x768) and on mobile devices (1280x720 or less).

Dynamic resizing is an integral part of this and will only be larger as responsiveness becomes more and more important in 2013.

My smartphone has no problems with content with 25 elements on a variable page - neither for calculating for resizing, nor for bandwidth. 3 seconds loads the page from fresh. It looks great on our 6 year old laptop (1366x768) and on the projector (800x600).

Only in Mozilla Firefox does it look really awful. It even looks simple on IE8 (it has never been used / updated since I installed it 2.5 years ago).