Question

我有一个网站，显示数百个带JPEG文件的产品目录（文件大小40kb - 150kb）。我意识到我的网站生成了数百个http请求。您是否知道如何在asp.net MVC中优化数百个图像？

Answer 1

将图像嵌入到页面中作为Base64编码而不是使用其URL。这将减少webbrowser必须提出的http请求数。

http://lucdebrouwer.nl/how-to-base64-encode-your-images/
压缩您的页面。

http://developer.yahoo.com/performance/rules.html

更新：以下是在Asp.Net MVC中将Image对象转换为Base64的方法

    private string ImageToBase64(Image image,
                                 ImageFormat format)
    {
        using (var ms = new MemoryStream())
        {
            // Convert Image to byte[]
            image.Save(ms, format);
            byte[] imageBytes = ms.ToArray();

            // Convert byte[] to Base64 String
            string base64String = Convert.ToBase64String(imageBytes);
            return base64String;
        }
    }

    private Image Base64ToImage(string base64String)
    {
        // Convert Base64 String to byte[]
        byte[] imageBytes = Convert.FromBase64String(base64String);
        using (var ms = new MemoryStream(imageBytes, 0,
                                         imageBytes.Length))
        {
            // Convert byte[] to Image
            ms.Write(imageBytes, 0, imageBytes.Length);
            Image image = Image.FromStream(ms, true);
            return image;
        }
    }

你这样使用它：

<img src="data:image/jpeg;base64,' + yourImageBase64string + '" />

请记住，这样做可能不会在不压缩页面的情况下加快页面加载速度。为什么你不能只显示这些图像的子集并让用户在它们之间导航？

ASP.NET MVC如何优化数百个图像以减少http请求

1 个答案: