title: Pixelated image downscaling in Microsoft Edge
body: <p>I recently made a logo for my website with a resolution of 400x400. It scales down to 40x40 just fine in any other browser I have tested, but it acts weirdly in Edge. Every time I refresh the page, it renders properly for a split second, before changing to an ugly, pixelated look after the page completes loading.</p>
  
  <p>How it looks before the page loads fully (and how I want it to look):</p>
  
  <p><a href="https://i.stack.imgur.com/TkO9E.png" rel="noreferrer"><img src="https://i.stack.imgur.com/TkO9E.png" alt="How it looks before the page loads fully"></a></p>
  
  <p>How it looks when page finishes loading:</p>
  
  <p><a href="https://i.stack.imgur.com/Ntx8s.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Ntx8s.png" alt="How it looks when page finishes loading"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;img src="/images/logo.png" class="logo"&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.logo {
      width: 40px;
      height: 40px;
  }
  </code></pre>
  
  <p>EDIT: Here's a <a href="https://jsfiddle.net/ypqLb2jj/" rel="noreferrer">JSfiddle</a> to reproduce my problem.</p>