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

Question

[Александр]

Привет!
Отстал от тенденций верстки года на 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
  
• увеличение времени парсинга страницы браузером (?)
  

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