How to make responsive photos in background-image?

Question

css

Hey!
I am 2 years behind the layout trends of the year. I am redesigning my project for an adaptive grid, at the same time studying the topic.
There are many photos on the page (30-40 pieces). Now I load their large versions (300-500 Kb) for any screen resolution. As a result, the page weighs under 15 megabytes. That's not the point. Started digging towards adaptive images. I came up with this way:

<?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>

<?}?>

Minuses:

• extra markup
  
• html size increase
  
• increase in page parsing time by the browser (?)
  

It seems to me that this method is quite simple. Or did I miss something?
Maybe there are more flexible ways to load different background images?