Take the 2-minute tour ×

See http://jsfiddle.net/aJ333/1/ in chrome and then in either firefox or internet explorer. The image is originally 120px, and I'm scaling down to 28px, but it looks bad pretty much no matter what you scale it down to.

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

Here's the relevant code:

<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 {width:28px;height:28px;display:block}
    image-rendering: -moz-crisp-edges;
    -ms-interpolation-mode: bicubic

The image-rendering and -ms-interpolation-mode lines of css didn't seem to do anything, but I found them online while doing some research on the problem.

share|improve this question
I got the recent FF nightly, and found the rendering is as good as chrome. Here's a screenshot from FF18(latest stable) & FF21(latest nightly) –  karthik Feb 2 '13 at 6:28
add comment

8 Answers

up vote 6 down vote accepted

Your problem is that you are relying on the browser to resize your images. Browsers have notoriously poor image scaling algorithms, which will cause the ugly pixelization.

You should resize your images in a graphics program first before you use them on the webpage.

Also, you have a spelling mistake: it should say moz-crisp-edges; however, that won't help you in your case (because that resizing algorithm won't give you a high quality resize: https://developer.mozilla.org/En/CSS/Image-rendering)

share|improve this answer
This is true, but it does make it incredibly hard to visualize bigger image bounding boxes while keeping the existing placeholder image… –  andrewdotnich Jun 4 '12 at 7:06
Given recent developments in reactive web design, this is no longer on option. These days, a reactive design often employs larger images and then scales them down to meet whatever mediaquery breakpoints are set in the CSS. –  Soviut Feb 2 '13 at 6:55
Similarly, the only way to achieve crisp images on high DPI displays like the retina displays on iphones and ipads is to create an image that is twice as large and scale it to 50%. –  Soviut Feb 2 '13 at 6:56
While I don't agree with the retina argument (you should only serve retina images when needed), there are plenty of other situations scaling will happen. Like any time you have an animation that involves resizing. –  Fuzzy76 Feb 2 '13 at 9:30
add comment

It seems that you are right. No option scales the image better:


I've tested FF14, IE9, OP12 and GC21. Only GC has a better scaling that can be deactivated through image-rendering: -webkit-optimize-contrast. All other browsers have no/poor scaling.

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

share|improve this answer
confirmed in IE10 for sure, although Google Chrome does smooth the downsized images for me in the latest version. All browsers should do this. So frustrating! –  Jeff Atwood Feb 2 '13 at 6:07
I've tested it in FF3.6 and both (JPG+PNG) look as good as in the current version of Chrome (29) without any CSS option. Could you explain why scaling should be bad? –  Flek Sep 11 '13 at 23:38
add comment

I've seen the same thing in firefox, css transform scaled transparent png's looking very rough.

I noticed that when they previously had a background color set the quality was much better, so I tried setting an RGBA background with as low an opacity value as possible.


This worked for me, give it a try.

share|improve this answer
add comment

Here's a test case showing different amounts of scaling. See how IE has trouble with more dramatic resizing: External page with multiple large and small images.

share|improve this answer
add comment

Remember that sizes on the web are increasing dramatically. 3 years ago, I did an overhaul to bring our 500 px wide site layout to 1000. Now, where many sites are doing the jump to 1200, we jumped past that and went to a 2560 max optimized for 1600 wide (or 80% depending on the content level) main content area with responsiveness to allow the exact same ratios and look and feel on a laptop (1366x768) and on mobile (1280x720 or smaller).

Dynamic resizing is an integral part of this and will only become more-so as responsiveness becomes more and more important in 2013.

My smartphone has no trouble dealing with the content with 25 items on a page being resized - neither the computation for resizing nor the bandwidth. 3 seconds loads the page from fresh. Looks great on our 6 year old presentation laptop (1366x768) and on the projector (800x600).

Only on Mozilla Firefox does it look genuinely atrocious. It even looks just fine on IE8 (never used/updated since I installed it 2.5 years ago).

share|improve this answer
add comment

Seems Chrome downscaling is best but the real question is why use such a massive image on the web if you use show is so massively scaled down? Downloadtimes as seen on the test page above are terrible. Especially for responsive websites a certain amount of scaling makes sense, actually more a scale up than scale down though. But never in such a (sorry pun) scale.

Seems this is more a theoretical problem which Chrome seems to deal with nicely but actually should not happen and actually should not be used in practice IMHO.

share|improve this answer
add comment

You should try to maintain a proper aspect ratio between the sizes you're scaling from and to. For example, if your target size is 28px, then your source size should be a power of that, such as 56 (28 x 2) or 112 (28 x 4). This ensures you can scale by 50% or 25% rather than the 0.233333% you're currently using.

share|improve this answer
add comment

One way to "normalize" the appearance in the different browsers is using your "server-side" to resize the image. An 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());

note the option InterpolationMode.HighQualityBicubic. This is the method used by Chrome.

Now you need publish in a web page. Lets going use razor:

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

And this worked very fine to me!

Ideally will be better to save the image beforehand in diferent widths, using this resize algorithm, to avoid the controller process in every image load.

(Sorry for my poor english, I'm brazilian...)

share|improve this answer
Where is using System.Web.Helpers; it generates error do we need to download any library for this.. –  KnowledgeSeeker Sep 11 '13 at 6:07
add comment

Your Answer


