Preventing CLS

 While you’re at it, check if your theme enforces width and height attributes on img tags. This helps avoid cumulative layout shift (CLS), one of Google’s metrics to determine your Core Web Vitals scores. CLS happens when elements move around during loading because image boundaries haven’t been defined. This causes jerkiness, and that’s a sign for Google that your user experience is lacking. You can try this by running your online store through Google’s page quality checks at web.dev/measure. On that site, you can also learn more about why and how to optimize your site for CLS.

<img alt="screenshot" src="screenshot.jpg" width="100" height="200">
<img
  alt="{{ image.alt }}"
  src="{{ image.src }}"
  width="{{ image.width }}"
  height="{{ image.height }}"
>

Many sites still have visual elements that can use a proper width and height specification to prevent CLS

Add alt text and good file names

When working on your product images, you need to take care of other things: alt texts and file names. Both describe the image for search engines. In addition, alt text is important for accessibility reasons as well. Screen readers use this to read out what’s on the image.

For alt text, keep it short and sweet. Describe the image in proper wording and don’t overdo it on the keywords.

You can add an alt text in Shopify’s media editor

File names also help Google make sense of your image. Suppose your file name is DSC37612.jpg, which says nothing about what the image contains. Add something useful. So, if you sell iPhones and the photo shows a close-up of the back camera of an iPhone 13, you can give the file a name like this: iphone_13_back_camera_closeup.jpg. You see this, and you know right away what the image contains. Try to add relevant keywords as well if it makes sense.

Just as with the proper compression of images, give your pictures an appropriate file name before uploading them to Shopify, as it’s hard to fix once they’ve been uploaded. Of course, you can also delete the image you’ve already uploaded and re-upload the proper one.