Optimizing your images before uploading them to WordPress greatly improves your website speed. Yet many beginners have slow websites simply because they upload unoptimized images.
At WPBeginner, we make image optimization best practices a part of our regular blogging routine. We make sure that all of our authors create images with the right dimensions and then reduce image file size using a variety of graphics tools.
In this article, we will show you how to optimize your images for faster web performance without losing quality. We will also share automatic image optimization plugins for WordPress that can make your life easy.
Since this is a comprehensive guide on image optimization for the web, we have created an easy-to-follow table of contents:
- What Is Image Optimization?
- What Are the Benefits of Image Optimization?
- How to Save and Optimize Images for Web Performance
- Best Image Optimization Tools and Programs
- Best Image Optimization Plugins for WordPress
- Final Thoughts and Best Practices for Image Optimization
- Expert Guides on Improving WordPress Performance
1. What Is Image Optimization?
Image optimization is the process of saving and delivering images in the smallest possible file size without reducing the overall image quality.
While the process sounds complex, it’s actually quite easy these days. You can use one of the many image optimization plugins and tools to automatically compress images by up to 80% without any visible loss in image quality.
Here’s an example of an optimized vs. unoptimized image:
As you can see, when optimized properly, the same image can be up to 80% smaller than the original without any loss in quality. In this example, the image is 52% smaller.
How Does Image Optimization Work?
In simple terms, image optimization works by using compression technology.
Compression can be ‘lossy’ or ‘lossless’.
Lossless compression reduces the overall file size with absolutely no loss of image quality. With lossy compression, there may be a minor loss in quality, but ideally, it won’t be noticeable to your visitors.
What Does It Mean to Optimize Images?
You may have received a recommendation to optimize images from your WordPress hosting support or a speed test tool and wonder what you need to do.
You will need to reduce the file size of your images by optimizing them for the web. We’ll show you how to do that step-by-step.
2. What Are the Benefits of Image Optimization?
While there are many benefits to optimizing your images, here are the top ones that you should know:
- Faster website speed
- Improved SEO rankings
- A higher overall conversion rate for sales and leads
- Less storage and bandwidth (which can reduce hosting and CDN costs)
- Faster website backups (which can reduce the cost of backup storage)
Images are the second heaviest item on a web page after videos. According to the HTTP archive, images make up 42% of an average web page’s total weight.
Since we know fast websites rank higher in search engines (SEO) and have better conversions, image optimization is something that every business website must do if they want to succeed online.
Now you might be wondering how big a difference image optimization can really make.
According to a Strangeloop study, a one-second delay in website load time can cost you 7% of sales, 11% fewer pageviews, and a 16% decrease in customer satisfaction.
If these aren’t enough reasons to speed up your website, then you should know that search engines like Google also give preferential SEO treatment to faster-loading websites.
This means that by optimizing your images for the web, you can both improve website speed and boost WordPress SEO rankings.
Video Tutorial
If you’d prefer written instructions, then just keep reading.
3. How to Save and Optimize Images for Web Performance
The key to successful image optimization for web performance is to find the perfect balance between the smallest file size and acceptable image quality.
The three things that play a huge role in image optimization are:
- Image file format (JPEG vs. PNG vs. GIF)
- Compression (higher compression = smaller file size)
- Image dimensions (height and width)
By choosing the right combination of the three, you can reduce your image size by up to 80%.
Let’s take a look at each of these in more detail.
1. Image File Format
For most website owners, the only three image file formats that really matter are JPEG, PNG, and GIF. Choosing the right file type plays an important role in image optimization.
To keep things simple, you want to use JPEGs for photos or images with lots of colors, PNGs for simple or transparent images, and GIFs for animated images only.
For those who don’t know the difference between each file type, the PNG image format is uncompressed, which means it is a higher-quality image. The downside is that file sizes are much larger.
On the other hand, JPEG is a compressed file format that slightly reduces image quality in order to provide a significantly smaller file size.
Whereas GIF only uses 256 colors along with lossless compression, which makes it the best choice for animated images.
On WPBeginner, we use all three image formats based on the type of image.
2. Compression
The next thing is image compression which plays a huge role in image optimization.
There are different types and levels of image compression available. The settings for each will vary depending on your image compression tool.
Most image editing tools like Adobe Photoshop, ON1 Photo, GIMP, Affinity Photo, and others have built-in image compression features.
You can also save images normally and then use a web tool like TinyPNG or JPEGmini for easier image compression.
Although they require some manual effort, these two methods allow you to compress images before uploading them to WordPress, and this is what we do on WPBeginner.
There are also several popular WordPress plugins like Optimole and EWWW Image Optimizer that can automatically compress images when you first upload them. This is convenient, and many beginners and even large corporations prefer to use these image optimization plugins.
We will share more about using WordPress plugins later in the article.
3. Image Dimensions
Normally, when you import a photo from your phone or a digital 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 starting from 2000 pixels and more. While high-quality photos are well-suited for print or desktop publishing, their large sizes make them unsuitable for websites.
Reducing the image dimensions to something more reasonable can significantly decrease image file size. You can simply resize images using image editing software on your computer.
For example, we optimized a photo with a resolution of 300 DPI and image dimensions of 4900×3200 pixels. The original file size was 1.8 MB.
We chose the JPEG format for higher compression and changed the dimensions to 1200×795 pixels. The file size was reduced to just 103 KB. That’s 94% smaller than the original file size.
Now that you know the three important factors in image optimization, let’s take a look at various image optimization tools for website owners.
4. Best Image Optimization Tools and Programs
As we mentioned earlier, most image editing software comes with image optimization and compression settings.
Outside of the image editing software, there are also several powerful free image optimization tools that you can use to optimize images for the web (with just a few clicks).
We recommend using these tools to optimize images before you upload them to WordPress, especially if you are a perfectionist.
This method helps you save disk space on your WordPress hosting account, and it guarantees the fastest image with the best quality since you manually review each image.
Adobe Photoshop
Adobe Photoshop is a premium image editing application that lets you export images with a smaller file size for the web.
Using the export dialog, you can choose an image file format (JPG, PNG, GIF) that gives you the smallest file size.
You can also reduce image quality, colors, and other options to further decrease file size.
GIMP
GIMP is a free and open-source alternative to 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.
First, you need to open your image in GIMP and then select the File » Export As… option. This will bring up the Export Image dialog box, where you can give your file a new name. Next, you need to click the ‘Export’ button.
You will now see the image export options. For JPEG files, you can use the ‘Quality’ slider to select the compression level and reduce file size.
Finally, you should click on the ‘Export’ button to save the optimized image file.
TinyPNG
TinyPNG is a free web app that uses a smart lossy compression technique to reduce the size of your PNG and JPEG files. All you have to do is go to their website and upload your images using simple drag and drop.
They will compress the image and give you a download link.
They also have an extension for Adobe Photoshop, which is what we use as part of our image editing process because it lets you access TinyPNG from inside Photoshop.
For developers, they have an API to convert images automatically. Additionally, for beginners, they have a WordPress plugin that will do it for you. We’ll talk about this more later.
JPEGmini
JPEGmini uses a lossless compression technology that significantly reduces the size of images without affecting their perceived quality. You can also compare the quality of the original image and the compressed image.
You can use their web version for free or purchase the program for your computer. They also have a paid API to automate the process for your server.
ImageOptim
ImageOptim is a Mac utility that allows you to compress images without losing any quality by finding the best compression parameters and removing unnecessary color profiles.
A Windows alternative to this is Trimage.
5. Best Image Optimization Plugins for WordPress
We believe that the best way to optimize your images is by doing it before uploading them to WordPress. However, if you run a multi-author site or need an automated solution, then you can try a WordPress image compression plugin.
Here is our list of the best WordPress image compression plugins:
- Optimole, a popular plugin by the team behind ThemeIsle
- EWWW Image Optimizer
- JPEG, PNG & WebP Image Compression, a plugin by the TinyPNG team mentioned above
- Imagify, a plugin by the popular WP Rocket team
- ShortPixel Image Optimizer
- Smush
- reSmush.it
- Envira Gallery is a WordPress gallery plugin with built-in image compression
These WordPress image optimization plugins will help you speed up your website.
6. Final Thoughts and Best Practices for Image Optimization
If you are not saving images optimized for the web, then you need to start doing so now. It will make a huge difference in your site speed, and your users will thank you for it.
Not to mention, faster websites are great for SEO, and you will likely see an increase in your search engine rankings.
Outside of image optimization, the two things that will significantly help you speed up your website are using a WordPress caching plugin and using a WordPress CDN.
Alternatively, you can use a managed WordPress hosting company because they often offer both caching and CDN as part of the platform.
Expert Guides on Improving WordPress Performance
We hope this article helped you learn how to optimize your images in WordPress. You may also want to see some other articles related to improving WordPress performance:
- The Ultimate Guide to Boost WordPress Speed & Performance
- How to Speed up WooCommerce Performance
- Best WordPress Caching Plugins to Speed Up Your Website
- How to Optimize Core Web Vitals for WordPress (Ultimate Guide)
- How to Reduce Time to First Byte (TTFB) in WordPress – Expert Tips
- How to Use GTmetrix Plugin to Improve WordPress Site Performance
- Fastest WordPress Hosting (Performance Tests)
- Important Metrics to Measure on Your WordPress Site
- How to Properly Run a Website Speed Test
- How to Stress Test a WordPress Website
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dennis Muthomi
Well for me I ALWAYS convert all my images to .webp file format before uploading them to my WordPress site.
I chose to use .webp over JPEG and PNG because it provides much better lossless compression, allowing the file size to be significantly reduced without affecting image quality.
Jiří Vaněk
I used to do the same thing. First converting all images to webp and then uploading them to FTP. So I didn’t have any other format on the website besides webp. However, I was later made aware that this isn’t good practice, as there are still older types of browsers that some users may be using, which don’t support webp. If such a user visits your site, the images won’t display. Since then, I’ve been using a plugin. I upload png images to the site, and the plugin converts them to webp. This ensures that both formats are on the website, and for older browsers, the compatible png image will be used for display.
Jiří Vaněk
Thanks for the tutorial. Personally, I used to convert the images to .webp format first and then upload them to the web in that format. This format seems to me to be the smallest in terms of data volume and at the same time still very high quality for a good user experience. I don’t use plugins for this, but I usually convert images in online converters or in computer software.
WPBeginner Comments
The .webp format can also be a good image format to use due to it’s small file size. We happen to have a guide on how to use .webp here, including some handy plugins to convert images into .webp: https://www.wpbeginner.com/wp-tutorials/how-to-use-webp-images-in-wordpress/
Converting via a plugin can be useful because it can convert directly on the website and in bulk.
Jiří Vaněk
But if I use the plugin, won’t it take up too much space on my FTP because the original file will be there too? But I will certainly be happy to go and look at your instructions. Thanks for the link.
WPBeginner Comments
You could always delete the original files. You can use the search feature on the Media admin page to search for filetypes, such as the .png or .jpg/.jpeg extensions.
Mrteesurez
This is a comprehensive guide.
It’s essential to optimize images in order to have fast website loading and content delivery.
You quoted that images are the second heaviest after video, what of audio, is audio lighter than images and how ?
WPBeginner Comments
Audio would tend to be between images and video. That said, depending on the amount of audio and the audio filetype, this is not an exact rule and it just depends on the files in question.
Mrteesurez
Thanks for your reply, the thing is, I used to see audio files bigger in term of size than images, most images are in kilobytes while audios are usually more than that, I think the duration for a audio to be played and delivered a meaningful message also contribute to it’s size.
Michelle N
Would love to say that this has been incredibly helpful, easy to digest and implement, I appreciate all the tools provided. Thank you! – from a beginner blogger
WPBeginner Support
Glad our guide was helpful
Admin
mohadese esmaeeli
By the way, another question I have is whether, when using image optimization plugins and optimizing previously uploaded images, the new images replace the old ones? Or do the original images remain in the WordPress media library, with the optimized images alongside them?
WPBeginner Support
It would depend on the specific plugin you are using as some will replace the image while others have the option to keep the original.
Admin
Jiří Vaněk
Many of them give you a choice whether you want to keep the original images or delete them. From personal experience, I recommend keeping the original images on the website (at least as a backup).
mohadese esmaeeli
Hello,
Greetings to you. This article appears to be quite comprehensive. I became acquainted with your website a few days ago and started reading the articles. I have decided to implement the same process on my website as I read through these articles.
I quickly reached point 2, focusing on site speed. To be honest, I have been working on my site for just a few days, and I have only managed to achieve a 10% increase in site speed.
WPBeginner Support
An improvement is still an improvement, we’re glad to hear our guide is helpful
Admin
mohadese esmaeeli
Yes, that’s exactly right. In this vast and competitive world, those who are always improving their website and offering something more than their competitors will be the winners. Otherwise, we will be the losers.
Moinuddin Waheed
Having optimizes images for websites or blogs is very important for the speed of the website.
Heavy image sizes takes time to load and causes the website to slow.
I have used some of the plugins for image optimisation.
But I think best option is to use caching plugins and CDN for the websites.
it lets the website speed not only fast but also helps in retaining the visitors.
WPBeginner Support
CDNs are normally for speed instead of retention but a fast loading site does help keep your visitors and helps make them want to return
Admin
Lewis
First of all, it’s important to note that not all image file types are created equal. JPEGs are generally going to be much smaller in file size than PNGs, for example, so it’s important to choose the right file type for the job.
Additionally, when it comes to resizing images, you should always resize them before you upload them to your website. This way, you can avoid having to serve oversized images to your visitors, which can slow down your site.
Finally, I wanted to point out that there are a number of plugins available that can help you automate the process of optimizing your images. WP Smush is a great option that can help you save time and ensure that your images are always properly optimized.
WPBeginner Support
Thanks for sharing your comment
Admin
Rebecca Gelsi
This is brilliant, thank you. I’m using JPEGmini after reading this article and am so relieved to have this aspect of our site sorted.
Andy
Thanks for the normal and simple explanation. I made a few mistakes with my photo content on my site, but with the help of your explanations, I figured out exactly what I needed to do. Thank you!
WPBeginner Support
Glad our guide was helpful
Admin
Tania
So helpful!! Thank you for sharing. Quick question – If I compress my images to an optimal/acceptable KB size directly in Photoshop using the Save for web setting mentioned above, and then upload to Wordpress…is there a need to also run Shortpixel or another image compression plugin? Or is that redundant?
Trying to understand if there are added benefits to using a plugin vs Photoshop. Would love to hear your thoughts. Thanks!
WPBeginner Support
The plugins are an alternative, if you optimize your images before uploading them, you wouldn’t need to use an image optimization plugin
Admin
Shiv Raj Bhatt
Great idea to optimize images for faster loading website. Thanks for the info.
WPBeginner Support
Glad you like our content
Admin
Lauren
Excellent and thorough! Thank you!
WPBeginner Support
Glad our guide was helpful
Admin
Eddier Naranjo
The optimization plugins make a copy of the “heavy” image and serve the optimized version. But that increases the storage space on the site.
Is there a way to delete the old version and leave only the optimized image?
WPBeginner Support
We would recommend checking with the support for the plugin that you are using as they normally have an option to remove the unoptimized version.
Admin