Image optimization is key for performance on any WordPress website. Proper optimization of images is perhaps the single most effective way to reduce your page speed.

Media files account for the bulk of your websites size. So in this post we will cover how to optimize Images. If you are planning on streaming videos or audio files you can check out our other tutorials. For this tutorial you will learn the ins and outs of uploading and maintaining a healthy media library with image compression tools.

The are so many services and ways to optimize images that it can get confusing deciding what method is best. In this article we are going to clear some doubts and provide you with tools to optimize your images from both inside WordPress as plugins and from your desktop.

We will not be looking at any websites that allow you to upload and compress images. That is because they present a security risk as you do not know what the website will do with the images or if they will delete them at all after the process is complete. For this reason, it is best to avoid them.

How this works

Image optimization works very similarly to sound transcoding. Images can be compressed to save space with both methods: Lossless and Lossy. One particular thing about images is that we can even use both methods at the same time. Let’s analyze how this works.

Generally speaking, the best method to compress images is to do it through JPEG (JPG) format. Even images that are PNG can be easily converted and compressed into JPG.

The only scenario in which you do not want to change an image into the JPG format is when PNG is used with transparency. Since JPG format does not support transparency this could result in white backgrounds after conversion. This is especially true for Logo images which should stay in their original format most of the time.

Compressing can also lead to big saves in space when using the special format called Webp but you also have to consider that this format is only visible through the web browser, limiting your images to online only. For fans of high quality galleries or for photography blogs, Webp should be use with caution. For magazines with big amount of articles, Webp should be promoted and used widely.

Now, we are going to discuss the main methods in which you can compress and reduce an image size.

The Lossless Method

Image formats such as JPG have embedded metadata that is called EXIF. This metadata contains important information regarding the image in question, such as: author, day of image taken, details about the photograph such as exposure, lens aperture and some other fields. This data can be completely removed from the image. This also helps by removing any sensible information from them and in exchange will also reduce the size by a few bytes. The Lossless method of removing metadata and compressing images is also called “Pixel Perfect” method. PNG formats can be further compressed by methods such as OptiPNG which will reduce it’s size without altering the image. This method is also available on plugins and services related to image compression.

The Lossy Method

In this method the image that you’re about to compress or change filetype is going to loose quality in the process. Similarly to audio transcoding, when you compress using a lossy method, the result is irreversible to the original state. Take this into consideration when selecting the compression level.

Generally speaking, the best method to compress images is to do it through JPEG (JPG) format conversion. Even images that are PNG can be easily converted and compressed into JPG.

The only scenario in which you do not want to change an image is when the PNG format is used with transparency. Since JPG format does not support transparency this could result in white backgrounds. This is especially true for Logo images which should stay in their original PNG format.

Most tools, plugins and services available will allow you to use both methods for compressing and reducing the file-size of images.

Local Tools

For this article we are going to explore a very powerful tool that you can use to compress your own images manually before uploading them to WordPress.

Thanks to this neat tool and image manipulator called Fastone Image Viewer which is, by the way, a much more powerful tool than just a viewer, we can remove EXIF data, compress and resize images on a Windows PC. Fastone works on everything, from Windows 8 to 11 and it can also be used as a replacement for the default Image Viewer on Windows.

But why not just use Photoshop?

There are two simple answers for that: speed and automation. Fastone Image Viewer for example, has an automation tool that allows multi-rename, compress and resize on several images at once. The tool is multithreaded so it will run as fast as your PC allows it. The other answer is speed, Photoshop is slow to load every time and will make the whole process particularly painful, specially if you have several files that you’re going to optimize at different times during your work session.

If you are on a Mac, a cool alternative would be ImageOptim. This same tool for Mac has an online version, which is safe to use and can be accessed from here.

The first thing we will do is learn how to remove the metadata, this being a Lossless method, it should not alter the quality of your images in any way.

In this example, we removed the EXIF data from a series of background photographs taken for a website, reducing the total size on all of them from 21034Kb down to 20229Kb saving 805Kb worth of metadata without affecting image quality. In this case 805Kb may not feel like a lot but imagine this reduction into a 10GB worth of images and the savings will be significant.

Please note that this method is only valid for JPG images.

Now, let’s explore the Lossy method, which is the most widely use to compress images and optimize them.

To reduce the quality of the images and hence the file-size, we will convert them into JPEG and set the output Quality to 77. This is the absolute minimum you can go if you want to obtain a near perfect compression without affecting the output in a meaningful way. Anything less than 77 is going to start having some visual glitches.

Once you have Fastone opened, hit F3.

With this method of Quality reduction and conversion into JPEG, we just saved 1132Kb on our example files. For a total size of 17MB, a 1.1Mb reduction is quite significant without altering the resolution.

