title: How to replace a low resolution background-image with a better one once the higher resolution image has loaded fully?
body: <p>I want a very low quality of my background image to load with the initial paint, then a higher quality version to replace it, based on the browser's width.</p>
  
  <p>Here is my <strong>HTML</strong> :</p>
  
  <pre><code>&lt;div style="background-image: url('data:image/jpeg;base64,[...]');"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I'm giving the div a base64 background-image that's really low resolution.</p>
  
  <p>And in my <strong>CSS</strong> :</p>
  
  <pre><code>@media(max-width:  600px) { div { background-image:  url(600.jpg) !important} }
  @media(max-width: 1000px) { div { background-image: url(1000.jpg) !important} }
  @media(min-width: 1001px) { div { background-image: url(2200.jpg) !important} }
  </code></pre>
  
  <p>And here I'm overriding the inline rule with the appropriate images for each screen width.</p>
  
  <p>Unfortunately, as soon as the CSS file loads, the browser replaces the placeholder base64 image with an ugly partly-loaded version of the higher-quality image.</p>
  
  <p><strong>How can I wait for the background-image to be fully loaded before swapping-it in ?</strong></p>
  
  <p>Edit : as replied in the comments below, this is not a duplicate as the related answer does not address responsive image sizes.</p>