title: Responsive design and image sizes
body: <p>Q. What technique is the most efficient in terms of image load times and performance...?</p>
  
  <p>Scenario 1.</p>
  
  <p>Is it to load a different size image by using a media query, as below:</p>
  
  <pre><code>/* Smartphone */
  @media screen and (max-width: 320px) {
     .img-page-1-img {
        background: url('../images/img-page-1-img-117.jpg') no-repeat;
        width: 117px;
        height: 77px;
     }
  }
  /* Desktop */
  @media only screen and (min-width: 769px) {
     .img-page-1-img {
        background: url('../images/img-page-1-img-234.jpg') no-repeat;
        width: 234px;
        height: 154px;
     }
  }
  </code></pre>
  
  <p>OR...</p>
  
  <p>Scenario 2.</p>
  
  <p>Load one single large image and use CSS to "stretch" and resize by setting the max-width property..?</p>
  
  <pre><code>img {
     max-width: 100%;
  }
  </code></pre>
  
  <p>Thanks....</p>