Table of Contents
Summary
The easiest way to speed your WordPress website is to compress your images using an image compression tool such as TinyPNG or Kraken.io before uploading them to your WordPress website.
To get the best results you should also consider the image’s file format, size and the type of compression you could use. Your goal is to find a balance between the lowest file size and the highest quality.
If you have the technical expertise, you should enable a caching plugin and lazy load certain images.
Choose the correct image file format
The two most popular image formats that everyone uses is:
PNG (Portable Network Graphics)
JPEG (Joint Photographic Experts Group)
PNG (Portable Network Graphics)
PNGs are used for website graphics, company logos, illustrations and charts. PNGs can be compressed using lossless compression, which means no data (image quality or number of pixels) is lost, but its file size will always be larger than JPEGs because of this.
It also supports transparent backgrounds for images.
JPEG (Joint Photographic Experts Group)
JPEGs (also .JPG) are mostly used for digital photos. JPEGs are compressed using lossy compression, which means that data is lost during the process, but its file size will be much smaller than PNGs and of course the image quality will also be lower.
It doesn’t support transparent backgrounds.
PNG vs JPEG – which one should I choose?
You should use PNGs for digital graphics where high quality and transparent backgrounds are important. JPEGs should be used for digital photos that require a lot of compression, no transparency is needed and quality isn’t that important.
Consider using the .WebP (“Weppy”) image file format
.WebP has the same advantages as PNGs including online animation support, but their compression results in +- 26% smaller file sizes than PNGs and +- 30% smaller sizes than JPEGs.
Since WordPress version 5.8 the .WebP image file format is supported by default, but sadly the majority of web browsers don’t support it.
If you think the majority of your current and potential clients are on the latest web browser versions then you can utilise .WebP and make your website load much faster than with JPEGS and PNGs.
Use an image compression tool
TinyPNG
I prefer to use TinyPNG to compress our images – it’s straightforward and just works!
TinyPNG uses lossy compression which means that your images will take a hit in quality as explained above, but the quality loss should only be around 10 -15% and of the time it’s barely noticeable.
TinyPNG also a WordPress plugin that you can use that will automatically reduce the image file size inside of WordPress instead of first compressing it on their website and then uploading it to your media library.
Kraken.io
Kraken.io is another free image optimisation tool that provides more fine grained control over your images than TinyPNG.
You can select between lossy and lossless compression, and they also have an expert setting where you can manually set different quality levels, and even retain image information such as EXIF metadata.
If you want a basic image compression tool that you only need to drag and drop then use TinyPNG, but if you want more control over the compression settings than use Kraken.io.
Resize your images when compression isn’t enough
When I refer to image size I’m talking about its dimensions in the form of width and height, and it’s resolution measured in pixels, or pixels per inch (ppi).
The image file size is measured in MB (Megabytes) or KB (Kilobytes).
WordPress automatically creates three different sizes of your images when you upload them to your media library:
Thumbnail: 150px square.
Medium: Max width and height of 300px.
Large: Max width and height of 1024px.
It also retains the original image size.
The reason for these default different image sizes is so that WordPress can display the correct image size for the relevant device (Smartphone, Tablet, Laptop or Desktop) displaying the website.
Sometimes when you add a new section to your services page on your website and you select the option to display the original image size on WordPress your page still loads slow.
Although your responsive WordPress theme is resizing it correctly because you’ve opted to display the original image size, this also includes the original image file size.
A blog post image as an example
The recommended size is: 1200px (width) by 630px (height) also displayed as 1200 x 630 pixels.
Your original image size is: 3600 x 1890 pixels.
When you choose to use your original image size as the blog post image, your WordPress theme will resize it to 1200 x 630 pixels via CSS.
This means that although your theme is resizing it correctly and it looks correct, its original image file size is still loaded and in-turn your page is still loading slow.
CSS only makes changes to the dimensions of the image and not the image file size.
You should always try and resize your images to the recommend dimensions or as high as you can go. There’s no reason to keep an image on your website that when printed can fill up your living room when it only needs to be displayed on a 15 inch laptop screen.
It’s easier to upload your images as-is to your WordPress website, but over time it starts to pack up and hurt you. Especially, if you blog over an extended period of time and then decide to start fixing them.
Enable lazy loading on certain images
Lazy loading images is another way to increase the speed of your website and it’s often overlooked.
It basically only loads an image once your website visitor starts scrolling close to it. So, all the other elements of your web page is loaded before the lazy loaded enabled image.
Most WordPress themes have a lazy loading option built-in, but if your theme doesn’t you will need to use a lazy loading plugin.
Note: images that are above or below the fold of your web page shouldn’t have lazy loading enabled because it can negatively affect your Largest Contentful Paint (LCP). LCP is one of the performance metrics that you can find in the Google Lighthouse tool.
Enable a caching plugin
A caching plugin stores elements of your website that are displayed frequently and don’t change on a regular basis (like your images) into a cache. So, instead of retrieving images from the database and loading them for each and every single user, the cache reduces database queries and in turn increases your WordPress website’s speed.
There’s numerous free and premium WordPress caching plugins available such as WP Super Cache (free) or WP Rocket (premium).