Do you want to compress images without losing image quality?
Large image files take longer to load on the user’s end. They slow down your website which affects your user experience and 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 resize 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
- Compress images before uploading them to a website
- Bulk compress images already uploaded on your website
- How to shrink PNG Images without losing quality
Why Compress Images and 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.
Image compression is a technology that allows you to reduce image file size. For example, you can compress high quality photos from your phone which are typically more than 1 MB in file size to less than 100 KB.
Compressed images load faster, improve user experience, and boost your on-page SEO.
Image compression is also important for WordPress speed optimization as images the most time to load on any website.
I performed a page speed test on a web page. First, I checked the page speed with unoptimized images. After that, I compressed images to smaller file sizes and ran the test again.
Here are the results:
Before image optimization:
After image optimization:
As you can see the performance improvement is huge and it makes a big different for any website’s success.
Note: I am also using a WordPress caching plugin, I recently reviewed two 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?
There are two ways you need to optimize your images.
- Resize image resolution
- Compress image to reduce file size
Image resolution is the dimensions (width and height) of the image file. It is calculated in pixels for instance 1200 pixels x 1200 pixels.
Depending on which device created or captured the image, it also has pixel density settings. Higher pixel density means higher quality image and larger file size.
File size is the actual file size of the image. It is measured in bytes like Kilobytes (KBs) or Megabytes (MBs).
Your goal is to reduce both the image resolution as well as file size.
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.
Normally, most modern mobile phones save images in high resolution. These images are too massive to be used on your website.
When you are compressing your images you also need to make sure that you choose a reasonable resolution for your images. If you are unsure about what width to choose, then you can choose anything less than 1000px wide.
This ensures that your image is still large but not too large to slow down your website.
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 following image compression tools.
1. Compress Images without Losing Quality with Adobe Photoshop (Paid)
Adobe Photoshop 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.
Using Photoshop, you can choose image file format (JPEG vs PNG) and it will show you file size for each format. This way you can choose a file format that produces the best result.
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) option from the menu.
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 without losing quality.
You’ll be able to see the preview of the compressed image and the file size in the bottom left corner of the preview window.
Now if you try to reduce file size too much, then this would affect the quality of the image. You need to find the balance between good quality and acceptable image file size.
For instance, on my blogs I try to keep image file sizes under 100 KB max. This works great for my small business website SEO.
However, if you run a photography business or graphic design agency then you would probably want your website to have much higher quality of images.
The great thing about using a software like Adobe Photoshop is that you can try different combinations and see preview before saving your image.
Now Adobe Photoshop is an expensive software and not all users may be able to afford it. This next method would be suitable for those looking for a free image compression software.
2. Compress Image File Size with GIMP (Free)
GIMP is a free and open-source image editing software available for Windows, Linux, and Mac operating systems.
Here’s how you can use this free software to compress images without losing quality.
Open any image on your computer in GIMP and then click on File > Export as option.
Now click on the Export button and it will open a new window.
From here you can 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.
Try different image file types and compression settings to find the best result. After some practice, you’ll get used to saving your images optimized for web by default.
3. Compress Images Online with TinyJPG (Online/free)
TinyJPG 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.
It will start compressing your images on the cloud 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.
They also have a sister site called TinyPNG that helps you shrink PNG image without losing quality.
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.
1. Use Smush WordPress Image Compression Plugin
Smush is a free WordPress image compression plugin. It is downloaded by more than a million users and have thousands of five star reviews.
It simply optimizes your images when you upload them to your WordPress website. You can also bulk compress old images on your website.
Simply install the Smush plugin on your website.
After that, click on Smush icon in the WordPress admin sidebar and choose Bulk Optimize option.
2. EWWW Image Optimizer WordPress Plugin
EWWW is a good alternative to Smush WordPress image compression plugin.
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 image formats.
What is a next-gen image 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.