This module automatically adds width and height attributes with values taken from the selected Size for images added using the Media Library option.

For the width/height attribute/value pair to be added for images added using the Image URL setting, Width and Height values will have to be specified for the Image component in the Oxygen editor.

How is this Useful?

This will prevent the layout shift or jank caused by images that may initially appear as having zero height and then push down elements below the image as the browser determines the height and loads them.

By setting img elements’ max-width to 100% and height to auto via CSS (this is already added by the Essentials module of Toolbox) in conjunction with this new module will help you achieve a lower Cumulative Layout Shift score than it is by default in Oxygen.

For more info check out https://web.dev/optimize-cls/ and https://www.youtube.com/watch?v=4-d_SoCHeWE.

Top