Scaling Inform images in 2025

Authoring Inform 7
21

While many mobiles have high res screens, browsers (and CSS) always report the window size in logical pixels which are at a fixed resolution of 72dpi. For that reason you totally can key on window dimensions in pixels when using CSS and related browser information.

There is also a well established HTML method for specifying images with varying resolutions directly in the <img> tag using the srcset and sizes attributes.

e.g. (example from MDN)

<img
  srcset="elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
  sizes="(max-width: 600px) 480px,
         800px"
  src="elva-fairy-800w.jpg"
  alt="Elva dressed as a fairy" />

However, this would require the interpreter to know that you had multiple sizes and know how to render that <img> tag for you (assuming that the interpeter is generating the HTML).

2 Likes
22

Thanks for the srcset information. But it turns out it’s not enough to “totally can key on window dimensions” because you also need to take DPI into account.

Here’s an article where the author battles with all the different ways.

Even then, there’s no account for available net bandwidth, which is hugely important.

23

That doesn’t really say anything different from what I said. The screen dimensions in both JS and CSS are reported in CSS pixels (what the article you linked call “software pixels”) so when you are choosing breakpoints you can always act as if all screens had the same dpi.

Dpi only really matters to the srcset attribute and when you don’t just want a smaller image, but also a higher or lower resolution version. i.e. it’s about image optimisation for best appearance on a high-res screen or smaller download size. Most websites/people don’t actually bother with any of it.

24

Are you saying you can ignore DPI. If I go to https://www.whatismyscreenresolution.org/
It reports 390x844, but the actual res is 3x that.

You’d put a 390 pixel image on a 1170 screen.

25

Just a reminder that I had a proposal for a Glk extension to expose the pixel ratio: Glk extension proposal: Pixel Ratio

It didn’t really get any traction, though I’m still considering adding it to Parchment.

26

Alright, there’s some progress on this. Or perhaps not.

Turns out that srcset adjusts for dpi because the image versions provided are in actual pixels and the browser picks whatever it likes.

so;

  <img
    src="default.webp"
    style="width: 100%"
    srcset="low.webp 400w, med.webp 800w, high.webp 1000w, high1.webp 1100w, high2.webp 1200w, high3.webp 1400w, toohigh.webp 4000w"
    alt="Lose" />

On desktop, you can get all versions by resizing. On my android phone (396px), i get the 1100 version (x2.73, actual res 1080). On iphone (390px) i get 1200 version (x3, actual 1170).

This looks good until you discover all browsers always load the 4000 version as well. Which is silly. They get the biggest picture, ignore it and show a smaller one.

Also explained here.

So i try adding some media descriptors eg;

      sizes="(max-width: 390px) 390px, 
           (max-width: 400px) 400px,
           (max-width: 1100px) 1000px,
           (max-width: 1200px) 1100px,
           (max-width: 1300px) 1200px,
           (max-width: 2000px) 1400px,
           4000px"

But it still loads the biggest picture as well as the one it finally choses. I can put less in the media sizes list, but it will still load the largest specified as well as the one it finally uses!

This is obviously rubbish. If you have answer, or a suggestion, I’m happy to test it.

Then there’s using picture maybe like this:

  <picture>
    <source srcset="low.webp" media="(max-width: 400px)">
    <source srcset="med.webp" media="(max-width: 800px)">
    <source srcset="high.webp" media="(max-width: 1000px)">
    <source srcset="high1.webp" media="(max-width: 1100px)">
    <source srcset="high2.webp" media="(max-width: 1200px)">
    <source srcset="high3.webp" media="(max-width: 1400px)">
    <source srcset="toohigh.webp" media="(max-width: 4000px)">
    <img src="default.webp" alt="lose!">
  </picture>

But then i aways get the smallest because 400px is css pixels > 396 > 390. So basically, you can only use picture if you manually accommodate DPI. For example as x2, x3 etc, as done here.

Which is no answer either.

Here’s my res test link. The pictures are different with the sizes on them for amusement.

This whole debacle is another reason to avoid HTML and do everything yourself.