縮小圖像質量損失

Question

我正在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;
}

Answer 1

您遇到的問題是您根本沒有縮放圖像，而是告訴Web瀏覽器拍攝完整尺寸的圖像並將其渲染得更小。 可悲的是，瀏覽器並不是很擅長，我認為只需使用一種非常簡單的算法即可。

解決方案是縮放服務器上的圖像。 我建議有一個頁面處理程序以某種方式接收圖像引用（文件名，id等）並在輸出到客戶端之前進行大小調整。 以下問題涉及c＃中的縮放。

高質量圖像縮放庫

Answer 2

如果縮小圖像服務器端更好，請查看此文檔 。 這將節省網絡流量並創建更高質量的圖片。