Storefront > Themes > Global Theme Settings > Advanced Theme Settings
How to enable Image Dimension Tags
Overview
Lazy Loading enables pages to load faster, improves resource management, and improves viewability by offloading images and ads until they can actually be shown in the window.
Image Dimension tags can also help by telling the browser how much space is needed for each image before the page loads the image. This allows the browser to reserve the space on the page and prevents the layout from shifting once the image is loaded.
How Lazy Loading Works
Enabling lazy loading will add the [loading="lazy"] attribute to images.
Images with lazy loading tell the browser to defer loading the image if it’s not on the user’s screen. It will not load the image until the user scrolls near it. Since the page has fewer images that need to be loaded initially, the initial page load time is lower, increasing performance. It prevents the loading of images that may never enter the viewport in the time the user spends on the page.
Here’s an example image tag:
<img id="PhotoThumbnails_imgPhoto" class="card shadow-none" loading="lazy"
src="/resize/shared/images/product/bold-coffee-12oz.jpg?bw=1000&w=1000&bh=550&h=550">
How to enable Lazy Loading
As a system administrator, navigate to Storefront > Themes > Global Theme Settings and scroll to Advanced Theme Settings.
When Enable Image Lazy Loading is clicked, click the Save button to confirm your changes. The lazy loading attribute will be added to all images to improve site performance.
You can further improve your site’s performance by adding image dimension tags to your images.
How Image Dimension Tags Work
Images impact loading times, but the space images take also affect the layout of your site. If you’re using Lazy Loading you can also use Image Dimension Tags to reserve space on a page for when an image is loaded and stop any layout shifts from happening while customers are browsing your storefront.
Here is an example image tag:
<img id="PhotoThumbnails_imgPhoto" class="card shadow-none" height="550" width="550"
src="/resize/Shared/images/sample/products/Party%20Supplies/WPS50829.jpg?bw=550&w=550&bh=550&h=550"
style="border-width:0px;">
How to enable Image Dimension Tags
You can enable Image Dimension Tags and have the tags automatically applied to your images used in your storefront by navigating to Storefront > Themes > Global Theme Settings and scrolling down to Advanced Theme Settings as we did to enable Lazy Loading.
Enable the Render Image Dimensions in Markup option and click the Save button to enable Image Dimension Tags.