Image Optimization Best Practices

Maintain fast and responsive websites on tablets, mobiles, and desktops by tailoring image sizes to adjust based on a device’s screen resolution. This section includes best practices to ensure images on your customer’s store are responsive, load faster, and have no layout shifts.

Ensure your customer’s browser picks responsive and optimized images based on their device screen size. When you build custom components, implement attributes, srcset and sizes, in the img element.

srcset defines a set of images based on the device's screen size and resolution. The srcset attribute helps you define multiple image sources of different widths, separated by a comma. Browser picks the most appropriate image, based on the screen size and resolution. The attribute sizes define the size of the image element. You can use any length value to represent the size, but not percentages. For example, the size can represent the absolute width (480 px) or a width relative to the viewport (50 vw).

For example, consider an image with these attributes:

From the example,

(product-480w.jpg) represents the image filename and type, and(480w)represents the image’s intrinsic width in pixels.
(max-width: 600px)480px represents that if the viewport width is up to 600 px, each image takes up 480-px width.

You can also provide a better user experience for customers using stores by specifying the srcset in the picture element to include a higher resolution version of the image. For example, consider a picture element where the srcsetattribute has x-descriptors and thesizes attribute isn’t defined.

If the device accessing the page has a standard or a low-resolution display, with one device pixel representing each CSS pixel, the product.png?width=400 image is displayed. Whereas if the device has a high resolution of two device pixels per CSS pixel or more, the product.png?width=800 image is displayed.

Ensure that your customer’s browser can reserve the appropriate amount of space in the layout before the images are fully loaded, thus preventing any disruptive shifts. Define the image's aspect ratio, which is the ratio of width to height. This example shows how width and height are defined for an image.

This example shows the width and aspect ratio attributes added to the image.

Ensure images have a high quality and small size, for a quicker loading time. Leverage the built-in image scaling CDN (Content Delivery Network) and CMS (Content Management System) capabilities. Automatically scale images, instead of uploading the same image in different sizes. By using the resource resolver from experience/resourceResolver, component developers can leverage a URL resolver that works for both CDN and CMS.
Here’s an example of how to scale images to the appropriate sizes for the various devices and screen resolutions.

If you prefer to customize an image with appropriate source elements, and not create the attributes srcset and sizes, use the experience-picture component. This component allows you to define multiple sources for the image based on factors such as device resolution, viewport size, and pixel density.

The component exposes these properties

Property	Type	Default	Description
alternativeText	string \| undefined	undefined	The alternative text for the image. This value is set to empty for decorative images.
loading	lazy \| eager \| undefined	eager	Determines how the image is loaded on a webpage.
url	string \| undefined	undefined	The placeholder image if the specified image isn’t found or unable to load.
images	ImageData[] \| undefined	undefined	The srcSet for each form factor or media query. Either use CustomizedImageData with your own media query or use the PredefinedImageData with the formFactor name and a media query based on the SLDS breakpoints, which is created automatically.

Consider this example that explains how to use the component.

Additionally you can use a utility method from experience/picture to create those srcSets based on the image widths of your component.

Here’s an example: