{"id":2907,"date":"2022-05-10T11:13:41","date_gmt":"2022-05-10T11:13:41","guid":{"rendered":"https:\/\/seopolarity.com\/blog\/?p=2907"},"modified":"2022-05-10T11:13:44","modified_gmt":"2022-05-10T11:13:44","slug":"six-image-optimization-tips-from-google","status":"publish","type":"post","link":"https:\/\/seopolarity.com\/blog\/six-image-optimization-tips-from-google\/2022\/","title":{"rendered":"Six Image Optimization Tips From Google"},"content":{"rendered":"\n

Developer Advocate Alan Kent shares six tips for optimizing images for eCommerce websites in a new video from Google.<\/p>\n\n\n\n

While the video is geared toward eCommerce websites, the advice can be applied to any website that serves a large number of images.<\/p>\n\n\n\n

If you’re working on a website, Google’s video is a lot to take in at over 14 minutes.<\/p>\n\n\n\n

Here’s a more palatable recap that will take you less than five minutes to read.<\/p>\n\n\n\n

These are Google’s recommendations for making images load more quickly and efficiently.<\/p>\n\n\n\n

1. Remove the cumulative image layout shift (CLS)<\/h2>\n\n\n\n

CLS refers to situations where the page’s content visually shifts from one location to another as it loads.<\/p>\n\n\n\n

While images do not cause the problem, they can contribute to it if they are used incorrectly.<\/p>\n\n\n\n

CLS can usually be detected by looking for movement on a page while it is loading, but there are several tools available to measure it.<\/p>\n\n\n\n

Read Google Isn\u2019t Concerned With What\u2019s In An Image<\/a>.<\/p>\n\n\n\n

2. Size Your Images Properly<\/h2>\n\n\n\n

Because larger files take longer to download, choose the right width and height for your images.<\/p>\n\n\n\n

Because of the wide range of screen sizes and resolutions that visit your site, correctly sized images can be difficult.<\/p>\n\n\n\n

If the browser crops the image on its own, the download size is larger than necessary, slowing things down even more.<\/p>\n\n\n\n

The properly sized images section under Opportunities in the PageSpeed Insights report is a simple way to detect incorrectly sized images.<\/p>\n\n\n\n

Once you’ve identified images that are larger than they need to be, you can use solutions like responsive images to solve the problem.<\/p>\n\n\n\n

3. Select the most appropriate image file format<\/h2>\n\n\n\n

Consider your image files formats, such as whether to use PNG, JPEG, or web files.<\/p>\n\n\n\n

The file format has an impact on the file size, so picking the right one requires thought.<\/p>\n\n\n\n

Each format has advantages and disadvantages to consider. JPEG and webP, for example, have smaller file sizes, but the smaller size comes at the expense of image quality.<\/p>\n\n\n\n

However, shoppers may not notice a decrease in image quality, and the speed advantage could be significant.<\/p>\n\n\n\n

Look in the serve images in the next-gen formats section of the PageSpeed Insights report to see if your site could benefit from using a different image format. Images that can be converted to a more efficient file format are listed in this report.<\/p>\n\n\n\n

4. Image Compression Appropriately<\/h2>\n\n\n\n

To efficiently encode your images while maintaining the desired image quality, use the appropriate quality factor.<\/p>\n\n\n\n

The PageSpeed Insights report’s Encode Images Efficiently section can be used to find images that are good candidates for compression optimization. The report also illustrates possible file size reductions.<\/p>\n\n\n\n

Use your preferred image conversion tool on several images with different quality values and compare the before and after results to find a quality factor you like.<\/p>\n\n\n\n

Google suggests using the site Squoosh.app to compare images with and without compression.<\/p>\n\n\n\n

5. Use The Browser To Save Images<\/h2>\n\n\n\n

Set how long the browser can safely cache images.<\/p>\n\n\n\n

When you return an image, you can include caching guidance in the HTTP response header, such as how long a browser should cache an image.<\/p>\n\n\n\n

You can use the PageSpeed Insights report to check if your site’s HTTP response cache headers are set correctly.<\/p>\n\n\n\n

The section on serving static assets with an efficient cache policy identifies images that could benefit from caching enhancements.<\/p>\n\n\n\n

Check your platform or web server settings to see if you can change the cache lifetime for images on your site to fix issues.<\/p>\n\n\n\n

You can set a long cache lifetime if you don’t change images frequently.<\/p>\n\n\n\n

6. Arrange Your Image Downloads Properly<\/h2>\n\n\n\n

Google recommends correctly sequencing the order in which webpage resources are downloaded as a more advanced tip.<\/p>\n\n\n\n

The following download sequence is recommended:<\/p>\n\n\n\n

  • Top-of-the-page images of heroes<\/li>
  • Above the fold: more images<\/li>
  • Below the fold are some images.<\/li><\/ul>\n\n\n\n

    The remaining images on a webpage can be loaded slowly.<\/p>\n\n\n\n

    The PageSpeed Insights report can help you figure out if your site is loading images quickly. A list of images that could be loaded after other images can be found in the report’s defer offscreen images section.<\/p>\n\n\n\n

    See the full Google video below for more information on any of the above tips:<\/p>\n\n\n\n

    \n