Адаптивный дизайн и размер картинок в контенте, что делать?

[tovGANs]

Если картинку в статьях грузить не через тег img, а фоном, то можно с помощью медиа запросов выдавать ту версию картинки, которая соответствует разрешению экрана:

<style>
@media(min-width:480px){
.image{
width:100%;
height:auto;
background-size:100%;}
#unique-picture-id{
background-image:url(unique-picture_xs.jpg);
}
}
@media(min-width:768px){
#unique-picture-id{
background-image:url(unique-picture_sm.jpg);
}
}
@media(min-width:1024px){
#unique-picture-id{
background-image:url(unique-picture_md.jpg);
}
}
</style>
<div class="image" id="unique-picture-id"></div>

Конечно у этого способа есть много минусов. НО так позволит экономить трафик.

 

[funnywheel]

Конечно у этого способа есть много минусов. НО так позволит экономить трафик.

Как Вы собираетесь выводить изображения постов в блоге в качестве бэкграудов на css? Инлайн-стили генерить? И, кстати, есть хороший шанс, что Ваш юзер перевернет свой планшет и изменится брейкпоинт, в итоге будет загружена еще одна картинка, и вместо экономии - перерасход. =\

 

[werty1001]

Для вывода разных картинок для разных устройств придумали тег picture

 

[alextw]

Как сделать, чтобы для смартфонов были маленькие фотки, для других другого размера?
Мысли такие:
1. на js подменять другой размер картинок. Но делается после загрузки страницы, а значит большие фотки уже загрузятся.
2. загружать сначала контент, а затем, после загрузки страницы на js загружать нужный размер фоток к каждой статье

Если менять содержимое страницы, можно получить фильтр за клоакинг...
Как быть, что можно сделать?

можно вставить js в хедер, именно не подключить, а разместить, тогда js выполнится до загрузки контента, другой момент, что не сработает подмена ссылок, но тут AJAX в помощь.

 

[tovGANs]

Как Вы собираетесь выводить изображения постов в блоге в качестве бэкграудов на css? Инлайн-стили генерить? И, кстати, есть хороший шанс, что Ваш юзер перевернет свой планшет и изменится брейкпоинт, в итоге будет загружена еще одна картинка, и вместо экономии - перерасход. =\

Да, нужно будет вставлять инлайн стили, а попововду брекпоинта, можно грузить одну картинку, только шаблоны для двух вариантов положения планшета нужно продумать, чтобы смотрелось нормально.

 

[pop00]

<img width="1000" height="600" src="img-name-1000x600.jpg" srcset="img-name-300x180.jpg 300w, img-name-450x270.jpg 450w, img-name-1000x600.jpg 1000w" sizes="(max-width: 1000px) 100vw, 1000px">

The srcset and sizes attributes extend the img and source elements to provide a list of available image sources and their sizes. Browsers can then use this information to pick the best image source. -> Для просмотра ссылки Войди или Зарегистрируйся

 

[pop00]

как использовать HTML "picture" для адаптивных изображений - Для просмотра ссылки Войди или Зарегистрируйся

 

[uniqueart]

Сначала оптимизируй картинки - максимально уменьши их размер, а для адаптивного поведения используй:

.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}

 

[Relimeyt]

Пользуйтесь библиотекой для адаптации bootstrap
Там для адаптируемых картинок есть специальный класс