Я искал альтернативный способ как можно отобразить картинку на странице не делая запроса на сервер, который отдает контент изображения. В основном, у всех вывод картинки на страницу выглядит так:
если она у вас хранится на диске то первый варинат, если в базе то второй вариант. В обоих случая браузер посылает 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 и тп.
Комментариев нет:
Отправить комментарий