The green way to blog longevity via image optimisation

Back in 2018, I wrote a post called ‘Turbo-boost your site by optimising images‘. Since then, I’ve encountered a number of bloggers who have started new blogs; and they’ve all done so for the same reason: because their old ones ‘ran out of space’. That has spurred me to write a more detailed follow-up to my earlier post.

There are several very good reasons to consider optimising your images, including:

• Minimising your blog’s data storage needs delays the point at which you run out of space (and it might also save you money).
• It makes your pages leaner, so they load faster – which benefits all your site’s visitors.
• It’s the greener choice, as it reduces society’s need to generate electricity. (Although you don’t pay for this directly, in effect we all do.)
• Image optimisation is quick and easy to do, and it’s really not difficult to learn how to do it.

I thought it might be useful to illustrate this with an example…

All Things Bright and Beautiful (a case study)

Ju-Lyn, the owner of the site, kindly agreed to let me shine a spotlight on it.

Here’s what Ju-Lyn says on the site’s last post:

After much contemplation, I’ve decided to start a new blog instead of upgrading this current one which is pushing close to the memory limit. I’ve consulted some of you, dear BlogFriends, who have done one or the other, and I have dug deep as to where I see myself with blogging in the coming years.

Ju-Lyn, on All Things Bright and Beautiful

Had Ju-Lyn optimised her images, that memory limit would still be far away. She might even have found that she’d never been faced with the problem with which she wrestled here.

Church of St Francis of Assisi, Singapore, 21Feb2021 by Ju-Lyn (optimised to the actual size needed)

As an example: the image in that post, linked above, is rendered as 250 by 333 (pixels), yet the actual image is a massive 3024 by 4032; the WordPress.com system automagically resized it to fit.

The ‘weight’ of the original image, in terms of how much space it requires on disk, is ~1.5 megabytes (MB). That itself is pretty big, though some of the pictures my dumbphone gives me are twice that, or even larger.

With Ju-Lyn’s permission, I made a copy of that image and resized it to the actual size used on the post – 250 by 333 pixels. It’s the one shown here on this page.

The ‘weight’ of this resized image is just 13 kilobytes (KB). That’s less than 1% of the original. To put it another way, in case percentages aren’t your thing: the space required by this one unoptimised image is as much as that needed by a hundred optimised ones.

Here’s a link to the original image. Depending upon your bandwidth, you may notice how slowly it loads (on first access), compared with the smaller copy.

A quick look around other pages on the site suggests that all of its other images are also unoptimised. I’m pretty sure that this is the reason for the looming ‘memory limit’ problem that caused Ju-Lyn to start afresh with a new site (that one’s called ‘Touring My Backyard‘).

Also, optimising your images has another distinct benefit: it allows your pages to load much more quickly. That’s a kindness to all of your site’s visitors. (It’s also of particular relevance to those accessing your site via a dumbphone: large images burn through data budgets!)

---

A bit of personal history

Back in the early days of the innerwebz, ‘broadband’ hadn’t yet been devised; everyone and his dog connected with a modem on ‘dial-up‘, and the bandwidth available using that was a tiny fraction of what we’re now used to. In those early days, I designed websites for businesses, and to make them fly it was crucial to make each page as lean as possible so that it loaded fast. Images were always the issue… and so I learned how to optimise them.

So, when I started blogging, over a decade later, I naturally used the same techniques. My blog here, ‘Wibble’, has been going since 2007. Its media library contains just over 500 images, yet the total weight of all of those is less than 40MB – because every single one of them has been optimised. That total is just 1% of my 6GB allotment (I have a WordPress.com ‘personal plan’; free sites get half that). I’ll probably be dead long before I get to even 2%, let alone anywhere near the alloted maximum, so I’ll never have a need to close ‘Wibble’ down and start afresh.

---

Reducing your data storage needs is the green choice

There’s another excellent reason you should consider adopting this technique: it’s the green choice.

In ‘Diving deep into the blogosphere‘ I made a stab at estimating the number of blog posts that exist (just on WordPress.com), and came up with a number: 21 billion (and that’s almost certainly an underestimate).

Now, not all of those posts have photographic images on them, but a lot of them do (and by far the majority of those images aren’t optimised; they’ll have been plonked on the page directly from the camera). Let’s say a quarter of all of those pages contain at least one such image, and that the weight of each image is ~1.5MB as in the example from the case study above. So, that’s about five billion times 1.5MB, which comes out as a staggering 7.5 petabytes (PB). And that’s just for images, the vast majority of which are humongously larger than they need to be.

ARSAT data center (2014) by IMarcoHerrera (resized to 350×234 pixels, ~19KB) CC BY-SA 4.0
(click to embiggen)

All that data has to be stored somewhere: in data centres, which are industrial-scale operations, some of which use as much electricity as a small town. Globally, about two-thirds of electricity is generated by fossil fuels. So, if you’re as concerned about climate change as I am and want to reduce your own carbon footprint, one way to take action yourself is to minimise how much data you store. Yes, of course it’s true that images are a tiny fraction of the whole of society’s data storage needs, but it all adds up. As enormous as ‘7.5PB’ is, it’s still just a drop in the pond. Global demand for data storage is measured in zettabytes (ZB) – millions of PB – and growing fast.

We all need to find ways to be kinder to Spaceship Earth, and this one is very easy to do.

---

Cutting to the chase

My own rule of thumb for the width of images on web pages has long been 350 pixels for centre-aligned images, and 250 pixels for left- or right-aligned (to give the adjacent text more room). On a dumbphone this distinction is irrelevant, as images are rarely, if ever, shown with adjacent text.

It’s very quick and easy to make your images smaller. I use Paint Shop Pro (version 6, which, while it’s ‘obsolete’, still does exactly what I need it to do: if it ain’t broke, why fix it?). But you don’t have to use that: there are other software applications available (but don’t even bother looking at MS-Paint, that’s utterly useless!). There are also many websites that offer free online image manipulation.

Another thing to bear in mind, when visiting sites that offer images, is that these may offer downloads in a variety of different sizes – though you may have to hunt for that option. On both Unsplash and Pexels, for example, the default download link is to the highest resolution image. However, if you click on the image presented on the site first, that opens up a new window with a ‘Download free’ button offering more options. ‘Small’ is 640 pixels wide: more than big enough for most purposes, but still a substantial saving. One of the options Pexels offers is a ‘custom’ size, which can remove the need to do further image manipulation.

For instance, an image I just happened to look at on Unsplash (‘tools in order’ by Mikael Kristenson) offered me a whopping 5.7MB file by default (8688×5792), but the ‘Small’ version (640×426) is only 57KB – just 1% the size, yet still perfectly adequate.

Sometimes, of course, you’ll want a high resolution, such as when you want to crop the image to show only a part of it. Or you may want versions at different sizes (such as when you want to do the ‘click to embiggen trick‘ that I’ve used on the ARSAT Data Center image above).

I think that just about covers it. If you have any questions, please ask. I’d be happy to help! :)

Addendum 20Nov2021

While responding to Goldie’s comment on this post, I found some WordPress.com support pages containing a lot of helpful information on this topic, including a page devoted to image optimization and an overview that you may find useful.