title: Image resizing causing slow scrolling
body: <p>I'm loading large images and having the browser resize them. I'm explicitly setting the size.</p>
  
  <pre><code>&lt;img src="http://example.com/image1.jpg" width="240" height="360"/&gt;
  </code></pre>
  
  <p>There are many such images on the page. Scrolling is very slow and choppy. The Events Timeline in chrome looks something like this when scrolling:</p>
  
  <pre><code>Paint
  
  * Image decode (JPEG)
  * Image resize (non-cached)
  * Image decode (JPEG)
  * Image resize (non-cached)
  * ...
  
  Paint
  
  * Image resize (cached)
  * Image resize (cached)
  * Image resize (cached)
  * Image resize (cached)
  
  Paint
  
  * Image decode (JPEG)
  * Image resize (non-cached)
  * Image decode (JPEG)
  * Image resize (non-cached)
  * ....
  
  Paint
  
  * Image resize (non-cached)
  * Image resize (non-cached)
  * Image resize (non-cached)
  * Image resize (non-cached)
  
  Paint
  
  * Image decode (JPEG)
  * Image resize (cached)
  * Image decode (JPEG)
  * Image resize (cached)
  * ...
  </code></pre>
  
  <p>etc.</p>
  
  <p>I'm not sure why some of the Paint events include image decoding and others don't, nor why sometimes the resizing is cached and sometimes it is not. I guess it must have to do with new images coming into the view-port.</p>
  
  <p><strong>Is there anything I can do to ensure that I only pay the image resize cost once per image when the page loads, and avoid image resizing during scroll?</strong></p>
  
  <p>(Of course, I understand that the best solution is to avoid browser resizing by loading in an image that is already of the appropriate size. In this case this is not practical.)</p>