Best Practices for Specifying Image and Video Dimensions to Prevent CLS

To prevent Cumulative Layout Shift (CLS), the best practice for specifying image and video dimensions is to always explicitly set the width and height attributes on these media elements. This allows browsers to allocate the correct amount of space on the page before the media loads, preventing layout shifts caused by late loading of images or videos.

Additional key points include:

• Use the CSS aspect-ratio property to maintain consistent space for media, especially useful for responsive designs and lazy-loaded content.
• For responsive images, specify consistent aspect ratios across different image sizes and use the srcset attribute to help browsers select the appropriate image size without causing layout shifts.
• When lazy loading images or videos, dimensions must still be defined to reserve space and avoid unexpected content jumps.
• Reserve space for dynamic content such as ads by setting fixed dimensions or placeholders to prevent layout shifts when this content loads.
• Manage font loading properly (e.g., using font-display: swap) to avoid layout shifts caused by invisible or reflowing text, which complements stable media dimensions.

In summary, always specifying width and height attributes, using aspect-ratio CSS, and reserving space for dynamic content are essential to prevent CLS caused by images and videos. This ensures a stable, smooth user experience without unexpected content jumps during page load.