Отображение картинки из базы без запроса на сервер в MVС

Я искал альтернативный способ как можно отобразить картинку на странице не делая запроса на сервер, который отдает контент изображения. В основном, у всех вывод картинки на страницу выглядит так:

если она у вас хранится на диске то первый варинат, если в базе то второй вариант. В обоих случая браузер посылает GET запрос на картинку. Если мы отображаем 10 записей, мы должны сделать 10 запросов чтоб получить картинки. А если мы делаем фотоальбом, отображаем штук 30 привьюх и храним картинки в базе, то грузиться будет дольше.

Решение которое я покажу называется inline image. Суть в том, что вы не делаете лишний запрос за картинкой, вы сразу встраиваете картинку в браузер. Выглядит это так

В src просто пишется контет, закодированый через base64. Так выглядит мой хелпер, который может генерит такую картинку.

 public static class ImageHelper
    {
        public static MvcHtmlString Image(this HtmlHelper html, byte[] imageBytes, string mime, object attributes)
         {
             TagBuilder img = new TagBuilder("img");

             StringBuilder sb = new StringBuilder();
             sb.AppendFormat("data:{0};", mime);
             sb.AppendFormat("base64,{0}", Convert.ToBase64String(imageBytes));

             img.MergeAttribute("src", sb.ToString());

             return MvcHtmlString.Create(img.ToString(TagRenderMode.SelfClosing));
         }
    }

    // пример использование
    @Html.Image(Model.ToArray(), "image/jpg", new { width = 530, height = 390 }) 

Конечно для картинок которые весяк около 30kb, src будет намного больше. Например чтоб отобразить такой значок в 35kb

 

у меня получилось 

токо шире в 4 раза :)

Итог

Преимущества данного решения в том, что мы избавляемся от лишнего запроса на сервер и если размер картинки не велик, например, до 10 кб, то данное решение будет оптимально для отображения кучи картинок, если они у вас хранятся в байтах.
Конечно у него есть и недостатки: что мне очень не нравится, то что картинки не кэшируются :/ (только если всунуть data в css) и эта возможность не поддерживается некоторыми версиями браузеров.

В общем это было алтернативное решение, которое имеет место жить в частных случаях. Часто такое можно увидеть в css если посмотреть сайты yahoo, youtube, amazon и тп.