Image optimization is an art that you cannot refuse to acknowledge if you want your website to be as fast as possible and give your readers the best user experience.
As any painter needs to know the technicalities of their job (the use of color, styles, and artistic supports), you—as an image optimizer artist—should dig into the study of your images and understand their format capabilities, quality, pixel dimensions and so on.
The good news is that, with the right techniques, you can significantly reduce the size of your images and make your pages a lot faster.
In this article, we are going to walk you through the secrets of image compression for the web: you’ll learn how to determine the ”right weight” of your images and which tools you can use to compress them and reduce their file size.
What does compressing an image really mean
Compressing an image for the web means reducing its file size: this is achieved by minimizing the size in bytes of the image file without any quality loss.
In other words, when you compress an image you reduce the amount of storage space that image file will occupy: storage space is measured in kilobytes (KB) and megabytes (MB), where 1MB = 1000KB.
We all want our images to be crisp and high-quality, but it’s important to balance this desire with the time required for the pictures on your pages to be downloaded from the browser.
The lighter your images will be, the faster your pages will download: it’s a constant struggle between pleasing your users —who love reading your content supported by beautiful images— and making King Google happy!
How to determine the ideal weight for an image?
There’s no single answer to this question: the ideal size of an image file is the one allowing you to have the lightest image possible while preserving the quality necessary for an excellent performance on the page.
To find your answer to the question, try to see the subject from a different angle and ask yourself instead:
Do I really need an image here?
Is an image necessary to achieve the special effect I’m seeking on this page?
Can I spare my users some bandwidth and prevent them the download of unuseful bytes from the browser?
That said, placing an image which conveys your message most effectively is a win-win situation for your content marketing strategy.
Your images need to be hi-res and neat. Unfortunately, most of the time, hi-resolution and neat images tend to have huge file sizes.
When you upload a hi-res picture on your pages, you should always keep in mind the equation:
Huge file size = slower loading time = higher bounce rates and customers running away from your site.
Which tools can be used to identify the size of an image?
There are several free tools which will help to identify particularly large images on your pages.
You can run a speed test with GTMetrix or Dareboost; both of them will reveal the total page size and, within their waterfall, will indicate which files are the heaviest:
Even your browser is a useful ally in this quest for the best image size.
For example, on Google Chrome, you can open its Dev Tools and do the following:
- Open up the Network Panel
- Set the Throttling to Good 3G
- Click on Disable cache
- Filter the results by Images (Img)
- Refresh the page and check the Size column
Once you know which images are burdening your pages, optimizing them will be a lot easier!
Which steps should you follow to reduce the file size of your images?
The first important rule you should religiously implement every time you deal with images for your website is learning to save them in a suitable web format.
Every little KB is important: even when you think that optimizing an image will only save a little 10% of its size…go with it! You’ll be grateful for it in the future 🙂
Select the right image format
We can usually distinguish between two categories of images: vector and raster.
Commonly, vector graphics are in the SVG, EPS and PDF formats: you can find them in images consisting of geometric shapes; furthermore, they are zoom and resolution independent.
Raster images are ideally suited for complex scenes including irregular shapes and details, like pictures. The most common raster image formats are GIF, PNG, JPEG; more modern formats are also spreading, such as JPEG-XR and WebP.
Raster images are not resolution or zoom independent: that’s why, when you scale them up, you’ll end up with blurry graphics. Consequently, it’s always better to save multiple versions of the same raster image at different resolutions so that your users could benefit from an optimal experience.
GIF, PNG, and JPEG images are the three universally supported image formats for the web.
Some browsers also support the most recent formats such as WebP and JPEG XR, which offer better overall compression and more features.
Check this table from Google Developers Guides to learn the different characteristics of each image format:
Resize using the right dimensions
Whenever you use an image which size is larger than the dimensions needed in your web page, you are sending redundant bytes over the wire.
Web performance tools such as Google PageSpeed often refer to this point using the recommendation Serve scaled images.
Scaling images with an image editor before uploading them is the way to go; make sure to specify those dimensions in the page as well using the srcset attribute.
All you need to know about resizing your images with the right dimensions (width and height) is in our tutorial File size really matters: tips & tools to resize your images and boost your site.
Compress your images with the right tool
Before looking for a compression tool, keep in mind these two tips when you start optimizing your images:
- Remove unnecessary image metadata: sometimes your images can contain private EXIF metadata from digital cameras, embedded thumbnails or comments. Removing them is not only a good security practice, but it will also improve the size of your files.
There are different tools able to delete this data.
- Automate as much as you can: think about investing in automated tools or plugins that will ensure that all your image assets are always optimized.
After this, you’ll be ready to dive into the world of image compression tools and choose the one which best suits your need.
Which are the best tools to compress your images?
There’s a wide variety of compression tools that will make your images lighter and rocket-fast to download!
These are some of the most commonly used:
- Imagify.io: this tool allows you to compress your JPEG, GIF and PNG files from the online app, the API or directly from WordPress
- Squoosh.app: the new online tool by Google, which supports the most popular image formats but also MozJPEG, OptiPNG, and WebP
- TinyJPG | TinyPNG : online tool to reduce the file size of your JPEG and PNG images
- Compressor.io: online tool to compress JPEG, PNG, GIF and SVG files
- Kraken: online tool supporting JPEG, PNG, GIF, Animated GIF and SVG formats; available also as WordPress and Magento plugins
- ImageOptimizer: simple online tool to compress and resize your images
- Optimizilla: easy online tool to compress JPEG e PNG files
- ImageOptim: online tool available also as a Mac app, which compress pictures and removes bloated metadata
- Crush Pics: Shopify App to reduce images file size and tidy up their filenames to improve SEO
- Minifier: Shopify App to compress images and generate alt-tags and image titles according to SEO
- GIMP Save for Web: a Windows tool to download and install on your computer to optimize JPEG, GIF and PNG images.
Everything you need to know about image optimization in WordPress
In this article you learned:
- What compressing an image for the web really means
- What do we mean by ideal weight for an image and how to measure it
- How to identify the size of an image
- Which steps you should follow to reduce the file size of an image
- Which tools can be used to compress images
Now that you know everything about image compression, it’s time to go ahead and learn other tricks about image optimization: