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.

About peNdantry

Phlyarologist (part-time) and pendant. Campaigner for action against anthropogenic global warming (AGW) and injustice in all its forms. Humanist, atheist, notoftenpist. Wannabe poet, writer and astronaut.
This entry was posted in Computers and Internet, Energy, Environment, Strategy, Tech tips and tagged , , , , , , , , , . Bookmark the permalink.

53 Responses to The green way to blog longevity via image optimisation

  1. Tom says:

    Good pointers there, peNdantry. I’ve still got ages to go before my quota is used up, but I’ll have even longer when I start optimising my images. I’ll give it a go… every little helps if we all do our bit!

    Liked by 1 person

  2. CARAMEL says:

    I tried to use Tiny png and it did not seem to work. I am such a technophobe.
    Any tips are greatly appreciated. I realized it is photos from my camera that seem to take up the most space. I just do not know how to reduce them.

    Liked by 1 person

  3. bryntin says:

    Also useful is if you use images from the built-in Pexels library option in the WordPress editor if you’re drafting in it, the copy of that image then saved into the media gallery is only of the dimensions you used in the post rather than some massive resolution you don’t need. That keeps everything nice and small, if you can find a suitable image.
    Also, a lot of my images can seem too big for their use here sometimes, but they’re not stored in the media gallery, they’re embeds in the page from the other places they’re actually stored in anyway, like Flickr or Google Images.
    Of course, there is a ‘intended use’ balance to strike. On my specialist photo site, I’ll use bigger image sizes deliberately, as I know viewers might like to zoom in to the pictures to see much more detail (the photo nerds so love to do that…)

    Liked by 1 person

    • peNdantry says:

      Interesting, I don’t know anything about the ‘Pexels library option in the WordPress editor’, I’ll have to investigate that.

      As for the idea of saving space by ‘deep-linking’ to images on other sites; you’re not wrong, in an ideal world this would be perfect, as it would avoid the need to duplicate data. Unfortunately, our world is somewhat less than ideal. The big problem with such ‘deep-links’ is what happens when the other site is reconfigured (as happens far more often than is necessary, in my opinion); domain names change for no good reason, files are moved around, and as a result your deep-linking eventually fails and your site is left rendering a useless ‘broken image’ icon.

      <rant>A good example of this is photobucket.com. I’ve had an account there for many years. I used to store most of my images there, and link to them from my blog here on WordPress. A couple of years or so ago, they did what so many do: they changed their terms and conditions. Although the images hosted there but presented here were still available, they were rendered here with unsightly and irrelevant ‘PHOTOBUCKET’ watermarks. Whenever I log into my photobucket account now, I’m presented with a rude message nagging me that I’m “hosting images elsewhere, and that contradicts our T&Cs, stop hosting now or upgrade your account (read: GIVE US YOUR MUNNY).” As I’ve been finding these ‘now-illegal’ images here on ‘Wibble’, I’ve been transferring copies here from there. The worst part of all of this is: their system seems incapable of advising me which images I’m using that contravene their T&Cs (and I wouldn’t be surprised to find that that’s intentional). I’ve asked them several times to ‘fess up, but I never get a good answer. Totally unethical behaviour, in my opinion. I don’t much like bullies, and I hate being held to ransom. The only thing that photobucket can ever look forward to getting from me is: bad PR.</rant>

      To maintain the integrity of your own site, the best option, in my view, is to store a copy of each image (optimised appropriately, and, ideally, with the copyright holder’s permission) on your own site to avoid problems like this.

      Liked by 1 person

  4. Betty says:

    You’ve sold me on optimizing my photos for WordPress. I’m not exactly sure of the easiest way since I use a chromebook. Too bad this isn’t an option on WordPress when creating a post and loading images.

    Liked by 1 person

    • peNdantry says:

      Hi, Betty, and welcome to Wibble! :)

      I’m not familiar with ‘chromebook’, but I believe that it has to be compatible with standard image file formats, so I can’t see that there would be any problem with employing the basic ideas I’ve outlined here. If you’re having difficulty, please do come back with more information; I’d be happy to investigate further.

      You’re not wrong about it being a shame that the WordPress system doesn’t (currently) provide such facilities natively. While I admire their mission ‘to improve the web’, they are, like so many others, interested primarily in making money, and as their pricing structure encourages folks to ‘upgrade’ to acquire more storage space, I can’t see them investing effort into developing a system that could have a negative impact on their bottom line :(

      Liked by 1 person

    • Ju-Lyn says:

      I second your thoughts Betty! I wish there was a simpler way to do this through WP and not have to use other software.

      Liked by 2 people

      • peNdantry says:

        Don’t be disheartened by the apparent complexity, Ju-Lyn! It’s just like riding a bike, very easy once you’ve fallen off a couple of times. Please feel free to ask me for help if you need it!

        Like

  5. Great reasons to resize images, how pick small size images.

    I often reuse images in my media library. Sometimes, in the past that wp.com then duplicate that pic in my media space ( hope thus makes sense?)

    Liked by 1 person

  6. Herb says:

    I use Irfanview with a plugin called RIOT which shrinks the weight of the image by up to 70%. I resize it using the same program to what I need and then save it using the plugin.
    https://www.irfanview.com/ is the site. I recommend it for a wide variety of manipulations and uses, especially with the plugins it has available.

    Liked by 1 person

    • peNdantry says:

      Thanks for the recommendation, Herb! Looks good, though I’ll continue to use Paint Shop Pro myself, while I can (I’ve bookmarked the site against the day when a Windoze ‘upgrade’ finally causes PSP to stop working, as I suspect will happen).

      Liked by 1 person

  7. Ju-Lyn says:

    Goodness! Yet another mind-blowing post, Colin. It makes so much sense now you’ve presented it so clearly. It is definitely something I will look into as “running out of space” is not the best impetus to start a new blog.

    Thank you for presenting me as a case study – beautifully done. I am very tickled.

    Liked by 1 person

  8. Pingback: happy birthday, Darlink! – Touring My Backyard

  9. I have been resizing my pictures for years — really, since the first year I was blogging. I reduce the number of pixels from 350 to 300, then after whatever processing I do, reduce the photograph to square at 900 pixels and rectangular, in pixels 934 X whatever the other dimension is because sometimes pictures are non-standard. When I insert them into a post, WP usually reduces them to about 760 pixels (longest side) and I may reduce them further to match that.

    After 10 years — and mountains of photographs! — I’ve used 4.3 GB out of 13.0 GB (for which I pay $99/year and also get customization and no ads). I wish (among many wishes I’ve made about WordPress!) that they would let us delete pictures — and even early years of blogging. Have you noticed there are NO group delete options? And if you try to do it one picture at a time, WordPress freezes or bounces you out after about half a dozen. It’s really annoying, one of many, MANY annoyances.

    If you spend more than minimal time pondering the aggravations you get from working with WordPress, they will drive you nuts, so I try not to think about it except when it impacts me. If I could delete whole years — like the first two years of the blog — it would be great. But they won’t let you do that. They say it is “impossible.” This means that they aren’t willing to bother making the option available and for one reason or another think they will make more money by forcing us to pay more to “house” our blogs. In my case, if after 10 years that’s all I’ve used, I don’t think I’ll live long enough to fill up my space. Also, they reminded me that ONLY pictures/photos count towards your “storage.” Text is “free.” I’m pretty sure no one had told me that before, but who knows? I forget stuff!

    Liked by 2 people

    • peNdantry says:

      Thanks for your comment, Marilyn, and welcome to Wibble!

      Good to hear that you already optimise your images. I’ve not encountered the problem you highlight of being unable to delete multiple images; but then, I have a different attitude to old content from you. One of the inherent problems of the Internet is link rot; I never delete a post once it’s been published, because someone else may have linked to it, and deleting it would break that link. (For more of my thoughts on that, if you’re interested, please check out the ?Random Raiders! blog.)

      As for the fact that WordPress doesn’t include text in its storage calculations, that’s not really a surprise; it would be really penny-pinching for them to do that. It’s said that “a picture paints a thousand words”, but in digital terms, a thousand words is a minuscule fraction of the size of the (unoptimised) picture.

      Liked by 1 person

  10. Prior... says:

    Very helpful post
    Thanks

    Liked by 1 person

  11. Beaton says:

    great tips… I stumbled upon optimising images quite by accident and was doing not only for the space and that it makes your pages load faster but because I have very low bandwidth so uploading large images would take me ages and ages…
    Luckily I use photoshop for some graphics stuff and I just use that one to optimse without losing any detail
    ~B

    Liked by 1 person

  12. I admit that is a lazy question – Does WP tell you what size they display that in? (That info would preferably be located somewhere in the upload window.) I’m wondering if I need to write down the size you mentioned or if there’s an easier way to keep track of it when needed.

    Liked by 1 person

    • peNdantry says:

      I’m not clear on what the ‘that’ is that you’re referring to in your first sentence, Goldie, nor on what you mean by ‘size’.

      If I go into the WordPress media library and ‘view’ an image (like this one for instance) then I can see its `file size’ in pixel dimensions (in this case 250×333); if I ‘edit’ that image then I can see its ‘file size’ is 13KB.

      But the idea is to optimise the image before you upload it to your media library. I don’t know what operating system you use; in Windows, if I locate an image using ‘File Explorer’ and hover the mouse on the file, the ‘tooltip’ will tell me both its dimensions and its file size (right-click and select ‘properties’ provides more information). Does that help?

      Liked by 1 person

      • How is it that not everyone knows exactly what I’m thinking? Wait, I don’t think I’d like that… Anyway. What I meant is that you said: “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.” Is the 250×333 posted somewhere or is that something you’ve found out from your own research. I understand that the idea is to resize before uploading. I wonder if there is a reminder of what the perfectly optimized file size for WP is or if I need to jot your data down/check what the parameters are for my theme.

        Liked by 1 person

        • peNdantry says:

          Ah, I see what you’re getting at, now. The numbers here are specific to that ‘Church of St Francis of Assisi’ image; 250×333 is 8% of this image’s original image. But as ‘8%’ isn’t one of the preset defaults offered by the image block, I inspected the page’s code and it looks like this size was automagically determined by the theme of Ju-Lyn’s site. Now, while clever, this technique isn’t smart, as the full-size image has to be downloaded before the image can be rendered in the viewer’s browser, and this takes time. You’re right: it’s better all round to optimise the image before uploading it to WordPress (which can also save you a bit of time at the outset, since uploading large files can take a while).

          There is no ‘perfectly optimised file size’, though. Check out the ‘rules of thumb’ I suggest in the first paragraph of the ‘Cutting to the chase‘ section of this post.

          Thanks for your input, Goldie; it’s especially appreciated as it’s allowed me to improve my post with an addendum.

          And as for ‘not knowing exactly what you’re thinking’, that’s why my comment prompt is “I’d love to hear your thoughts…” ;) I think telepathy would be of immense benefit to us all!

          Liked by 1 person

  13. restlessjo says:

    Thank you very much for taking the trouble to visit my site. Space was only one issue when it came to starting a new blog for me. I needed a good shake up and I haven’t really accomplished that, but blogging occupies less of my time these days. Maybe when winter comes! I am mindful of resizing though, and following the lead of a fellow blogger I tried Tiny. I abandoned it rather rapidly. I have used Lunapic in the past for ‘playing around’ and have noted the url from the comment above, so I will give that a try this weekend. Your website design background gives you a head start over people like me, to whom it’s all mystery and gobbledegook. Thanks a lot for trying to help..

    Like

  14. I’m assuming WP will soon shut you down since you’re trying to take their business away! (If people don’t need more space, they will not upgrade their memberships.)

    Liked by 1 person

    • peNdantry says:

      I think I can see your tongue in your cheek there, but although I sometimes take pokes at WordPress.com I only do so hoping to push them to get better still. I’m right behind their objective to ‘make the web a better place’, and the Automattic Creed. Despite its flaws, I think that WordPress.com is the best solution out there for us bloggers.

      There are many benefits to buying into their various plans; space isn’t the only consideration. I don’t need the space (because I optimise my images) but I’ve had a ‘personal plan’ for years now, mainly to remove <spit> adverts from ‘Wibble’. And while I’m grumpy that they changed their pricing structure a while ago, moving their ‘Live Chat Support’ from ‘personal’ into ‘premium’, I’ve found that feature incredibly useful over the years and may yet upgrade to ‘premium’ just to keep that.

      Abusing the words of Gene Roddenberry, space is not the final frontier ;)

      Liked by 1 person

  15. My friend, first let me thank you for this wonderful post.

    Your post is Very precise, to the point and most helpful to the newbies and many others like me.

    Your post is of immense help to the newbie photographers who without knowing the importance of storage space, go on bombarding their posts with too many images due to initial excitement and hoping the entire world to appreciate their new found interest.

    My earlier blogosphere days I knew nothing about the image optimisation and my storage space was getting filled up fast since my blog is based on photos.

    I tried to figure it out and realised the failure to optimize the images was the culprit.

    Internet told me to keep width anywhere between 1024 to 1500 Pixels with resolution being 72 pixels/inch

    But still the images were gulping the storage space and your suggestion of keeping the width
    I felt even the above recommended pixels is not going to help.

    I started wondering where I was going wrong. The problem also goes with the resolution of our monitors.

    I have two softwares LR and PE and I started making use of them to optimize the size after realising the impact of failure of non optimisation of images.

    Lightroom has file setting and image resizing, but I was unsure of the proportion the width and height.

    In photoshop elements one can resize the image width as per the requirement at the same time keeping the resolution to 72 pixels/inch also by using the ‘Save for web’ provision, can further reduce the size.

    Now my images have shrunk their weight from 1.5 Mb to less than 50 Kb.
    And your suggestion of 250 to 350 pixels takes the weight less than 10 kb.
    Of course the image looks smaller and that’s OK.

    The bloggers who don’t have Lightroom or Photoshop related software must look for other alternatives and you have altered the readers about the importance of storage space.

    ‘Donkey you’ for all the guidance. URs is a phurpect blok to phalo by rest of the community.😃😃

    Over all WP doing a wonderful job with their various plans suitable to all categories of people.
    👍👍👍

    Liked by 1 person

  16. Thanks for the tips, peNdantry. I haven’t generally loaded large images–I crop mine in Photoshop, normally for artistic reasons, but I’ve reduced pixel sizes because my newsletter provider doesn’t automatically do this, and this way I can use the same image twice. But I’ll pay more attention to this going forward. : )

    Liked by 1 person

I'd love to hear your thoughts...

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s