Resized Images painted on WinForms appear to have "fuzzy" edges

Question

I have an image that is saved as a size of 64x64 on disk. I load the image using this code:

resizeImage(Image.FromFile(@"C:\Users\ApachePilotMPE\Desktop\" + "img.png"), new Size(128, 128))

which returns a bitmap cast as an image like so:

public static Image resizeImage(Image i, Size newSize)
{
    return (Image)(new Bitmap(i, newSize));
}

When I paint that image on the form, the sides of the object in the image (just a black & white stick figure, with a transparent background) appear as if they have been antialiased to blend with the background. Is there any way to keep this from happening? I have tried setting the Graphics.SmoothingMode to None at runtime, but that doesn't seem to have any effect.

enter image description here

Top: Painted Image when loaded in with size 64 and increased to 128.

Bottom Left: Painted Image when loaded at 128.

Bottom Right: Edited-In Image, resized with Paint.NET, size 128.

To specify: The top image SHOULD look like the bottom left.

EDIT

Check updated code at the top of the post.

Have you tried setting the Interpolation mode? e.Graphics.InterpolationMode = InterpolationMode.HighQualityBicubic; — Dan, Feb 11 '14 at 21:56
I tried changing the interpolation mode, however none of the possible settings had any affect on the way that the image was rendered on the winform. Any other suggestions? — ApachePilotMPE, Feb 11 '14 at 22:01
Can you also include the original? What does it look like if you do exactly the same resize in Paint.NET or Gimp or some other graphics app? — Dan, Feb 11 '14 at 22:23
Posted a new screenshot with resized image compared to normal size. — ApachePilotMPE, Feb 11 '14 at 22:36
Does the answer in this question help?: http://stackoverflow.com/questions/5606292/undesired-anti-aliasing-when-drawing-bitmap-on-a-window — Dan, Feb 11 '14 at 22:45
So Hans, is there no way to get around it? The "fuzzyness"/antialiasing of the top image when resizing? — ApachePilotMPE, Feb 11 '14 at 22:49

score 1 · Accepted Answer · answered Feb 11 '14 at 23:33

  return (Image)(new Bitmap(i, newSize));

You are letting the Bitmap constructor resize the image. It will pick a "good" interpolation mode that attempts to avoid the blocky appearance you get from making pixels four times as big. You however prefer the blocky look, that means you'll have to take control of the Interpolation mode yourself. Like this:

    public static Image ResizeImage(Image img, Size size) {
        var bmp = new Bitmap(size.Width, size.Height);
        using (var gr = Graphics.FromImage(bmp)) {
            gr.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.NearestNeighbor;
            gr.DrawImage(img, new Rectangle(Point.Empty, size));
        }
        return bmp;
    }

Also note that you may prefer the look you'll get when you insert gr.Clear(Color.White); inside that code and not change the InterpolationMode. That avoids a problem with the transparent pixels in the original image having an awkward RGB value.

Accepted as answer. In the end, this worked fine, but I ended up setting the interpolation mode to NearestNeighbor. Thanks for the help! — ApachePilotMPE, Feb 12 '14 at 20:41

Resized Images painted on WinForms appear to have "fuzzy" edges

1 Answers1