4

Пользователь при создании новости на сайте должен загрузить заставку(картинку) для этой новости. Новость создана, проверена модератором, уходит в новостную ленту. Какие есть способы сжать картинки, когда они рендерятся на страницу, чтобы уменьшить количество загружаемых данных? Платформа Asp.Net MVC 4, есть несколько вариантов, по крайней мере известных мне:

  1. Можно сохранять картинку на сервере и далее сжимать ее сторонней программой без потери качества. Вариант очень плохой.
  2. Сжимать картинку сразу при ее добавлении на сервер и далее выплевывать ее уже сжатой, но качество картинки будет страдать.Вариант получше, но тоже не торт.
  3. Через HttpHandler (уже написал теперь пробую), который ловит request и возвращает сжатую картинку, но и тут возникает проблема, когда я начинаю обрабатывать эту картинку я указываю у нее размер и степень сжатия(или качества). Если размер не указывать, то объем картинки, конечно уменьшается, но не на столько, насколько с размером. Макет страницы резиновый, по-этому точный размер картинки я задать не могу, для каких то частей сайта, да он фиксированный например для аватара пользователя, но для большинства нет. Вот тут и возникает вопрос можно ли как то это сделать динамически, под разный размер экрана пользователя? Чтобы в мой request еще приходили примерные размеры картинки, для той или иной области.

Прим. контейнер для картинки:

figure {
  width: 100%;
  height: 400px;
  position: relative;
}

figure img {
  width: 100%;
  height: 100%;
  display: block;
}
<figure class="box-shadow-3">
  <img src="https://static.tonkosti.ru/images/2/23/%D0%AD%D0%B9%D1%84%D0%B5%D0%BB%D0%B5%D0%B2%D0%B0_%D0%B1%D0%B0%D1%88%D0%BD%D1%8F_%D0%B2_%D0%9F%D0%B0%D1%80%D0%B8%D0%B6%D0%B5%2C_%D0%A4%D1%80%D0%B0%D0%BD%D1%86%D0%B8%D1%8F.jpg" />
  <figcaption class="text-white">
    <div class="publication-date padding-all-10 border-right-bottom" title="Дата публикации">
      <i class="fa fa-calendar" />
      <span>&nbsp;@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" />&nbsp;&nbsp;@Model.BlogName
      </div>
      <!-- /.col-md-8 -->
      <div class="col-md-4" title="Количество лайков">
        <i class="fa fa-thumbs-up">&nbsp;<span id="NewCountLikes">@Model.CountLikes</span>
                    </i>
      </div>
      <!-- /.col-md-4 -->
    </div>
    <!-- /#newAuthor -->
  </figcaption>
  <!-- /figcaption -->
</figure>
<!-- /figure -->

Нужно вычислить размеры W и H контейнера "figure", его CSS

12
  • ну если вы хотите что бы изображение ни теряло качество то загружайте его в хорошем качестве но стили для него должны быть :img{display:block;width:100%;height:100%;} и вложено это изображение в блок с нужным размером , и так качество не потеряется
    – user33274
    24 дек 2015 в 13:31
  • Дак проблема в том, что если картинка будет хорошего качества она и весить будет много(допустим 1 мб), а мне нужно качество приемлемое(где-то 50-100 кб). Причем если, еще и узнать размер контейнера для картинки, то ее можно загрузить вообще ~10-20 кб. что для меня было бы более чем достаточно. Но вот как узнать размер резинового контейнера это для меня загадка.
    – rpe4a
    25 дек 2015 в 4:55
  • эта вёрстка у вас мобильная ?
    – user33274
    25 дек 2015 в 5:00
  • это общая верстка, мобильные не в приоритете, но стараюсь чтобы и на мобильных было приемлемо, пока основной функционал к сайту делаю, а с версткой уже потом разберусь .
    – rpe4a
    25 дек 2015 в 5:48
  • ну тогда я щас скину пример и вы скажете так или нет , ок ?
    – user33274
    25 дек 2015 в 5:54

2 ответа 2

1

Гораздо лучше для этой цели подойдёт использование атрибута srcset или элемента <picture>, которые позволяют браузеру выбирать подходящее изображение в зависимости от параметров экрана. Подробнее про гибкие изображения на MDN.

В таком случае размеры можно указать в query-параметрах и пересжать уже под них в хэндлере. Впрочем, я бы пожалел процессорное время и просто держал на диске несколько картинок под разные размеры и сжимал сразу при загрузке.

Кстати, возможно, при сжатии стоит обратить внимание на начальный формат - jpg/png и сохранить его, чтобы избежать артефактов сжатия на png. Ну и отдельный вопрос про анимированный gif.

0

var container = document.getElementsByClassName("container");
console.log("Width = " + container[0].clientWidth + "px" + "\n " + "Height = " + container[0].clientHeight + "px")
header {
  width: 500px;
  height: 300px;
  background: blue;
}

.container {
  width: 100%;
  height: 100%;
  background: #000;
}
<header>
  <div class="container"></div>
</header>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.