Сжатие изображений в ASP.NET MVC

Question

У меня есть много изображений (около 1000) в 30 КБ приблизительно, размер индекса был 45,5 МБ, если вы спросите почему.

Я получаю изображения с сервера, затем преобразую в байтмассив и затем в строку 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 секунды.

Я прошу помощи, чтобы сжать изображения и получить по крайней мере половину размера, который я получаю.

ПРИМЕЧАНИЕ: весь этот код в ASP.NET MVC с C #

Answer 1

Вы должны возвращать двоичные большие объекты («BLOB», как правило, все, что больше, чем килобайт или около того) в отдельном запросе - это имеет многочисленные преимущества, но основными причинами являются

• Браузерыможет кэшировать отдельные ответы и изображения.
• Их можно передавать напрямую, без их кодирования, используя неэффективный формат, такой как Base64 (который эффективно использует 1 байт для передачи 6 бит данных).

Принимая во внимание, что использование data: URI для включения изображений, встроенных в страницу, расточительно, потому что данные изображения необходимо загружать и кодировать в Base64 при каждом запросе. По возможности избегайте дискового ввода-вывода (кроме того, ваш код не использует асинхронный ввод-вывод, поэтому он особенно неэффективен).

В ASP.NET MVC и ASP.NET Core определите новое действие для обработки запросов к изображениям:

[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, ноПринцип тот же.