How To Compress Your Pictures

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?

Sometimes, effective design and well-formatted content can already do miracles. Whenever you can remove an image resource, and avoid its burden (in terms of HTML, CSS or JavaScript), you’re already applying the golden rule of a good image optimization strategy: less is more.

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:

Dareboost Waterfall Image Size
Screenshot from a Dareboost speed test – Waterfall

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:

  1. Open up the Network Panel
  2. Set the Throttling to Good 3G
  3. Click on Disable cache
  4. Filter the results by Images (Img)
  5. Refresh the page and check the Size column
Google Chrome Network Tab Images
Screenshot from Chrome Dev Tools – Network panel

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:

Google Developers Guide Image Formats
Image from Google Developers Guide about image optimization

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:

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:

Everything you need to know about image optimization in WordPress

In this article you learned:

Now that you know everything about image compression, it’s time to go ahead and learn other tricks about image optimization:

Author's avatar

Alice is a content writer with strong experience in international customer service and empathic communication. She is an active member of the WordPress community: she loves translating WordPress into Italian and speaking at WordCamps. You can follow @Alice_Ridice on Twitter.

0 comments

Get a Faster Website in a Few Clicks

Setup Takes 3 Minutes Flat

Get WP Rocket Now What are you waiting for?

{"cart_token":"","hash":"","cart_data":""}