Making Game Boy screenshots on my blog beautiful, with SVGs

Last year, I added a new collection to my blog filled with games I’ve been playing. Some of those games have been Game Boy games.

To bring the collection to life, I created isometric-perspective illustrations of Game Paks; the cartridges for the Game Boy system.

It’s fun to see these cartridges atop my short form blogging, because video games are a visual medium. Words are not always enough.

Sometimes I have found myself also wanting to show the actual game, through screenshots.

Itty bitty screen space

The Game Boy screen was a resolution of 144 pixels high by 160 pixels wide; 23,040 pixels in total. That is tiny by modern standards.

By comparison: the screen on your phone – despite being roughly 3 times physically larger than the Game Boy’s screen – probably has north of 3 million pixels.

As natively Game Boy screenshots are incredibly low resolution, sharing them in a blog post can end in some ugly results. You either end up with an image so physically small it’s comical, or with an oversized image that is fuzzy and pixelated.

Screenshots belong on screens

I’ve given my Game Boy screenshots a Game Boy-like console to feel at home in.

Modelled on the Analogue Pocket, this console-like frame is a resolution-independent SVG. The screenshots are inserted dynamically into the frame, with a gridded filter applied on top, to give them a more period-appropriate feeling.

It’s got both a light and dark colour scheme, too (you can see for yourself by toggling dark mode on your device).

A side-by-side comparison of two SVG, Game Boy-like consols. One is off-white, the other is dark gray.
Light mode. Dark mode!

This is completely frivolous but I think it looks cool. Now, my Game Boy screenshots aren’t too small or too big, and they’re properly framed.