{"id":1508,"date":"2022-07-13T11:20:03","date_gmt":"2022-07-13T11:20:03","guid":{"rendered":"https:\/\/imagify.io\/blog\/?p=1508"},"modified":"2024-03-07T11:19:20","modified_gmt":"2024-03-07T11:19:20","slug":"properly-size-images","status":"publish","type":"post","link":"https:\/\/imagify.io\/blog\/properly-size-images\/","title":{"rendered":"How To Properly Size Images"},"content":{"rendered":"\n

Are you getting the \u201cproperly size images\u201d warning when running a performance audit on Google PageSpeed Insights? This issue is triggered if Lighthouse identifies any images on your page that aren’t appropriately sized.<\/p>\n\n\n\n

Properly sizing your images can drastically improve page loading times and reduce bandwidth consumption. In this article, we share some optimization techniques you can follow to optimize the images of your WordPress site.<\/p>\n\n\n\n

What Does Properly Size Images Mean?<\/h2>\n\n\n\n

Properly sizing your images means that the image URL should not be larger than the size they are rendered at on the visitor screen. You should not serve anything larger than what\u2019s needed \u2013 it would waste bytes and make the page slower.<\/p>\n\n\n\n

The golden rule: Images uploaded on your WordPress site should be sized based on the dimensions they will be displayed.<\/strong><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
\"Actual
Actual size vs rendered size – Source: Imagify<\/a>
<\/figcaption><\/figure>\n\n\n\n

What Triggers the Lighthouse Warning <\/h3>\n\n\n\n

Lighthouse compares the size of the rendered image (device pixel ratio) and the size of the actual image. The \u201cproperly size images\u201d warning is triggered if the rendered size is at least 4KiB smaller than the actual size. <\/p>\n\n\n\n

Impact Of Improperly-sized Images on Performance<\/h3>\n\n\n\n

If images are not sized properly, the browser will take the \u201cdecision\u201d to resize them before displaying them to the visitor, wasting time and resources. Too large images harm the page experience, forcing the user to download more data than needed.  <\/p>\n\n\n\n

A high-resolution image = huge file size = drastically affects web performance = more consumed cellular data <\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

This is what happens on the browser side when it parses not properly sized images:<\/p>\n\n\n\n

\"Browser
Browser execution time with high-resolution images – Source: Imagify<\/a><\/figcaption><\/figure>\n\n\n\n

The browser will spend more time downloading the file and resizing the image, increasing the bandwidth consumed. To avoid any performance issues related to images, there are a few easy techniques you can implement.  Let\u2019s go over them in the next part! <\/p>\n\n\n\n

3 Tips to Properly Size Images on WordPress<\/h2>\n\n\n\n

To properly size images on WordPress, you can follow three easy image optimization tips: <\/p>\n\n\n\n

    \n
  1. Resize Images To Correct Dimensions <\/a><\/li>\n\n\n\n
  2. Use Responsive Images<\/a><\/li>\n\n\n\n
  3. Use Vector-based Image Formats<\/a><\/li>\n<\/ol>\n\n\n\n

    Let\u2019s dive in!<\/p>\n\n\n\n

    1. Resize Images to Correct Dimension <\/h3>\n\n\n\n

    Properly Size Images With Software and Online Tools<\/h4>\n\n\n\n

    There are many free and premium software you can use to resize images to the correct dimensions. We are sharing two free options on Mac and Windows: <\/p>\n\n\n\n