If you want to provide a great user experience to your visitor, you’ll need to ensure that your website loads faster, so it doesn’t frustrate them. In fact, the speed of your website can make or break your online business. You MUST optimize WordPress images to make your site faster - because images are usually the heaviest part of your content,
Walmart has found a 2% increase in their conversion rate whenever they improved the speed by 1 second. This is one example of many that indicate making your website fast is criticale.
An easy way of making your website faster is by optimizing all the images on your WordPress website.
If you’ve not yet considered the speed of your WordPress website as a critical component of your business, you’ll have to think again and start taking measures to improve the speed of your WordPress website.
Recommend reading: How to get a fast WordPress website - a complete guide [25 steps]
There are many ways to make your website faster. Some of them are listed below.
- Avoid using too many WordPress plugins
- Use WordPress CDN services
- Optimize CSS delivery
- Optimize WordPress images
Images that have not been optimized for the web are typically large. These images will take longer to load.
It’s important that you optimize your images by making them as small as possible.
However, most times, the process of optimizing images for WordPress and your website is tedious or gets in the way of producing content.
In this post, we will explain different ways to optimize your WordPress images and thus make your site load faster.
Compress images or save them for the web
It is a no-brainer that size of your image can influence the loading time of your WordPress website. The more your browser has to load, the more time it will take to do it.
That's especially true on mobile or slower internet connections.
As high-resolution images will have a larger file size, it is always better to compress the images before uploading.
That way, browser will need to download less data so should load much faster.
Now you might have a question: what is WordPress image compression and how can it reduce the size without affecting the quality?
Compression is the process of decreasing image size dramatically by algorithmically removing image information that a human eye can’t perceive. This is a very effective way of optimizing WordPress images.
Though image compression is a sure-fire method to reduce the image size, when it comes to compressing JPEG files, sometimes the process loses the actual contents of the images during the process.
This is the only downside of this approach. Remember to check the post-compression results carefully, to make sure that you are happy with the results of compression.
WP Smush is a popular WordPress plugin that lets you easily reduce the image file size by scanning every image you upload and removing unnecessary data information.
The free version of this plugin lets you compress images up to 1 MB in size whereas, with the pro version, you can compress images up to 32 MB.
You can download WP Smush here.
Please also note that this plugin lets you optimize all of the newly uploaded images to your WordPress website. If you want to compress the existing images, you can use the Bulk Smush.it link under the media library tab to optimize existing WordPress images.
We'll talk more about optimization plugins in a little while.
Lazy loading: Optimize WordPress image load times
[UPDATE: WordPress 5.4 has lazy loading built in. As long as you keep WordPress up to date, you no longer need to worry about lazy loading.]
We all know that "A picture is worth a thousand words".
But using too many pictures on a single page can make your website load slower.
One easy way to improve your loading time is by removing unnecessary images and keeping only that is absolutely necessary. However, not every wants to reduce the number of images being used on a web page, only to make the page load faster.
How can this issue be solved?
You might have noticed it already- websites that use a lot of images on each page solve this issue by making the image load only when it is visible to the user.
This tactic not only reduces the page load time but it saves server bandwidth as well. This is called lazy loading. Because the image is "lazy", it only comes up when it is needed.
If you’re on WordPress, it is easier to make the image loads only when it is visible. All you need to do is that install a Lazy load plugin.
Once again this is an excellent way to optimize WordPress images for improved speed.
You used to need a plugin for this but now it's baked into WordPress.
Read More: Divi vs Elementor
Use the correct image format
Knowing the differences between each image format lets you use the right format on your website, which even helps you when it comes to image optimization.
JPEG, PNG and GIF are the most popular image formats.
What format is better for optimized WordPress website images and when should you use it?
- GIF: Use GIF when your image is too small and uses a relatively less number of colors. For example, GIF is good choice for clip arts, bullets and charts. On the other hand, complex images with enhancements like drop shadows couldn’t be displayed properly using GIF.
- JPEG/JPG: It is suitable for complex images with many color variations or if it contains photographic images.
- PNG: PNG format is best suited for transparent images.
- WebP: this is the best format these days, but creating these images requires server support on your website
Please note that these are just general recommendations. Like any rules, there are exceptions, and some of these rules are meant to be broken.
Make effective use of the browser cache
When you upload images on a web page, make sure you upload them to a single directory. Uploading your images to a single directory on a web page will help the browser to easily load those images using browser cache during repeated visits.
It's fine if you are uploading images via the default WordPress image uploader. But for instance, if you're creating HTML landing pages on WordPress, chances are you won't be using the default WordPress image uploader.
In these cases, instead of uploading the images of a web page to different directories, make sure you upload all of them into a single directory.
If you want to read more about browser caching and how to leverage it, check out our detailed article here: How to Leverage Browser Caching in WordPress With or Without a Plugin [5 ways]
Use the same image multiple times
Another way to use browser caching for reducing image bandwidth is by using the same images multiple times throughout the site.
For example, when you're using logos or menu items from a page, make sure you call the same images throughout the site, so users don't need to download them several times but once, and browsers can display the images from the browser cache.
While using a textured background, make sure you use smaller images repeatedly instead of using a single large image. This can also help to reduce the loading time.
By default, when you upload images using media uploader on WordPress dashboard, it goes into the folder depends upon when you upload it. That means, all of the images that are being uploaded in a month will be located in a single directory.
For example, if you upload an image in 2021 January, it will be located in this directory: wp-content/uploads/2021/01.
Let’s look at the benefits of uploading through the media uploader and then, we’ll tell you what you should consider when you’re not uploading to your media uploader to speed up your website.
Media uploader makes the image loading quicker: The loading will be quicker if the images are stored in the same folder while browsing a web page.
When the images are being called repeatedly, the browser can easily retrieve them from the browser cache if they’re in a single folder.
Oftentimes however, WordPress bloggers won’t use the default media uploader, especially while working on a customized landing page. For the sake of easiness, they upload images in a separate directory.
In such cases make sure that you upload all of the images of that page in a single directory instead of uploading to multiple directories. This tactic can improve the loading time as the file caching will be easier during repeated visits.
Use CSS instead of images
Do you know you can improve the loading time by not using any image at all?
For example, it is totally possible to generate certain shapes by using simple CSS instead of images such as rounded rectangles, gradients, drop shadows, and transparent images.
That being said, make sure that you keep an eye on browser compatibility check whenever you replace any image with CSS because not all the browsers are able to support these techniques.
5 image optimization plugins to help maintain page speed
We mentioned the Smush image optimization plugin earlier but it isn’t the only one you can use.
If you’re convinced that optimizing images are the way to go (and you should be), here are 5 WordPress plugins that deliver:
1. ShortPixel Image Optimizer for WordPress
ShortPixel Image Optimizer for WordPress is a lightweight plugin with all the basic features to help you optimize images.
It compresses images, converts, them, includes background processes to optimize images and a whole lot more.
The plugin is free to use for up to 100 credits per month. Then it costs from $3.99 per month for extra credits. Unlimited plans start at $8.99 per month.
This plugin does a lot of things right. The free version lets you try before you buy but makes life complicated with pricing once you begin optimizing more images. Otherwise it’s a good option.
2. Imagify
Imagify is a popular image optimization plugin with over 300,000 installations. It enables you to optimize images, convert formats including WebP and resize on the fly. It’s a very competent plugin if you think you might use all the options.
There’s a free version with up to 20MB of file optimizations. Premium plans cost $4.99 per month for up to 500MB and $9.99 a month for unlimited optimizations.
As Imagify compresses on their own servers rather than yours, this pricing method works better.
Imagify offers some powerful optimization tools and three levels of compression. What’s more, it uses its own servers to do it. That free 20MB isn’t much though as an HD image can easily be 2MB upwards.
3. EWWW Image Optimizer
EWWW Image Optimizer is a free image optimization plugin for WordPress that does a lot without asking for anything back. It installs into WordPress and uses both lossy and lossless compression to shrink images on your site.
It can cope with images up to 150MB in size and can shrink most by up to 50%. While it doesn’t have many more advanced features, the basics are very definitely covered.
EWWW Image Optimizer is a great free option that’s pretty basic but gets the job done. Anyone that needs lazy loading or more advanced image optimizations will need to pay from $7 per month for premium features.
4. Smush
Smush is a powerful free image optimization plugin for WordPress. It has over 1 million installations and does everything a plugin of this kind should do. It optimizes, shrinks, changes format and even lazy loads images.
Smush is install and forget. Set it up, let it loose and it will optimize all existing images and will automatically do the same for all new images. The Bulk Smush feature is especially useful for image-heavy websites or portfolios.
To be honest, Smush is so capable, we struggle to justify paying for image optimization. If you run a smaller website and don’t depend heavily on images, it could be the only plugin you need.
5. Optimole
Optimole is more of a hands-off image optimization plugin. Once installed, it will check existing images and optimize them and automatically shrink new images like Smush does.
Optimole also offers cloud-based images using an Optimole server. This can speed up image delivery at the expense of more HTTP requests. It is free for up to 5,000 visitors per month and $19.99 for unlimited images.
Optimole is good in that it handles serving images on your web pages. It’s not so good in that it serves images for your web pages. You lose a lot of control in return for a modest performance gain.
Frequently Asked Questions about Optimize WordPress Images Plugins
Is there a WordPress image compression plugin that is free?
Yes, there are several free WordPress image compression plugins available that can help you reduce the file size of your images without sacrificing quality. Some popular options include Smush, ShortPixel, and Optimole. These plugins are freemium, so you'll usually get a certain number of image compressions for free and then more options or usage as part of a premium plan.
How do you optimize images for the web in Photoshop?
To optimize images for the web in Photoshop, follow these steps. First, resize the image: Go to Image > Image Size and set the dimensions to the size you want for your web page. Be sure to check the "Resample Image" box and choose "Bicubic Sharper" for best results. Save the image for web: Go to File > Export > Save for Web (Legacy) and choose your file format (JPEG, PNG or WebP) and compression settings. Use the preview panel to compare different compression levels and ensure that your image looks good while still having a small file size. Use the right file format: For photographs, use JPEG format and for graphics or logos, use PNG format, or WebP which is typically good for most types of images. This will help to ensure that your images are optimized for the web and load quickly on your website.
How do you optimize images for WordPress without a plugin?
To optimize images for WordPress without a plugin, you can follow these steps. Resize the image using an image editor to resize the image to the dimensions you want. You can use Photoshop, GIMP, or any other image editor you are comfortable with. You can compress the image use an image compression tool. There are many free online tools available, such as TinyPNG or Kraken.io, that can compress your images without losing quality.
Optimizing WordPress images
Image optimization is one of the most important tweaks you can make to improve the usability and responsiveness of your website.
As speed is everything, delivering pages quickly, with minimal delay helps improve engagement and will have a knock-on effect on your SEO too.
As it's so simple to do, we think every website should use some form of image optimization.
What do you think? Do you optimize images? What method do you use?
Please leave a useful comment with your thoughts, then share this on your Facebook group(s) who would find this useful and let's reap the benefits together. Thank you for sharing and being nice!
Disclosure: This page may contain links to external sites for products which we love and wholeheartedly recommend. If you buy products we suggest, we may earn a referral fee. Such fees do not influence our recommendations and we do not accept payments for positive reviews.
and many more ...