缩小图像质量损失

提问

我正在JS Carousel中显示图像.图片非常大,因此我将其缩小为HTML.我做一些数学运算以保持宽高比.最后,尽管这些大图像质量下降.应该注意的是,这些图像已经存在于服务器中,我不应该更改原始文件的大小.

是什么原因导致质量下降?我应该坚持使用较小尺寸的图像,增加最终显示的尺寸吗?这是提供帮助的代码,当前最大宽度和高度分别为270和180.所有这些都是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;
}

最佳答案

您遇到的问题是根本没有缩放图像,而是告诉Web浏览器拍摄完整尺寸的图像并将其缩小.可悲的是,浏览器并不擅长于此,我认为只是使用一种非常简单的算法即可做到这一点.

解决方案是在服务器上缩放图像.我建议让一个页面处理程序以某种方式(文件名,ID等)接收图像引用,并在输出到客户端之前进行大小调整.以下问题涉及c#中的缩放.

High Quality Image Scaling Library