Shrinking Image Quality Loss

Question

I'm displaying images in a JS Carousel. The images are extremely large size so I shrink them down in the HTML. I do some math to maintain the aspect ratio. In the end though those large images reduce in quality. It should be noted these images already exist in the server and I'm NOT supposed to change the original file's size.

What is causing this reduced quality? Should I stick to smaller size images, increase the final size that will be displayed? Here's the code to help out, max width and height are currently 270 and 180 respectively. All of this is C#.

// srcccccc is the image file. Can be any kind of extension jpg, png, etc.
if (srcccccc != "")
{
    Globals.NavigateURL();
    string path = PortalSettings.HomeDirectory + srcccccc;
    using (System.Drawing.Image img = System.Drawing.Image.FromFile(@Server.MapPath(path)))
    {
        int[] newSizes = ResizeWithRatio(img);
        contentsall += "<img src=\"" + PortalSettings.HomeDirectory + srcccccc + "\" alt=\"Image "
            + folderidddin + "\" height=\"" + newSizes[1] + "px\"" + "\" width=\"" + newSizes[0] + "px\" />";
    }
}

// HTML is dynamically added later....

private int[] ResizeWithRatio(System.Drawing.Image img)
{
            int[] sizes = new int[2];
            if (img.Width > maxWidth || img.Height > maxHeight)
            {
                float ri = (float)img.Width / (float)img.Height;
                float rs = (float)maxWidth / (float)maxHeight;
                if (rs > ri)
                {
                    sizes[0] = (int)((float)img.Width * (float)maxHeight / (float)img.Height);
                    sizes[1] = maxHeight;
                }
                else
                {
                    sizes[0] = maxWidth;
                    sizes[1] = (int)((float)img.Height * (float)maxWidth / (float)img.Width);
                }
            }
            else
            {
                sizes[0] = img.Width;
                sizes[1] = img.Height;
            }
            return sizes;
}

possible duplicate of [High Quality Image Scaling C#](http://stackoverflow.com/questions/249587/high-quality-image-scaling-c-sharp) — Diodeus - James MacFarlane, Jun 20 '12 at 13:28
With this method, the quality of the resized image will be up to the browser, because you're just manipulating the image tag, not the image itself. If you were to resize the `System.Drawing.Image` on the server side, and serve it back to the browser as an entirely different image, you can control the quality. — Cᴏʀʏ, Jun 20 '12 at 13:30

score 3 · Accepted Answer · edited May 23 '17 at 12:12

3

The problem you are having is that you aren't scaling the image at all, you are telling the web browser to take the full size image and render it smaller. Browsers sadly are not very good at this and I think just use a very simple algorithm to do this.

The solution would be to scale the images on the server. I would suggest having a page handler which receives an image reference in some way (filename, id, etc.) and does the resizing before outputting to the client. The following question deals with the scaling in c#.

High Quality Image Scaling Library

edited May 23 '17 at 12:12

Community

1
1

answered Jun 20 '12 at 13:31

Chris

27,210
6
71
92

As I thought. Right now I'm gonna see how some of our server uploaded images that are at appropriate sizes look. If image quality looks good I won't worry about it. I was just looking for confirmation as to why quality was so poor. – Mitchell Jun 20 '12 at 13:39

score 1 · Answer 2 · answered Jun 20 '12 at 13:29

1

It is better if you shrink the images server side, have a look at this documentation. This will save network traffic and create better quality pictures.

answered Jun 20 '12 at 13:29

Felice Pollano

32,832
9
75
115

Shrinking Image Quality Loss

2 Answers2