Why image sizes on a website are important..

Images on websites can make them load slower. Hurting your rankings on Google and ruining the user experiences.

We have all come across websites that seem to take ages to load, particularly ecommerce websites. It may be frustrating for humans to wait for website pages to load, but what if your website is penalised by Google for being slow?

Google has made it plain that it expects website owners and developers to ensure that their code and design load quickly. I believe it acts against websites that are slow to load by dropping them down the rankings of search results. So if there is even a chance of that happening isn’t it about time you looked at one of the main culprits of slow loading websites? Images… Here is a little test:

Their images… Here is a little test:

Can you guess what the file sizes are of these images:

make websites load quicker

online image compression software

Do they look that different?

Well, one is 77% smaller in file size than the other!

The usual “save for web” setting has been applied through PhotoShop. (This basically saves the image at 72 dpi and into a .jpeg format – more on that below)

A is 34k

B is 7.9k. After the same treatment as A but then run through an online image compression program.


So how can an image that was already fairly small be so important?

Imagine if these images were of a product that you were searching for to buy online. You visit a website that provides you with the facility to “show all” products that match what you are looking for. You could have literally hundreds of seemingly small images that – taken together – equal vast amounts of physical size that the website has to load and your web browser software (Internet Explorer/Chrome/Safari etc) has to display for you.

Taking the examples above into this analogy; image A, shown 150 times on one page, will result in a page load of 5.1 mb, or nearly 5 floppy disks – remember them? (plus all the code that makes the website page in the first place, the header images, the banners, the server speed itself and of course your internet access speed etc).

Image B on the other hand will result in 1.18 mb of imagery.

Yet I think you can see there isn’t that much difference in the quality of the images themselves.

The process I suggest you go through for all images on your website is this:

  1. Get the size right for the space you want it to display in. Don’t just expect your website software to resize it for you. Most do not do a very good job of that. Use a photo editing software package such as Photoshop. (Put the effort in here and the rest is much easier.)
  2. Save your resized image “for web” or a similar setting. This will reduce the pixel per inch that the image is displayed in and make the resolution closer to the norm that the web and web browsers have come to expect.
  3. And the best bit? Use a compression tool to reduce the file size even further. See this shot:

image compression software

I used https://compressor.io/ to reduce all the images on this page. If you look closely at the image above you should see the before and after sizes shown. 34k – 7.9k. Pretty impressive.

TIP: One of the worst culprits in allowing over sized images on websites is WordPress. Folks think choosing a display size will resize the image – it doesn’t, it simply makes the image LOOK smaller. All the original data is still there as is the original file size! Today I visited a website of an American web company (I won’t mention the name) whose images of themselves had not been resized or compressed. I did them a favour; I resized them, optimised them and then compressed them.  One went from 4.1 mb down to 84k! No loss of quality and exactly the same size. I then sent them their images to replace the massive ones – as a favour. Even the “experts” can get it wrong sometimes.

I made a reference to .jpeg earlier. (Joint Photographic Experts Group – who invented it apparently) This and others, like .gif and .bmp for example are file extensions that tell your computer what programs to open them in and indeed; how to display them. .Jpeg removes some of the detailed pixel information of the image and therefore reduces the quality – how much, depends on the setting. It doesn’t mean that the images look rubbish, it means that they fit the media in which we are using them – correctly.

I hope this helps you keep your website fast to load; providing a better experience for your website visitors and keeping the Google god happy as well.

Enjoy your photography and editing!