Teaching old content new tricks

Recently I decided to resurrect an old web comic I used to write in my twenties. This was very much a piece of self-indulgence for me rather than anything more significant, but as I put it to my wife: when you think about digital content for a living, it's hard not to approach this kind of thing like it's your job.

So, what were a few of the things I needed to think about to bring back a (very modestly) beloved web comic that last saw the light of day in 2014?

Different channels for different audiences

When I started my web comic back in 2004 (!) shareability wasn't really a thing I needed to worry about. (It wasn't really a thing that existed yet.) I just put it on my blog because, at the time, that was pretty much the only place I could put it. Facebook was less than a year old, Twitter didn't exist... Instagram only got started when I was already six years into the comic, more than halfway through its original lifespan.

Nowadays, though, Instagram not only exists but has a thriving comic scene, including several that have parlayed their Instagram following into more traditional media success. Obviously, in 2024, I needed to be on Instagram.

On the other hand, one of my most devoted readers the first time round was my dad, and he's not on Instagram. And as a "user persona," as we'd call it at my day job, that's an instructive piece of insight. Believe it or not, there are still a lot of people out there who find content in their web browser rather than on a social media app, and who share content by emailing URLs to each other rather than reposting/retweeting/etc. And in the Venn diagram of those people, and the people who might enjoy the sort of niche academic humour my comic trades in, there's a lot of overlap — so I needed a non-Instagram channel too.

In fact, for that specific audience, I needed to serve two distinct use-cases: one, people who just want a bookmark-able link where they can always find the latest comic; and two, people want a specific URL they can share when they find a comic they like. So that's why, when you now visit www.andrewladd.com/cwg, you'll always get automatically served the latest comic. But it's also why the site will automatically update the URL, on that initial page load and every subsequent load of a new comic. That way, whichever comic you're looking at, you can always just copy and paste the URL and email it to whoever you like.

SEO

Part of the reason I rebuilt this personal website as a whole was to boost my ranking for "Andrew Ladd" searches and avoid getting lost in a sea of other, often more famous Andrew Ladds. For the comic, I wanted to make sure that it would have similarly had good SEO, so that if someone wanted to easily find it (or find out more about it) they could. But I also wanted to make sure that it didn't damage my "Andrew Ladd" SEO at the same time.

That's the other reason for the query string solution above. While I could have set up my site to automatically generate a new page for each new comic I uploaded, over time this would have built up into potentially hundreds of pages that were substantially identical from a search engine point of view (that's bad), and far outweighed the number of Andrew Ladd pages on andrewladd.com (that's worse).

Instead, now, there's just one page for search engines to find, and that page serves all the users it needs to.

File formats

In the comic's original incarnation, I used a template in Photoshop to create it, and then exported the file to a 460x422px GIF.

These days there would be a couple of problems with doing it that way. For one thing, a 460x422px GIF viewed on a modern HD display is going to be blurry, difficult to read, or both. Worse, the sprites I used for the original comic were themselves saved as even smaller GIFs which I wouldn't be able to scale up without losing sharpness.

So my first step was to convert all those GIF sprites to SVG files, which can be endlessly scaled up without ever losing definition. It does mean I've lost some of the texture and warmth of the original files, but the SVGs sprites are more stylised in a way that I like, and to be honest unless you look at them side-by-side with the old ones you probably won't notice any difference.

Turning the sprites into SVGs means I can also really easily include them inline in webpages and manipulate their properties through code — which is why I can now add a sprite as a menu item in this website's navigation menu, have it scale responsively with screen size, and even pick up the same colours as the text/background around it.

There's a bigger change now, too: whereas previously every comic was only one GIF, now every comic is six PNGs. That's because, on Instagram, it's better to have each frame saved separately so that users can swipe through them at a larger size and read them more easily — so Instagram alone requires five files. Instagram also doesn't support transparency in image files, but I need transparency for posting the comics my website, so that's the sixth.

Carbon footprint (😬)

All of the above means the comics are always going to look sharp and load quickly, no matter who's viewing them and on what kind of connection/device.

As a result, though, compared to the comic's original incarnation, the new one is a lot more bloated. One comic used to be a single, 40kb file; now it's more like 2mb, by the time you take into account all those extra files.

That's best practice and it's what modern web users expect, but it's also a telling reflection of how technological "progress" often has hidden costs. In 2004, some of my readers were still using dial-up and reading on CRT monitors, so a 40kb file was essential and resolution didn't much matter. Nowadays, there's no practical cost to the user of a 500kb file versus a 40kb one, because even on mobile data they'll both load pretty much instantaneously. On the contrary, now the "cost" for users is attached to a blurry, low-res file that will look crappy and be difficult to read.

It's kind of impossible to make an authoritative comparison, because in general a phone screen is going to be more energy efficient than a CRT monitor, and now all those images are served from a Content Delivery Network (CDN) which in theory reduces the energy required to serve them when requested. Those are just two of the many, many variables you'd need to account for comparing the carbon footprint a GIF on a blog in 2004 and five PNGs on Instagram in 2024.

But at the end of the day, the new comics take up a lot more space than the old ones, and all our supposed progress over the last twenty years has not only pushed us in that direction but in fact actively demands it. So I'm doing my best within the constraints I have, but this is why it's more important than ever that tech and digital workers consider environmental impact in everything they build. In general, if you want to make something shinier, it comes with a cost. It's always worth asking if that cost is justified by the outcome.

And on that note, maybe you should go read the comic and decide for yourself.