Now let’s go a step further and reduce the resolution for all images down to a standard 1080p without altering the image ratio.

Now that’s what we call an image file-size reduction!. Setting the resolution based on one side and choosing Width to 1920px and allowing the tool to set the Height accordingly we were able to reduce the total size of the files from 17Mb down to just 4.5Mb !

Through WordPress

Using a tool is neat for when you have a specific article that you want to publish but, what happens when you need to upload articles daily and work with images online and you do not have a PC or Mac to work with your tools?. For this types of scenarios, having a plugin or service that allows you to automate this process from within WordPress is paramount.

Another important feature regarding using a plugin, is the fact that you can enable the use of WebP format.

WebP

But, what is WebP in the first place?. Taken from the developer site:

WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.

WebP lossless images are 26% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller than comparable JPEG images at equivalent SSIM quality index.

Lossless WebP supports transparency (also known as alpha channel) at a cost of just 22% additional bytes. For cases when lossy RGB compression is acceptable, lossy WebP also supports transparency, typically providing 3× smaller file sizes compared to PNG.

Smush

For the purpose of this article, we will explore one of the most used services on the market, called Smush. Of course, Smush supports the automatic conversion to WebP with the option to retain the original image by means of their subscription service.

Some of the features of the Smush plugin and service are:

• Lossless Compression – Strip unused data and compress images without affecting image quality.
• Lazy Load – Defer offscreen images with the flip of a switch.
• Bulk Smush – Optimize & compress up to 50 images with one click.
• Image Resizing – Set a max width and height and large images will scale down as they are being compressed.
• Incorrect Size Image Detection – Quickly locate images that are slowing down your site.
• Directory Smush – Optimize images even if they are not located in the media library.
• Automated Optimization – Asynchronously auto-smush your attachments for super fast compression on upload.
• Without Monthly Limits – Optimize all of your images up to 5MB in size, free forever (no daily, monthly, or annual caps).

Let’s install Smush then!.

Upon activating the plugin we will be greeted by a welcome message and a change to configure the basic settings for the plugin.

Here we can enable the automatic optimization for new uploads, to strip the EXIF Metadata and then enable Lazy Load. This will pretty much cover all our needs as we are going to do lossless and lossy compression on all images and then the plugin will Lazy Load those images to reduce latency and bandwidth for when users do not need to scroll down the page.

Once the plugin is active and configured, we are ready to go and start optimizing our images, let’s click on the Bulk Smush Now

That’s it!. That’s all there is to it basically!. How is that for automation?. Of course, we can keep tweaking the plugin and service simply by scrolling down on settings.

We can let Smush know which image sizes we need to compress and we can also resize the uploaded images, something similar to what we did with Fastone Image Viewer on our Windows Tool section here and we can also make a backup copy of the original images in case we need them as Smush is doing lossy compression too. It is important to note that although Smush will allow you to compress all the images you want for free, this will only affect the thumbnails as the original images won’t be compressed. You will need a subscription to their services to enable that functionality.

Once images are optimized we are going to see the results and savings on the Dashboard. It’s important to know that you can also compress a custom folder outside of the Media Library with Smush, which is handy.

In case you need to enable the automatic conversion to WebP, you will need to sign up to their service, which will also activate higher levels of compression too.

Once all images are “smushed”, you will be able to explore the compression results simply by clicking the details on the Media Gallery. That’s all there is to it!.

Conclusion

Handling images and knowing how to compress them is paramount to have a healthy blog or website, as they grow in size, so will your hosting storage demands. On top of that, most search engine optimizations will greatly reward those sites that has the lowest load time.

In wrapping up this exploration of image optimization, it’s clear that managing and compressing images is crucial for maintaining a speedy and efficient blog or website. As we’ve navigated through various methods and tools, from manual solutions like Photoshop and Fastone Image Viewer to WordPress plugins such as Smush, we’ve covered a broad spectrum of options to suit different needs.

However, there’s one more tool that could revolutionize the way you handle images on your WordPress site: the Infinite Uploads plugin. While Infinite Uploads is not another image optimization plugin. It offers a unique cloud-based solution to your media library, ensuring your site remains fast and responsive, no matter how large it grows. With its ability to seamlessly integrate with WordPress, Infinite Uploads automates the process of optimizing, storing, and delivering your images from the cloud. This means your site can load faster, as it doesn’t have to bear the weight of heavy media files.

Why not give Infinite Uploads a try, especially if you’re looking for a solution that declutters your server space, making your website management smoother and more efficient. Whether you run a small blog aware of its specific needs or a bustling online magazine requiring constant uploads, automating your image optimization and storage can save you a significant amount of time and resources. With Infinite Uploads, you’re enhancing your site’s overall performance and user experience. So, don’t hesitate to explore this innovative tool and see how it can transform your website optimization efforts. Have fun optimizing!