Turbo-boost your site by optimising images

In a previous life, I used to design business websites. One of the things I made very sure of was that the ‘weight’ (size, in bytes) of each page was as low as possible, because heavier pages take longer to load, and people are impatient. If your page doesn’t load fast, your visitors will click elsewhere :(

Text isn’t a problem; it doesn’t ‘weigh’ very much at all. The big problem is always the pictures. It’s important to make these as light in weight as possible; not so much ‘small’ in width and height but small in terms of the file size. If you use Windows Explorer (assuming you’re on a Windows system) then hovering your mouse over a file will reveal the file’s size in ‘KB’ (which stands for ‘kilobytes’; thousands of bytes). For image files, you want to keep this size low; I use the rule of thumb that 50 KB should be the largest file size for most: and picture files coming out of a camera will be much larger than this.

"Size is everything"

This is a full size image; filesize is 25KB

"Size is everything"

A ‘thumbnail’ image; filesize is still 25KB

A common technique for making an image appear smaller on screen is to resize it in the page; but that’s a mistake, as the image retains its full weight even though it appears smaller (as with the image on the right). Such a page will take just as long to load as it would were the image to be rendered at its full size.

If you’ve followed me so far, you’ll probably be thinking “that’s all well and good, but how do I make my image files smaller?”.

For this, you’ll need image manipulation software of some sort. Photoshop is quite commonly used. I use Paintshop Pro myself. There are also online editor programs that will do the job; some of them are even free. With such software, you can crop (cut the edges off) pictures and resize them to smaller dimensions. Once you’ve done that, you then save them in an appropriate format, such as:

  • PNG (when you want to retain high quality)
  • JPEG (good for photographic images)
  • GIF (if you want to use animations)

An additional benefit of going the extra mile to optimise your images is that you’ll need far less storage space, something that is usually limited by your web hosting provider.

I’ve skimmed over the main points here; I left a lot out so as to keep this article short. If you have any questions, please do use the comments to ask!

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, Strategy, Tech tips and tagged , , , , , , , . Bookmark the permalink.

24 Responses to Turbo-boost your site by optimising images

  1. Great advice for someone like me, who likes to include the pictures that I take. Cut and paste and collage prints are my friends so I hope these work. 🤞

    Liked by 2 people

  2. lindasschaub says:

    This was interesting – I started off using one teensy picture in my blog and now have multiple pics for each post. I am saving this link and reviewing my photos. It is hard to tell because I enlarged the font size on my blog a few months ago. I know when I started with my theme the font was darker or larger and now it seemed pale, so I enlarged it – everything seems too large now. I am definitely going to look at my size of the photos. Thank you for posting this.

    Liked by 2 people

  3. Colin, are you familiar with the Ugly Hedgehog forum? While its primary focus is on all things photography it frequently covers the topic you refer to in this post. Home page for the forum is http://www.uglyhedgehog.com/

    Liked by 2 people

  4. Green Gravity Hackers says:

    I dont optimize images on my blog as their original size is around 50 to 130 kb which is small and loads faster with todays 4G internet Technology. Still Great post

    Liked by 1 person

  5. Talia Morris says:

    I never had any problems with web images – until I started using pictures I took myself with my Samsung Galaxy S7. Nothing wrong with the pictures per se. The 12 megapixel images were brilliantly sharp, and clear, and – just couldn’t be manipulated, resized – nada. Finally, I took one into Photoshop, and there was my problem. My image size was over 3000 x 4000 pixels for a total file size of almost 35 megabytes per piccie! Once I downsized them to 900 x 1200 pixels (still pretty big, but I’m displaying them nearly full-page for a photo gallery) they started behaving properly.

    Liked by 1 person

  6. Good advice, I have tons of photos on both my blogs and only recently started to alter size image when uploading.. And my space is already at over 60 % full.. So need to be mindful of future uploads.. Thank you for sharing P.. :-D

    Liked by 2 people

    • pendantry says:

      Ouch… 60% full? That’s got to hurt. Not to brag, but mine is 0% full (mainly because I have uploaded very few photos, of course!) Optimising your images will help a lot in future — but you already know that :)

      Liked by 2 people

      • Yes I went on a rampage a while back. lowering many uploads,, but still have much work in that dept to do.. But not to worry.. All things work themselves out.. And I can always delete to clear out and that which is no longer viewed.. As I have many of my garden photos here which I know were high in resolution.. xx

        Liked by 2 people

  7. Would love to see some examples of the websites you used to design & cost. I am planning to set up a website in due course to link to my blog. I’m not sure at moment if it will be wordpress or weebly.

    Liked by 2 people

    • pendantry says:

      Oh, I’m long out of the web design business… too long, I no longer have a handle on what’s what. I’ve never heard of Weebly, but I’ve been very impressed by WordPress over the last decade, I don’t think you could go far wrong sticking with their system :)

      Liked by 2 people

      • Ok thx for letting me know. Weebly are based out in San Fransisco & have been around a long time. They are a good webhosting company & all people to add admins to their accounts to build their sites. They used to offer a design feature for a very reasonable price but not sure they still do will have to look into it all when I get the time. I’ll look at the pros & cons of both & decide then.

        Liked by 2 people

  8. Thank you so much for the info! I’ll certainly give this a try. I do reduce the size of the picture once I download it from the camera but I think I could probably take it down even further.

    Liked by 1 person

  9. Pingback: How to do the ‘click to embiggen’ trick | Wibble

  10. Pingback: Smash Trip: a blog critique | Wibble

  11. Pingback: Let’s Get Inspired by pendantry of the blog called Wibble – Part 1 of 2 – ThoughtsnLifeBlog

  12. Pingback: Let’s Get Inspired by pendantry of the blog called Wibble – Part 2 of 2 – ThoughtsnLifeBlog

  13. Pingback: The green way to blog longevity via image optimisation | Wibble

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