7 Steps to Improve WordPress Image Compression
Images are a crucial part of any website. The value a great, powerful image can make on your users can be unrivalled. However, nothing causes a website to be slow as easy as a bloated image!
90% of people would abandon a website if it took five seconds or more to load, 40% would leave if it took more than three seconds. When it comes to web design and websites, speed is starting to matter more than the quality of the content. What’s the point of a great page or blog if people don’t wait for it to load?
When I have worked on speeding up websites for clients the most common cause of a slow website is big images. Both are big in terms of the dimensions and also in terms of the file size.
Compressing images isn’t completely straightforward, but with my seven steps, you can learn how and why you need to squeeze your images!
1. Resize the image dimensions
Whether your images are photos from your phone or camera or stock images, they will be quite large images. Both the dimensions and the file size will be big.
An average stock image downloaded from Unsplash can be around 2MB in file size and be somewhere around 4000 pixels by 2500 pixels. Camera or phone-shot photos can be of similar sizes. As the average web page should be under 1MB in total, that one image is too bloated. Plus, you probably don’t need images wider than 1920 pixels at the most.
The very first step you can take is to resize the image to a more appropriate set of dimensions. With paid tools like Photoshop or free platforms, such as Pixlr, you can bring down the dimensions.
Resizing the image can see some loss in image quality, especially if you are reducing a 4000px image down to around 1000px or less. However, as long as the quality isn’t too blocky, it should be fine.
Knowing the correct dimensions can be a very tricky task. You can find guides online to advise you what is the best size for certain types of website images. Another tip is to install the CSS Peeper browser extension. With this tool you can hover over an image on the page you’re building and see what the image dimensions are on the live page. That way you can resize the image to the ideal dimensions.
As soon as you’ve finished resizing those images you’ll want to export them. But in which format?
2. PNG or JPEG?
When you are dealing with stock images or photos there are essentially two choices for the file type. PNG or JPEG are your choices, but which is best?
PNG images are useful for images with lots of colours. They also allow for transparent areas, so can be great for logos for illustrations or graphics. However, SVG is now often the best format for logos or any images that don’t include photos. Due to the quality of PNG files and the colours, PNG is not good for photos, as the file size can still be too large.
JPEGs don’t support transparency, but are smaller file sizes and are the best option when exporting images for a website.
The overall best format for images is WebP, but that is a format you cannot easily export images in. As we will see in step 4, plugins like Shortpixel can help convert our JPEGs into the better WebP format.
3. Remove metadata with TinyPNG
When you export your stock image or photo as a JPEG it can still be quite a large file size. Even with the resizing, it does still carry some bloat.
Both JPEGs and PNGs can carry loads of data about colours, textures patterns and even more information. Both photos and stock images can contain EXIF data that stores information about when the photo was taken, where and even the camera’s exposure. All bits of data that you don’t need to be included on an image on your website!
With TinyPNG or TinyJPG you can strip out the EXIF data and simplify the colours. You don’t need to worry about whether you use TinyPNG or TinyJPG, as they will deal with both JPEGs and PNGs.
TinyPNG will use lossy compression to reduce your image file size. You can expect around a 70% reduction of the image file size in seconds with an unnoticeable difference in image quality.
From when you started with a super-large image, with both resizing and compressing you should now have a make leaner image. One that is ready to be uploaded.
4. Compress and resize with Shortpixel
Before you start uploading images to your WordPress website it is a good idea to have an image optimisation plugin in place.
You might think that after the image resizing and the compression there’s no need for any further compression or optimisation. However, tools like Shortpixel can provide several invaluable additional services.
The Shortpixel Image Optimizer plugin will firstly run further compressions to reduce the image file size. Next, it will convert your PNGs or JPEGs into the much faster WebP format. Using WebP can see around a 30% further reduction in the image file size.
After compression and conversion to WebP, Shortpixel can also convert your PNGs to JPEG, if it would help reduce file size. It can also convert your images to retina images for compatible devices.
The second Shortpixel plugin to install is their Adaptive Image plugin. The ‘AI’ plugin will do a few vital actions for you.
Firstly, the plugin will serve your images at the perfect dimensions. Whether a user comes to you on an ultra-wide PC monitor or a small smartphone, AI will serve the image at the best dimensions for that screen.
Secondly, it will help lazy load images and serve them in the WebP format we have used the first Shortpixel plugin to convert our images into.
Finally, the AI plugin will store a cached version of your images on its own content delivery network (CDN). Their CDN will serve your image even quicker to the user wherever they are in the world.
Most fundamental of all is that the Shortpixel plugins just quietly do all of this magic with minimal input from you. They are the must-have plugins for any WordPress website!
5. Define your image dimensions
One of the more recent changes that affect images on websites is Culmative Layout Shift (CLS). Since Google’s Core Web Vitals became the set of rules to abide by, a website’s CLS has been very important.
Have you ever loaded a website only for the content to seem to jump around the page will it’s loading? CLS defines how long content is moving around while the website loads. You need to get that time down as close to zero as possible.
The best way to get a zero score for CLS is to define the images’ dimensions. With the Specify Missing Image Dimensions plugin or the speed optimisation plugin WP Rocket, you can set the image dimension easily.
With WP Rocket it is a case of ticking one box and it can have a big impact on your loading time scores.
6. Lazy load those images
When you go out for a three-course meal you don’t want your pudding brought to you whilst you’re still eating your starter. With a website, you don’t want the website to load slowly because it’s trying to load images you don’t even need to see.
With lazy loading, you can set it so that images are not loaded at all until you scroll down a page and are ready to see them.
Much like with CLS, you don’t need to do much more than tick a box to set this step in place. With either Shortpixel or WP Rocket you can easily turn on lazy loading.
With the Shortpixel Adaptive Image plugin, you can also turn off lazy loading for some images. Recently I have seen a few client websites where the logo takes a while to lazy load. Whilst logged in to the website I can use the AI plugin to click on an image and turn off lazy loading.
7. Consider hosting images with a CDN
If you have followed all of the steps you will already be using Shortpixel to host your images on their own CDN. However, you can use other CDN providers to host your images and load them even quicker.
BunnyCDN is a very inexpensive CDN where you can upload all sorts of media files and then serve them to your website visitors from BunnyCDN. It can seem like a tricky platform to set up, but there are many good videos online to follow to get started with BunnyCDN.
Alternatively, Cloudflare has recently announced the launch of Cloudflare Images. Much like with BunnyCDN, you can upload your images to Cloudflare and, for a small fee, serve your images quickly from their servers. As this is a new service I cannot go into much detail, but I hope to cover it in the future.
With BunnyCDN and Cloudflare Images you can still use images hosted outside of your WordPress installation on your website. With WordPress & Elementor you can upload an external image via the external URL for an image. Simply find and paste in the CDN URL for that image.
In summary
Images can make and break a website. The value their visual content can bring is astonishing. The impact, though, that a bloated image can make on your website’s loading time is equally astonishing!
By resizing and compressing images you can take big steps to rectify the problem. With Shortpixel you can add some additional services to further help serve your images quickly and correctly. Finally, consider using a CDN for some extra speed improvements.
If you need any more information or are unsure about any of the steps mentioned, please do get in touch with us. We’re more than happy to help you get your perfect website!
