Do you want to compress images without losing image quality? Large image files take longer to load on the user’s end and it slows down and affects your website’s SEO. Image compression is a necessary step to improve your website page load speed. Faster loading websites tend to rank higher in search results. By using this image compression guide you can easily compress an image without compromising on its quality.
If you want to add high-quality images to your blog posts then check out these best free stock photo websites.
In this tutorial, I will cover the following topics:
- How to compress images without losing image quality
- How to compress images before uploading them to a website
- After uploading images to a website, how you can compress those images
Why Compress Images? How it Improves Performance and SEO?
Every website these days use high-resolution images to improve the user experience. However, those images could affect your website page load speed if you don’t compress them before uploading them.
Compressed images will load faster, improve your on-page SEO, and more importantly improve user experience.
I have done a page speed test by loading unoptimized images first, then compressed those images and tested the page speed again. Here are the results:
Before image optimization:
After image optimization:
Note: I am also using a caching plugin, I recently reviewed 2 WordPress caching plugins side by side here, WP Super Cache Vs WP Fastest Cache. Please check that out as well especially if you are using WordPress and concerned about the page load speed.
How to Adjust and Resize Images?
When optimizing images the resolution of the image matters. You have to adjust it according to your website content area.
For example, if your website content’s area has a height and width of 500px x 500px. you can reduce the image size to 500px x 500px while creating it on your image editing software. Doing this will reduce the size of your image file.
You can read a more detailed tutorial from Photoshop user’s guide section. In this post, they have explained a lot in details about the image resolution, image size, pixel dimensions, and more.
How to Manually Compress Images Before Uploading
If you want to compress an image before uploading it to your website, then you can use any of the given third-party software.
1. Adobe Photoshop (Paid)
Adobe is one of the most used image editing software. It allows you to retain the maximum possible quality of the image while creating a small file size at the same time.
Here is how you can optimize an image if you use Adobe Photoshop.
First, you need to open the image you want to compress in Adobe Photoshop.
Click on File > Export > Save for web (legacy).
Now select JPG from the right corner of this new window.
Adjust quality as per your requirement.
Images that show lots of colors look good in JPG format, while images that show fewer colors can be compressed in PNG-8 or PNG-24 file formats. Even in those formats, you can customize the colors, resolution of the image, and of course, reduce the image file size.
You will be able to see the preview of the compressed image and the file size in the bottom left corner of the preview window.
2. GIMP (Free)
Gimp is free and open-source software available to download on Windows, Linux, and Mac operating systems. Here’s how you can use this free software to compress images without losing quality.
Open any image in Gimp from your computer.
click on File > Export as option.
Now click Export, it will open a new window.
Decrease the image quality as much as you want. By clicking on Show preview in image window, it will give you an estimate of what would be the actual file size after compression.
3. TinyJPG (Online/free)
It is an online free image compression tool. One benefit of using TinyJPG is you can compress multiple images in one go.
How to Compress Image to 100kb Online with TinyJPG
Visit the TinyJPG website and start uploading your images. TinyJPG will start compressing your images and you will be able to download the compressed versions to your computer.
That’s it! Your images will be compressed without any quality loss. The ideal image size for the web is less than 100 KB, particularly if your website loads multiple images at once.
How to Automatically Compress Images Already Uploaded to Your Website?
If you have already uploaded images on your website without optimizing them, then you can still compress those images without losing their quality. Image compression is crucial to promote and optimize any business website online. Here’s how:
1. Get Compressed Images Using Google PageSpeed Insights
Note: Google renewed the UI of their PageSpeed Insights tool so this process no longer works. Please check the other available methods.
Google’s PageSpeed Insights tool not only gives suggestions to optimize your website but also provides compressed images that you can download and replace your large images with smaller file sizes.
You will be able to get all the images on a page optimized for the web in a zip file. Here’s the step by step process of using the Google PageSpeed Insights tool to optimize already uploaded images on your website:
1- Go to Google PageSpeed Insights website. Enter your website’s URL.
3- Unzip this file and find the image folder.
4- Login to your website’s backend through FTP and upload those images in appropriate folders. You can also use the images by editing the article in your WordPress, Shopify, or other CMS platform.
Important: This procedure is a bit complicated and if you are unsure about it, then try other methods mentioned in the article.
2. EWWW Image Optimizer (WordPress Only)
WordPress users can also use plugins to automate the image compression process. This plugin will allow you to automatically compress already uploaded images. You don’t need to download, compress images via image editing software and then re-upload.
First, you need to download the EWWW Image Optimizer plugin to your WordPress website.
Go to Media > Bulk Optimize.
Click on Scan for unoptimized images.
It will take some time to scan. After the scan has been finished, click on Start Optimizing.
How to Compress Images in Next-gen Formats?
If you’re using WordPress then you can easily convert your existing JPEG and PNG images into next-gen formats.
What is a next-gen Format?
If you have ever used Google’s page speed Insights tool to check your site speed then you must have read this term.
Google recommends compressing images in size by using next-gen formats such as JPEG 2000, JPEG XR, and WebP.
These formats compress your JPEG and PNG size further without degrading quality.
Google is right about that, however, images of those formats are not widely used on the web. It is hard to find photos in “next-gen” formats.
If you use WordPress as your CMS then you can use a third-party plugin to serve your existing JPEG, PNG images into webP format.
You can install a plugin WebP Express to your WordPress website. Here’s how to install this plugin.
- Login to your WordPress site’s backend. Go to Plugins.
- Click Add New button. Search for ‘WebP Express’.
- Install and Activate the plugin and you’re done.
All of your existing images will be served in WebP format. If a user’s browser doesn’t support WebP format then this plugin will show them an original JPG or PNG image.
That’s it! Hopefully, all your images will be optimized. You can also optimize loading times by using a WordPress caching plugin. You can easily configure basic settings of W3 Total Cache with the help of this tutorial.