Вообщем проблема в следующем: пользователь при создании новости на сайте должен загрузить заставку(картинку) для этой новости. Новость создана, проверена модератором, уходит в новостную ленту. Какие есть способы сжать картинки когда они рендерятся на страницу, чтобы уменьшить количество загружаемых данных? Платформа Asp.Net MVC 4, есть несколько вариантов, по крайне мере известных мне:
- Можно сохранять картинку на сервере и далее сжимать ее сторонней программой без потери качества. Вариант очень плохой.
- Сжимать картинку сразу при ее добавлении на сервер и далее выплевывать ее уже сжатой, но качество картинки будет страдать.Вариант получше, но тоже не торт.
- Через HttpHandler (уже написал теперь пробую), который ловит request и возвращает сжатую картинку, но и тут возникает проблема, когда я начинаю обрабатывать эту картинку я указываю у нее размер и степень сжатия(или качества). Если размер не указывать, то объем картинки, конечно уменьшается, но не на столько, насколько с размером. Макет страницы резиновый, по-этому точный размер картинки я задать не могу, для каких то частей сайта, да он фиксированный например для аватара пользователя, но для большинства нет. Вот тут и возникает вопрос можно ли как то это сделать динамически, под разный размер экрана пользователя? Чтобы в мой request еще приходили примерные размеры картинки, для той или иной области.
Прим. контейнер для картинки:
<figure class="box-shadow-3">
<img src="@Url.Content(@Model.NewImages)" />
<figcaption class="text-white">
<div class="publication-date padding-all-10 border-right-bottom" title="Дата публикации">
<i class="fa fa-calendar"></i><span> @Model.NewDateAdd.ToShortDateString()</span>
</div>
<!-- /.publication-date -->
<div id="newAuthor" class="padding-all-10 col-md-8 border-left-top text-center">
<div class="col-md-8" title="Блог">
<i class="fa fa-rss"></i> @Model.BlogName
</div>
<!-- /.col-md-8 -->
<div class="col-md-4" title="Количество лайков">
<i class="fa fa-thumbs-up"> <span id="NewCountLikes">@Model.CountLikes</span></i>
</div>
<!-- /.col-md-4 -->
</div>
<!-- /#newAuthor -->
</figcaption>
<!-- /figcaption -->
</figure>
<!-- /figure -->
Нужно вычислить размеры W и H контейнера "
<figure>", его CSS:
figure {
width: 100%;
height: 400px;
position: relative;
}
figure img {
width: 100%;
height: 100%;
display: block;
}
Простой
Простой
