title: How do I prevent Mozilla from up-scaling images on HiDPI displays?
body: <p>When viewing a raster image, all more or less recent <em>Mozilla</em> products (e. g.: <em>Firefox</em> and <em>SeaMonkey</em>) transform it into a full HTML document, e. g.:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width; height=device-height;"&gt;
      &lt;link rel="stylesheet" href="resource://gre/res/ImageDocument.css"&gt;
      &lt;link rel="stylesheet" href="resource://gre/res/TopLevelImageDocument.css"&gt;
      &lt;link rel="stylesheet" href="chrome://global/skin/media/TopLevelImageDocument.css"&gt;
      &lt;title&gt;googlelogo_color_272x92dp.png (PNG Image, 544&amp;nbsp;×&amp;nbsp;184 pixels)&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The content of the default CSS styles can be viewed here:</p>
  
  <ul>
  <li><a href="https://gist.github.com/unix-junkie/dfc18b32847a1ba4fff5f2d3001e6835" rel="noreferrer"><code>resource://gre/res/ImageDocument.css</code></a></li>
  <li><a href="https://gist.github.com/unix-junkie/383a4804f15dca53af3cd2a059b9c4ca" rel="noreferrer"><code>resource://gre/res/TopLevelImageDocument.css</code></a></li>
  <li><a href="https://gist.github.com/unix-junkie/8a1cc012765507081434b0a2ca0816d9" rel="noreferrer"><code>chrome://global/skin/media/TopLevelImageDocument.css</code></a></li>
  </ul>
  
  <p>The problem is, on HiDPI displays, low-resolution images often get up-scaled (for instance, on a 4k display they're enlarged by a factor of <strong>x1.5</strong>).</p>
  
  <p>Which extra styles do I need to apply to the generated HTML in order for images to be always displayed in their original size (i. e. <strong>1:1</strong>)?</p>
  
  <p>I'm looking for the proper way to customize either <code>userContent.css</code> or <code>userChrome.css</code>.</p>
  
  <p>More on <code>userChrome.css</code>:</p>
  
  <ul>
  <li><a href="https://www.userchrome.org/what-is-userchrome-css.html" rel="noreferrer">https://www.userchrome.org/what-is-userchrome-css.html</a></li>
  <li><a href="https://www.reddit.com/r/firefox/comments/7dvtw0/guide_how_to_edit_your_context_menu/" rel="noreferrer">https://www.reddit.com/r/firefox/comments/7dvtw0/guide_how_to_edit_your_context_menu/</a></li>
  <li><a href="https://www.reddit.com/r/FirefoxCSS/" rel="noreferrer">https://www.reddit.com/r/FirefoxCSS/</a></li>
  </ul>