According to HTTPArchive, the average website size has almost doubled in 5 years, from 1MB in 2014 to 2MB in 2019. Sure, Internet access is faster than ever but, still, how come websites are so big now? The answer partially lies in multimedia assets in general and images in particular.
It’s been a long time since websites are no longer simple text pages. They’re now dynamic, full of images, videos, GIFs… and we want all these assets to look nice and crispy on screens with huge resolutions.
If your website loads very slowly and you never optimized your images, I have some good news: today you will learn what you can do to speed up your WordPress. Let’s see the tools you can use to improve the performance of your website and prevent images from hindering your users’ experience.
Why Image Optimization is Important
Before explaining the different methods available to optimize image assets and accelerate your website, I would like to spend a couple of minutes to convince you of the importance of doing so.
Images Have a Huge Impact in the Overall Size of a Webpage
As I said at the beginning, the weight of the images on a website represents an important percentage of the total.
According to GTMetrix, loading this post uses 850KB of data. But why does such a short post use so much data? Well, images are partly responsible of this issue: the post’s featured image alone weighs more than 200KB, which represents 25% of the total.
Mobile Traffic
According to the data found in statcounter, 52% of web traffic comes from mobile devices and 45% from desktop. That is why today so much emphasis is placed on using responsive designs that work well on small screens.
As surely you yourself have experienced, Internet connection on mobile isn’t always great (specially if you’re commuting or in the underground). According to Statistia, in 2019 the average speed is around 14 Mbps. Therefore, if we want to speed up our websites on mobile, we have to reduce their weight as much as possible, including that of their images.
Storage and Data Transfer Costs
Another reason why you should worry about using images with the appropriate dimensions is money. The criteria by which hosting providers offer their plans include the amount of disk space your website uses and the amount of data you send from their servers to your visitors. The more disk space used and the more data sent, the more you pay.
By reducing the size of your images, you’ll reduce both factors and you’ll save some money each month ?
Image Optimization Actions
Now that you know why you should worry about optimizing your images, let’s see what you can do to speed up your WordPress site.
#1 Upload Properly Scaled Images
The amount of people who upload pictures stripped directly from their brand new DSLR camera is surprising. The problem is, any photo taken with a DSLR camera is probably too big and heavy for a website.
The first thing you have to do is to reduce the images to a reasonable size before uploading them to your website. For example, on our website, the largest images we usually upload are the featured images of our posts. We decided we’d limit those images to only 1200x800px.
#2 Tweak Your Theme to Generate Appropriate thumbnails
When you upload an image to WordPress, WordPress generates several thumbnails. These thumbnails are defined by your theme, as it’s your theme the one who knows when it needs a bigger or a smaller version of an image.
For instance, our featured images are 1200x800px. These dimensions work great when viewing the post itself:
which is clearly too much for something like this:
That’s why, for this particular case, our theme registers a new thumbnail size that’s only 480x320px and is used in the list of posts screen.
If you think your theme is not generating appropriate thumbnails, I recommend you read the WordPress documentation to know how to define the size of a thumbnail with set_post_thumbnail_size or even how to define additional thumbnails with add_image_size.
And, as always, if you need help with this, just let me know in the comments section below and I’ll be happy to help (or even write a post about it ?)
#3 Use Image Sizes Cleverly
WordPress generates multiple thumbnails of the images you have in your media library so that your theme can use the best image in each possible scenario. But here comes the interesting part: you too can use thumbnails when inserting images in your pages and posts.
When inserting an image into post, take a look at the sidebar and choose the size that best suits your needs:
For example, if you are going to put a narrow and small image like this, then a small image (300x200px) might be perfect:
but using that same thumbnail for a bigger image renders awful results:
Better to use a version with more resolution:
#4 Use theAppropriate Image Format
There are different image formats, each with its strengths and weaknesses to compress images. The most used formats are:
- PNG. Great image format for sharing screenshots that don’t have any pictures on them, such as, for example, a screenshot of the WordPress editor.
- JPG. One of the most widespread formats in the world. It works very well with virtually any type of photography, allowing very high compression ratios. However, it’s not perfect: if the photo has very sharp edges (for example, if there is text or drawings), you’ll have to use lower compression rates or risk the image having ugly artifacts.
- GIF. King of the Internet (and social media platforms). It’s a format type that allows animations. To be honest, I think all the “GIFs” we now use are actually (short) videos, which offer better compression ratios and higher quality…
#5 Delete Unused Images
As time goes by, it’s easy to keep a lot of legacy images in your WordPress site that nobody uses anywhere.
#6 Enable Lazy Loading
So, images slow down your websites, right? Why don’t we simply tell websites not to load images unless it’s absolutely necessary? That would speed things up, wouldn’t it? Enter Lazy Loading.
Lazy Loading is a pretty simple idea: an image won’t be loaded until it’s supposed to be visible in the visitor’s browser. For example, if our website has a certain image in the footer, why do we need to bother loading it before the user has reached the end of our website? Wait until they get there and, once they do, load the image (and if they don’t, save an image load!)