Image size is a major factor when it comes to the page speed of a website. Here is how you can audit and compress the size of web images to improve speed without losing out on image quality.
The effect of website page speed on SEO and user experience is intertwined. It is a direct ranking factor for Google, but also if poor loading speed causes users to bounce (40% of users will abandon a web page if it takes more than three seconds to load) or reduces dwelling time on a website this will also effect ranking indirectly.
Page speed also has an effect on the conversion rate of users to paying customers. For instance, when Walmart decided to increase and monitor their web page speed they discovered:
- For every 1 second of improvement, they experienced up to a 2% increase in conversions
- For every 100 ms of improvement, they grew incremental revenue by up to 1%
It is pretty obvious, therefore, that page speed is an important factor when it comes generating traffic and customer satisfaction. In this blog we will explore how image size can be a problem, how to find over-sized images and what to do about it.
Why is image size a problem?
One very common problem we see across many industries and sites is page speed problems caused by very large images (large in terms of filesize) which are often directly uploaded from an HD camera without the use of any compression. As images account for around 59% of all the bytes on a page on average. Over-sized images can easily put a major dent in page performance. Fortunately, improving images is usually an easy low-hanging fruit, without the need to bring in developers.
What size should my images be?
Unfortunately, the ‘it depends’ answer comes into play here-a small thumbnail on a sidebar will generally be smaller than a hero banner, for example. However, it’s a rare case where any image should be over 1 Megabyte in size, and for most images under 250 Kilobytes is easily achievable. The key is to reduce the size of the original image by as large a percentage as possible, without compromising on image quality (or doing so as little as possible).
How do I find oversized images?
Most SEO crawlers should be able to provide this information, if you don’t have access to one then there are some other options:
For WordPress users-check the media library
Scrolling through Media library content in WordPress is generally pretty fast (with its tabbed browsing of images) and they helpfully list the image size in the attachment details, which provides an easy way of rapidly scanning for over-sized images (top right in the example below)
Look in Google Analytics
The ‘site speed’ section of Google Analytics allows you to break down individual pages by load time, which can help to pinpoint pages that are running slower than they should (generally 4 seconds or less is fairly good, over 6-7 definitely isn’t!) just make sure there isn’t anything else that’s causing the pages to be slow.
How do I make website images smaller?
Fortunately, there’s an easy way to do this, the below are two of our favourite (free) tools;
For individual images
Head over to JPEG-Optimizer upload the file and choose the compression level (lower equals more compression) usually, the default setting is fine, and you may wish to turn off ‘resize photo’ if the current dimensions are correct.
For image compression in batches
Tiny PNG (also works with JPEGs) will compress up to 20 images at once (max size 5MB each) which can be great when batches of images need to be done all at once.
If you have a larger number of images to compress, there are various cloud-based online services that can help with this, although the majority of good-quality ones are paid. Sites such as WordPress have plugins available that will compress images on upload, which in our experience only saves a few KB, but every little helps!
My images are still too large!
If this is the case, it’s possible that the images are too large for their containers (slots) on the site, in which case adjusting their width and height dimensions to fit the part of their site where they are being placed should do the trick. To see this, right click on the area where the image should be going, and select ‘inspect’ then from here it should be possible to see what the width/height dimensions should be (on the image on the left hand side).
