14.2 C
Washington
Saturday, June 25, 2022
spot_img

6 Image Optimization Tips From Google Via @sejournal, @MattGSouthern

Date:

Share:

In a new video from Google, Developer Advocate Alan Kent shares six tips for optimizing images for ecommerce websites.

While the video is specifically aimed at ecommerce sites, the advice is applicable to any website that serves a large number of images.

Clocking in at over 14-minutes, Google’s video is a lot to digest if you’re busy working on websites.

Here’s a more palatable recap you can consume in under five minutes.

These are Google’s tips for making images load faster and more efficiently.

1. Eliminate Image Cumulative Layout Shift (CLS)

CLS refers to instances where content on the page visually moves, or shifts, from one place to another as it’s loading.

While this problem isn’t exclusively caused by images, they can contribute to the problem if used incorrectly.

In most cases, CLS is easy to spot by looking for movement on a page during loading, but there are several tools to measure it.

For more on CLS, how to measure it, and how to fix it, see our comprehensive guide:

2. Correctly Size Your Images

Pick the right width and height for your images, as larger files take longer to download.

Sizing images correctly can be complicated due to the ranges of screen sizes and resolutions that visit your site.

If the browser crops the image on its own, the download size ends up being longer than needed, which only drags things down.

One easy way to detect incorrectly sized images is by using the properly sized images section under Opportunities in the PageSpeed Insights report.

Once you’ve identified images that are larger than necessary, you can fix the problem with solutions such as responsive images.

3. Use The Best Image File Format

Think about the file format of your images, such as whether to use PNG, JPEG, or webP files.

The file format affects the file size, so choosing right one requires careful consideration.

There are pros and cons to weigh out for each format. For example, JPEG and webP tend to have lower file sizes, though the smaller size is achieved at the expense of image quality.

However, a degradation of image quality may not be noticeable by shoppers, and the speed benefit could be substantial.

To detect if your site can benefit from using a different image format, look in the serve images in next-gen formats section of the PageSpeed Insights report. This report lists images that can be converted to a more efficient file format.

4. Compress Images Appropriately

Use the right quality factor for your images to encode them efficiently while retaining the desired image quality.

The Encode Images Efficiently section of the PageSpeed Insights report can be used to identify images that are good candidates for compression optimization. The report also shows potential file size savings.

To find a quality factor you’re satisfied with, use your choice of image conversion tool on several images using different quality values and compare the before and after.

Google recommends the site Squoosh.app as an easy way of comparing images with and without compression.

5. Cache Images In The Browser

Tell the browser how long it can safely cache images.

When you return an image you can return an HTTP response header with caching guidance, such as how long it is recommended for a browser to cache an image for.

Again, you can use the PageSpeed Insights report to detect if the HTTP response cache headers have been set properly on your site.

The serve static assets with an efficient cache policy section identifies images that may benefit from caching improvements.

To fix issues on your site, see if you have platform or web server settings you can change to adjust the cache lifetime for images on your site.

If you don’t change images frequently, then you can set a long cache lifetime.

6. Correctly Sequence Your Image Downloads

As a more advanced tip, Google recommends correctly sequencing the order webpage resources are downloaded.

The following download order is advised:

  • Hero images at the top of the page
  • Other images above the fold
  • Images just below the fold

The rest of the images on a webpage can be lazy loaded.

To detect if your site is loading images efficiently you can refer to the PageSpeed Insights report. In the defer offscreen images section of the report you’ll see a list of images that could be loaded after other images.

For more detail on any of the above tips, see the full video from Google below:


Featured Image: Tada Images/Shutterstock

FREE GIFT







more like this

101 Lead Generation Ideas That Work: Ultra-Low Cost Sales And Marketing Str…

 Buy Now  Price: 1427 USD101 Lead Generation Ideas That Work: Ultra-Low Cost Sales And Marketing Str...var descGaugeInfo = {descST:(new Date()).getTime()}; window.onerror = function(message, url, line)...

Marketing With Video 101: The Essentials Which Lead To Success

If you have an enterprise, it's crucial for you to keep your mind on marketing. If people will not find out about your company and products, you will not be successful. In order to set yourself besides your competitors, try marketing with video. These guidelines will assist you to out.You can't have too many videos…

Advertise Your Business Plus Your Website Due To Search Engine Optimization.

Today, the businesses which were successful really know what SEO is all about. You need to understand how you can optimize your web site. In the following paragraphs can be obtained awesome suggestions to tweak or change your SEO techniques for the higher. Make use of the following advice to improve your company.When search engine…

Seeking Good Strategies To Market Through Email? Try These Ideas!

Most business people have concerns with attracting more customers while spending less money. Marketing via email can be a cheap and efficient way to do this. Continue reading to determine how email promoting works. The guidelines provided on this page will show you what you need to know.Your email should have a private tone. Like…
spot_img

LEAVE A REPLY

Please enter your comment!
Please enter your name here