Image optimisation can save a ton of free space to your website and has a huge impact on speeding up its load time.
When writing a product description or adding images to blogs, everyone downloads images from their mobiles or stock images and upload them to their website without optimising them. These large files make the website slower.
You can fix this by using image optimisation best practices as part of your regular website usage.
In this article, we will show you how to optimise images for faster load time and increase web performance without losing image quality.
We will talk about WordPress Plugins and manual processes that can make life easy.
Firstly, what is Image Optimisation?
It is a process of saving your image to the lowest size possible without losing its quality. It may sound complex, it’s quite easy these days.
If you’re using WordPress there are ton of options in image optimisation plugins that can automatically compress your image sizes by over 80% without visible loss the quality of images.
How does image optimisation work?
In layman terms, it works by compression technology like “lossy” and “losseless” which helps reduce the overall size without losing quality.
Benefits of Image Optimisation
While there are many benefits of optimising images, below are the few that you should know:
- Faster website speed
- Improves your SEO rankings
- Speedy website, higher conversion rates (leads and sales)
- Low storage and bandwidth usage
- Faster website backups
After videos, images take the next heavier part in a web page. According to HTTP archive, images make up on average 21% of website weight and in eCommerce stores even more.
You might not see any difference but, one second delay in website load time can cost you 7% of sales, 11% fewer pageviews and 16% decrease in customer satisfaction.
Google also give special treatment to faster website, if your website is slow, you lose your rankings and your competitors and moving forward.
Just by taking one small step before uploading images, you can both improve website Speed and boost SEO rankings.
Save and Optimise Images
When uploading an image to website, the image needs to find the perfect balance between lowest file size and acceptable image quality.
Three things to remember
- Image file format (JPEG vs PNG)
- Compression (Higher compression = smaller size)
- Image dimensions (Height and Width)
Let’s take a look at each of these in more detail
Image File Format
When uploading images to website, the only image format that really matters are JPEG and PNG. Choosing the right one can play an important role in image optimisation.
To keep it simple, you want to use JPEG for photos or images with lots of colors, PNGs for simple images or for transparent images.
PNG images are uncompressed means higher quality and size, on the other hand JPEG is a compressed format which slightly reduces image quality and gives you a smaller file size.
Compression
This plays a huge role in image optimisation.
There are different types of image compressions available. Most image editing tools like Adobe Photoshop, On1 Photo, GIMP, Affinity Photo, and others come with built-in image compression features.
You can even use your own computer to compress images.
MAC users can open image in preview and go to tools>adjust size. Select the width and height and set resolution to 72 and you have a smaller image.
Windows users can open image and click on see more on top right of the screen and choose resize option.
You can also save images normally and then use a web tool like TinyPNG or JPEG Mini for easier image compression.
It may be a bit manual, but it allows you to compress images before uploading them to your website.
There are also several popular WordPress plugins like Optimole, EWWW Image Optimizer, and others that can automatically compress images when you first upload them.
Image Dimensions
When you take download image from free stock images or imported a photo from your phone camera, it has a very high resolution and large file dimensions (height and width).
Typically, these photos have a resolution of 300 DPI and dimensions over 2000 pixels or more. These may be suitable for print or design materials, but it is not suitable for website.
For example, we optimised a photo with 1.8 MB original file size, 300 DPI resolution, and image dimensions of 4900×3200 pixels.
We choose jpeg format for higher compression and changed dimensions to 1200×795 pixels, and it reduced the image file size to 103 KB. That’s 94% less than the original file size.
Best Image Optimisation Tools & Programs
Adobe Photoshop is a premium software that comes with a feature to save images optimised for web. You can simply, export it for web and select the size format and dimensions and select the quality of the image.
You can see the file size at bottom left.
GIMP
GIMP is a free and open-source alternative to popular Adobe Photoshop. It can be used to optimize your images for the web. The downside is that it is not as easy to use as some other solutions on this list.
TinyPNG
TinyPNG is a free web app that uses a smart lossy compression technique to reduce the size of your PNG files. Upload the images and it’ll compress the image and download the compressed image.
JPEGmini uses a lossless compression technology which significantly reduces the size of images without affecting their perceptual quality.
Best Image Optimisation Plugins for WordPress
We believe that the best way to optimise your images is by doing it before uploading them to WordPress.
Here is our list of the best WordPress image compression plugins:
- Optimole– popular plugin by the team behind ThemeIsle.
- EWWW Image Optimizer
- Compress JPEG & PNG images– plugin by TinyPNG team
- Imagify– plugin by the popular WP Rocket
- ShortPixel Image Optimizer
- WP Smush
- resmush.it
Final Thoughts
Now that you know how to optimise your website images, it will sure make a huge difference on your site speed. Remember, faster website load time is great for SEO.
We hope this article helped you learn how to optimise your images in Website.
