javascript - ASP.NET MVC 中的图像压缩

Question

我有很多大约 30kb 的图像(大约 1,000 张)，索引的负载大小是 45.5mb，如果你问为什么。

我从服务器获取图像，然后转换为字节数组，然后转换为base64字符串以发送到中的索引

data:image/webp;base64,{0}

我用这个:

Html.Raw(String.Format("data:image/webp;base64,{0}", Convert.ToBase64String(File.ReadAllBytes("\\\\ImageServer\\ImagePathFolder\\Image.JPG".Replace("\\", "\\\\")))))

到目前为止，索引加载大约需要 24 秒。

我请求帮助来压缩图像并至少得到我现在得到的一半大小。

NOTE: all this code in in ASP.NET MVC with C#

Answer 1

您应该在单独的请求中返回二进制大型对象(“BLOB”，通常大于 KB 左右的任何内容) - 这有很多优点，但主要原因是

• 浏览器可以缓存单个响应和图像。
• 它们可以直接传输，无需使用 Base64(有效地使用 1 个字节来传输 6 位数据)等低效格式进行编码。

而使用 data:在页面中包含内联图像的 URI 很浪费，因为每个请求都需要加载图像数据并将其编码为 Base64。尽可能避免磁盘 IO(此外，您的代码不使用异步 IO，因此效率特别低)。

在 ASP.NET MVC 和 ASP.NET Core 中，定义一个新的 Action 来处理图像请求:

[HttpGet("images/{imageName}")]
public ActionResult GetImage( String imageName )
{
    String imagefileName = GetImageFileName( imageName ); // don't forget to sanitize input to prevent directory traversal attacks

    // Use `FileResult` to have ASP.NET MVC efficiently load and transmit the file rather than doing it yourself:
    return new FilePathResult( imagefileName, "image/jpeg" ); // assuming all images are JPEGs.
}

在您的页面中，使用 <img />像这样的元素:

<img src="@( this.Url.Action("GetImage", new { imageName = "foo" } ) )" />

在 ASP.NET WebForms 中，您需要使用 *.ashx相反，但原理是一样的。