{"id":927438,"date":"2019-01-09T20:28:37","date_gmt":"2019-01-09T19:28:37","guid":{"rendered":"https:\/\/wp-rocket.me\/?page_id=927438"},"modified":"2023-05-03T17:41:30","modified_gmt":"2023-05-03T15:41:30","slug":"compress-image-for-web","status":"publish","type":"post","link":"https:\/\/wp-rocket.me\/blog\/compress-image-for-web\/","title":{"rendered":"How To Compress Your Images Online And Reduce Their File Size: The 5 Best Tools"},"content":{"rendered":"

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.<\/p>

As any painter needs to know the technicalities of their job (the use of color, styles, and artistic supports), you\u2014as an image optimizer artist\u2014should dig into the study of your images and understand their format capabilities, quality, pixel dimensions and so on.<\/p>

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.<\/p>

In this article, we are going to walk you through the secrets of image compression for the web: you\u2019ll learn how to determine the \u201dright weight\u201d of your images and which tools you can use to compress them and reduce their file size.<\/p>

What Does Compressing an Image Mean (And Why You Should Do It) <\/h2>

Compressing an image for the web means reducing its file size<\/strong>: this is achieved by minimizing the size in bytes of the image file without any quality loss.<\/p>

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.<\/p>

And here’s why you should compress your images<\/strong>: We all want our images to be crisp and high-quality, but it\u2019s important to balance this desire with the time required for the pictures on your pages to be downloaded from the browser. Performance and speed matter more than ever.<\/p>

The lighter your images will be, the faster your pages will download: it\u2019s a constant struggle between pleasing your users \u2014who love reading your content supported by beautiful images\u2014 and making King Google happy! Keep in mind that compressing and reducing your images’ size will also help you optimize the Largest Contentful Paint grade<\/a>, one of the Core Web Vitals metrics<\/a>.<\/p>

How to Determine the Ideal Weight for an Image?<\/h3>

There\u2019s 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 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:<\/p>

Do I really need an image here?<\/em>
Is an image necessary to achieve the special effect I\u2019m seeking on this page?<\/em>
Can I spare my users some bandwidth and prevent them the download unuseful bytes from the browser?<\/em><\/p>

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\u2019re already applying the golden rule of a good image optimization strategy: less is more<\/strong>.<\/p>

That said, placing an image that 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:<\/p>

Huge file size = slower loading time = higher bounce rates and customers running away from your site.<\/em><\/p>

Which Tools Can Be Used to Identify the Size of an Image?<\/h2>

There are several free tools that will help to identify particularly large images on your pages.<\/p>

You can run a speed test with GTMetrix<\/a> or Dareboost<\/a>; both of them will reveal the total page size and, within their waterfall, will indicate which files are the heaviest:<\/p>

\"Dareboost
Screenshot from a Dareboost speed test – Waterfall<\/figcaption><\/figure><\/div>

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<\/em> and do the following:<\/p>

  1. Open up the Network Panel<\/li>\n\n
  2. Set the Throttling to Good 3G<\/em><\/li>\n\n
  3. Click on Disable cache<\/em><\/li>\n\n
  4. Filter the results by Images<\/em> (Img)<\/li>\n\n
  5. Refresh the page and check the Size<\/em> column<\/li><\/ol>
    \"Google
    Screenshot from Chrome Dev Tools – Network panel<\/figcaption><\/figure><\/div>

    Once you know which images are burdening your pages, optimizing them will be a lot easier!<\/p>

    Which Steps Should You Follow to Reduce the File Size of Your Images?<\/h2>

    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\u2019ll be grateful for it in the future \ud83d\ude42<\/p>

    1. Select the Right Image Format<\/h3>

    We can usually distinguish between two categories of images: vector and raster.<\/p>

    Commonly, vector graphics are in the SVG, EPS, and PDF formats<\/strong>: you can find them in images consisting of geometric shapes; furthermore, they are zoom and resolution-independent.<\/p>

    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.<\/p>

    Raster images are not resolution or zoom independent: that\u2019s why, when you scale them up, you\u2019ll end up with blurry graphics. Consequently, it\u2019s always better to save multiple versions of the same raster image at different resolutions so that your users could benefit from an optimal experience.<\/p>

    GIF, PNG, and JPEG images<\/strong> are the three universally supported image formats for the web.
    Some browsers also support the most recent image formats such as WebP <\/a>and JPEG XR<\/strong>, which offer better overall compression and more features.<\/p>

    Check this table from Google Developers Guides to learn the different characteristics of each image format:<\/p>

    \"Google
    Image from Google Developers Guide about image optimization<\/a><\/figcaption><\/figure><\/div>

    2. Resize Using the Right Dimensions<\/h3>

    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.<\/p>

    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.<\/p>

    3. Compress Your Images With the Right Tool<\/h3>

    Before looking for a compression tool, keep in mind these two tips when you start optimizing your images:<\/p>