The visual appearance of a website is one of the most important factors in building a successful website. When users visit a website with high-quality graphics, imagery and web design, they will consider it a professional website, even without reading much of its content. But, in order to make that impression on the users, you need to optimise images.
Too many heavy images can slow down your page speed and cause an increase in the bounce rate, which is a pretty bad indication for search engines. Luckily, there are plenty of ways to optimise images to make your website function correctly and attract more of your target audience.
In this article, we’re going to talk about what image formats you can use on your website and how to optimise images for your WordPress website. If your website is not based on WordPress, you can still find a lot of useful information about image optimisation, as we’re also going to talk about image optimisation in general.
Let’s get started.
Why Optimising Your Images Is Important
First, let’s understand why it is so important to optimise images. There are a couple of critical reasons.
People Remember Visual Information Better
When people read a dry piece of information without any visuals, they forget almost 90% of it. Whereas, if there is a compelling image attached to the same piece, they will remember about 65% of what they have read.
But, if these visuals are not of high quality or take too long to load, users won’t see them and may even quickly abandon your website. Besides adding lots of different imagery, you should also consider their quality and design and optimise them before publishing.
It Affects SEO
Images, especially heavy-sized ones, can slow down the page speed, which will most probably drive your visitors away. This means your website will have high bounce rates, which will tell search engines that your website is not that good, and it will rank your website in lower positions.
Of course, SEO is not just about speed and bounce rate, but these two can have a significant negative impact on your rankings.
It Can Help to Improve the UX and Increase Conversions
Regardless of the purpose you created your website, whether for selling your products or simply informing your customers about your brand, you need to provide a great user experience. And by optimising your images and making your website load faster, you will improve the user experience and provide them with more reasons to stay longer on your website.
And finally, an improved user experience will help you drive more conversions and reach your business goals.
What is Image Optimization About?
In short, image optimisation is about reducing the image file size without sacrificing the quality of the image.
To optimize your images, you can need to decrease the number of bytes and the number of pixels. It’s all about getting the best possible quality out of the least amount of bytes and pixels. This helps to decrease the size of your media files, which in its turn will improve the speed of your website.
Average bytes per page by content type
Image File Formats
Now, let’s explore different image file formats. Getting familiar with the most common image formats will help you choose the right format for your website and optimise them better. Besides, knowing the main difference between them and understanding which is better to use in specific cases can be handy in creating more practical media files for your website.
Lossy vs lossless
Image files can be either lossy or lossless. This mostly depends on how the chosen format deals with the data of your image.
Lossless formats won’t let anything from your original file get lost since this format typically includes all the data in your initial media file. That’s precisely why it’s called lossless. One of the main pros of using this format is that you can compress it in tandem with maintaining the original state of your file. So, optimisation won’t really affect the quality. PNGs, for instance, are the most commonly used lossless formats.
On the other hand, lossy formats may decrease the colour palette of your image and remove the “unnecessary” data detected in your media file. Although these techniques reduce the file size, they may also affect the visual quality of your image. JPEGs are one of the most common lossy formats.
What are JPEGs?
As discussed above, JPEGs are lossy format files. So, when you convert a large image into a JPEG, some of the information gets lost. Although converting your media files into this format reduces their size, it affects the quality of your images. However, if you use small-size images, the impact will be very unnoticeable.
We would recommend using JPEG images if:
- You are working with online media files: JPEGs are pretty flexible and can be easily compressed, allowing you to quickly download the media files you found online.
- You want to edit and print an image: If your files have high resolution and low compression, then you can use this format to edit and then print them.
- You are sending an email: this format allows you to transform your media files into a very small-sized image which is great for emailing. This can be useful for email marketing as well.
- You are working with photographs: since the size of your media file can get very large with lossless formats, JPEG, as a lossy format, can be handy when you are dealing with photos.
What are PNGs?
PNG, on the other hand, is a lossless file format. So, all the data in your media files are safe and guarded. One of the critical features of PNGs is their transparent background and the ability to display more colours.
You should consider using PNGs when:
- You want to add a little bit of spice to your website through high-quality transparent media files. One of the most valuable features of this format is its “alpha channel,” which allows you to choose different transparency degrees. Moreover, with its colour depths, the PNG format creates more vibrant images.
- You are looking forward to displaying illustrations with a little colour palette. Obviously, any format would work here; however, PNGs deal better with limited colours.
- You nееd smаll filеs: the PNG format allows you to reduce the file to very tiny sizes, making a perfect image file for your website. This is especially relevant for those images which are simple in their shapes, colours, or texts.
There are also a lot of other image file formats, but these two are the most common to use on websites.
How to Optimise Images for WordPress
Now that you are familiar with the most common formats and know how critical image optimisation is for your website, it’s time to discuss several tools and platforms that will help you optimise your images. And, if your site is a WordPress website, which comprises more than 40% of all websites on the Internet, then this is essential information for you. In this section, we will provide you with different ideas on how to optimise images for WordPress and more.
How to Optimise Images With Plugins
Firstly it is worth noting that you can optimise your images for WordPress with or without plugins. If you are not skilled in working with various image editing programs and software, then don’t worry, as there are plenty of other options to optimise images. Particularly for WordPress, there are tons of good plugins that will help you. These plugins will automatically optimise your images and display the final compressed versions on your website.
Let’s take a look at the list below:
- reSmush.it
This is one of the best image compression plugins for WordPress. This plugin helps you optimise your images with only two clicks. Although it doesn’t allow you to set different compression levels, it is still a great plugin to optimise images for WordPress websites. It’s worth noting that if your media files are not larger than 5MB, ReSmush allows you to optimise them for free. - EWWW Image Optimizer
This is yet another excellent image compression plugin solution for WordPress. With EWWW Image Optimizer, you can optimise and compress your new image uploads. This plugin allows you to compress your previously uploaded media files as well. - Compress JPEG & PNG
This plugin allows you to optimise your PNG and JPEG images on upload automatically. It has both free and paid options. If spending money on image optimisation and compression is not in your plans, then keep in mind that the free account allows users to optimise only 100 images per month. Furthermore, with this plugin, you can also specify which image sizes you are willing to optimise. - ShortPixel Image Optimizer
ShortPixel Image Optimizer is another handy WordPress image optimisation plugin. This plugin offers multisite support with a single API key, so it’s pretty user-friendly. As in the case of Compress JPEG & PNG, with a basic ShortPixel Image Optimizer account, you can only optimise 100 images per month.
How to optimise Images Without Plugins
As we mentioned in the previous paragraph, there are various helpful optimisation plugins you can install on your WordPress site. However, third-party plugins to optimise images for WordPress may have several side effects. Below you can find some of the issues installed plugins can cause:
- Plugins may be heavy and slow your site down. So, there won’t be a reason for using them since they won’t help to increase your website’s speed.
- Plugins may not be compatible with the theme of your WordPress website.
- Installed plugins may also change the way your website looks.
If you are unsure whether your plugins are compatible with each other or if you have too many plugins and don’t want to add a new one, below you can find alternative options for image optimisation.
Online Tools To Optimise Images Without WordPress Plugins
As mentioned above, there are many online tools designed to optimise images without WordPress plugins. Here you can find some of the best ones.
- TinyPNG
TinyPNG is one of the best online platforms to optimise images for WordPress without plugins. You can use this tool to compress images with PNG and JPEG formats. One of the best features of this platform is that it reduces your files’ size by up to 70% without affecting the quality of your images. This tool can be used for GIF optimisation as well. - Kraken
This platform offers one of the fastest image optimisation tools. It runs a unique algorithm that allows you to optimise your media files as much as possible without sacrificing quality. Kraken will definitely improve the speed of your website, and your visitors will have a positive user experience during their journey on your website. - JPEG.io
JPEG.io is another platform you can use to optimise WordPress images without a plugin. This tool supports various formats, including JPEG, PNG, and GIF. You can either drag and drop your images or upload them from different file hosting services such as DropBox or Google Drive. JPEG.io will compress your images without changing their size. - Compress JPEG
Compress JPEG is also an optimisation tool that you can add to your list. It allows you to upload and optimise up to 20 images at once. Additionally, besides using this tool for image compression, you can also use it to change the formats of your media files.
Final Thoughts
In short, image optimisation is something you should consider if you want to have a fast-loading website. Remember that more than half of your audience will simply abandon your website if it doesn’t load within 3 seconds. The paradox is that they will also leave it if your content is not visually pleasing and attractive. The only solution here to reach the golden middle is image optimisation.
Explore the tools we mentioned above carefully and choose the one that best applies to your website.
General FAQ
Will image optimisation significantly reduce the quality of images?
Not necessarily. It’s true that optimising images and reducing the file size may decrease the quality. Still, generally, that decrease is not noticeable, so you can use these images on your website without worrying about the quality.
What's the difference between JPEG and PNG files?
In a nutshell, JPEG file sizes are smaller than PNGs allowing for faster loading times, however the quality may be lower and there is no transparency. JPEGs are suitable for large photographs. PNGs are suitable for smaller, more detailed images.
Which is better: JPEG or PNG?
Neither is superior, it all depends on what your image looks like. If you need to upload small, high quality, detailed illustrations, then choose PNG. If you’re uploading large photographs, then choose JPEG to keep the file size as small as possible.
