Do you want to compress images without losing image quality? Large image files take longer to load, which slows down your website and affects your SEO. Image compression is a necessary step in order to improve your website page load speed. Faster loading websites tend to rank higher than slow loading websites. By using this image compression guide you can easily compress an image without compromising its quality.
If you are looking for high-quality images to include in 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 as well if you don’t compress them.
Compressed images will load your website faster, improve your on-page SEO, and more importantly compressed images 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 want to improve 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 images before uploading them to your website, then you can use any of the given third-party software.
1. Adobe Photoshop (Paid)
Adobe is the world’s most popular image editing software and for a good reason. 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 for your website using 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 which 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 a 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 on 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 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 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 suggest to optimize your website, but it also provides compressed images that you can download and replace your large images with the 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 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 an image editing software and then re-upload.
First you need to download EWWW Image Optimizer plugin on your WordPress website.
Go to Media > Bulk Optimize.
Click on Scan for unoptimized images.
It will take some time to scan. After scan has been finished, click on Start Optimizing.
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.