librown
@librown
На-все-руки-мастер и немного кодер

Как правильно верстать адаптивные фото в background-image?

Привет!
Отстал от тенденций верстки года на 2. Переверстываю свой проект под адаптивную сетку, заодно изучаю тему.
На странице много фотографий (30-40 штук). Сейчас я для любых разрешений экрана подгружаю их большие версии (300-500 Кб). По итогу страница весит под 15 мегабайт. Это не дело. Начал копать в сторону адаптивных изображений. Пришел к такому способу:

<?while(...вывожу картинки из БД...){?>				

   <div id="img_XXX" style="background-image:url(XXX_small.jpg)"></div>

   <style>
   @media (min-width: 960px) {
      #img_XXX {background-image: url(XXX_big.jpg) !important;}
   }
   </style>

<?}?>


Минусы:
  • лишняя разметка
  • увеличение размера html
  • увеличение времени парсинга страницы браузером (?)
e7772e1a6d.jpg

Мне кажется этот способ довольно простым. Или я что-то не учел?
Может есть более гибкие способы загрузки разных фоновых картинок?
  • Вопрос задан
  • 363 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы