How to present MS-DOS screenshots

MS-DOS games that ran at 320x200 screen resolution didn’t have square pixels. This means the image was vertically stretched by the cathode-ray tube to fit the 4:3 aspect ratio of the actual display screen. As a consequence, screenshots taken of such games must be scaled vertically to look right on modern displays with square pixels.

This means if your original screenshot is 320x200, you should multiply the image height by 1.2 to arrive at the correct proportions. So resize the image to 320x240 or to 640x480 directly.

For a clean look, do the vertical stretching is last and with a smooth filter. For example for 3x upscaling, first you go from 320x200 to 1280x800 with nearest neighbor and then to 1280x960 with a linear filter. In practice, for large magnification (3x or more) the difference isn’t that visible when compared to just scaling everything to the final size with a nearest neighbor filter, as can be seen in the comparison below.

What you don’t want to do is scale only vertically with a nearest neighbor filter! It gives ugly rows of duplicated pixels like below:

Do the 2x nearest neighbor integer upscaling, followed by smooth vertical scaling instead:

Much better.

How to do it

Scaling with different filters can be done for example in Photopea via the Image > Image Size… menu item. For 2x upscaling, first scale the image to 640x400 with Nearest Neighbor selected in Resample, and then finally to 640x480 with Bilinear:

Tall integer pixels

Since all we want to do is make the pixels 20% taller, we could also resize the image so that each original pixel becomes a 5x6 pixel block. In this case it would mean a nearest neighbor scaling to 1600x1200. The browser will downscale the image anyway so it will look OK:

The upside of this scheme is that it doesn’t blend the pixels and we can keep the file as an 256-color PNG like the original. The file size (61 KiB) is twice of the original (36 KiB) but only a quarter of the bilinearly upscaled one (234 KiB). Though the bilinearly upscaled one can be compressed to 96 KiB with an 8-bit palette without much loss in quality.

The downside is that the uncompressed pixels will take more memory in the browser.

Pivot to video

If you have a video recording in 320x200 you can use ffmpeg’s linear filter chaining for upscaling:

ffmpeg -i gameplay.mp4 -vf "scale=1280:800:flags=neighbor,scale=1280:960" out.mp4

Note how the first scale filter is passed the neighbor flag and the latter will use the default bicubic filter. You can see how it looks in this Command & Conquer cutscene.

On the web

In theory you can set the aspect ratio of an image element via CSS like this:

<img style="width:320px;aspect-ratio:1.333;" src="image.png"></img>

Which results in:

It seems to work but I’m not if this is a good idea because you get original one when opened directly or saved. Perhaps that’s the behavior you want though? To let the users store the originals.

Other resolutions and systems

The exact same argument applies to the 640x400 display mode as well. You should scale it 1.2x vertically. However the 320x240 display mode happens to have square pixels so it will look correct as is. You can verify this by noting that 320/240 = 4/3.

For other computers you should check their exact pixel aspect ratios. Wikipedia has a list of them. Make sure to switch the page width to “Wide” from the side panel for easier reading.

You get the corrected vertical resolution by dividing the height with the pixel aspect ratio. For example for 320x200 the pixel aspect ratio is listed as 0.833 and 200 / 0.833 = ~240. If the pixel aspect ratio is greater than one then you can multiply the width instead with it. The idea is not to shrink the original when doing the correction!

Why is this so

You can read more about the so called mode 13h on Wikipedia and on the OSDev wiki.

Thanks to Warma for suggesting the 5x6 block scheme.

---

Mastodon Bluesky YouTube Feed

30fps.net