title: Is it possible to downscale (actually resize) an image before displaying it and loading the original into RAM?
body: <p>I'm building an Electron app (Chrome + Node.js) which goal is to display all the images of a specified folder.</p>
  
  <p>It's an app, so all the images are already on the disk, no need to download anything.</p>
  
  <h2>Problem:</h2>
  
  <p>I need it to display all the images as <code>64x64</code> thumbnails, but since they are getting loaded as <code>&lt;img&gt;</code> elements, the original images are getting loaded into RAM and only after that CSS "resizes" them to <code>width: 64px; height: 64px</code>, but it's not really, it still holds the original images in the RAM, so displaying 300 images (1mb- 20mb) takes ~3.5 GB of RAM.</p>
  
  <h2>Question:</h2>
  
  <p>So, I was wondering if there are any simpler ways to just get that <code>64x64</code> thumbnail of an image and display that instead of the original on the webpage?</p>
  
  <p>Would that be even possible to make the browser to downscale (actually resize images to 64x64) before displaying them (meaning before loading them into RAM)?</p>
  
  <h2>Tried:</h2>
  
  <p>I tried using <code>&lt;canvas&gt;</code> instead of <code>&lt;img&gt;</code> but it makes the app laggy on scroll because it's quite computationally intensive (~0.1ms / image). I wanted to send it over to a web worker, but couldn't do it.</p>
  
  <p>// I'm using vue.js there</p>
  
  <pre><code>// THIS TAG IS INSIDE A V-FOR LOOP SO A CANVAS TAG IS CREATED FOR EACH ITEM IN THE LIST
  &lt;canvas :id="'item-' + props.index"&gt; 
    {{drawThumbnails(props.item.path, props.index)}} 
  &lt;/canvas&gt; 
  
  drawThumbnails (path, canvasId) {
    console.time('draw time')
    var image = new Image(); 
    image.onload = function() {
      var canvas = document.getElementById(canvasId);
      canvas.width = 64;
      canvas.height = 64;
      canvas.getContext("2d").drawImage(image, 0, 0, 64, 64);
    }
    image.src = path
    console.timeEnd('draw time')
  }
  </code></pre>
  
  <p>Another way I figured I could do this is to resize images to <code>64x64</code> with <code>jimp</code> and save them to disk. It's quite slow but I can send this job to another core using a web worker</p>