Sorry…But Oversized Rarely Creates a Good User Experience

How to make sure you are uploading images that are a suitable size to reduce page loading speed and ensure a favourable user experience
Optimising Image Sizes For Websites

As much as we tell clients that large image sizes are detrimental to page loading speed and the user experience (and potential SEO problems) we still see large images being uploaded. Here I’m going to go through how to make sure you are uploading images that are a suitable size.

For a 5MB image (not unusual for a photo uploaded directly from a camera) on a normal internet connection, say a 7.1 – 15 Mbps connection, this may take 3 seconds alone to download…then you have to factor in everything else on a webpage that needs to load and don’t forget the poor people trying to view your web page on their mobile device!

Just because you have set it to display as a thumbnail does not necessarily mean the file size is any smaller.

For the normal website owner, you may have the option to edit the image after it is uploaded but often it is just easier to do before it is uploaded….so here is what you should do to optimise the file size of the images on your website:

Step 1 Edit the image before uploading

Resize your images in an image editor – on your desktop or there are some free online tools for this. If you use Windows you can use something as simple a Microsoft Paint or Preview on a Mac. Just open it in the editor of your choice and save it to the proper size.

As an example, if you have a webpage with a sidebar where you want to use a full width image in the main column you would be unlikely to want an image larger than 800px by 400px. Resizing an image from your camera would drop the file size to only 164KB…this is a drastic reduction in size if it was originally 5MB!

Before uploading just consider what size it is likely to ever be used at. If the image may be used more than once on your website you might consider keeping the largest required size or reupload the image each time it is required at the necessary size.

Step 2 Use a tool like Smush.it for “lossless compression”

Smush.it uses optimisation techniques specific to image formats to remove unnecessary bytes from image files. It is a “lossless” tool, which means it optimises the images without changing their look or visual quality.

Running the 164KB image through Smush.it further reduces the file size to 139KB. A lot of people would not bother for such a small saving but if you are a WordPress user you can install the plugin, WP Smush.it, to run on autopilot whenever you upload an image.

 

So just to recap, please consider your users and only use image files that are as large as the need to be. I’m a Mac user so admittedly everything is easier than if you use Windows, but for a little extra time your webpages will load a lot quicker, your users will be a lot happier and you will be keeping Google off your back (Some studies have seen no difference but Google has suggested that page load times may impact your search ranking so let’s not go poking them with a stick!).