The Shopify Smart Image is a component designed to optimize image delivery and speed up page rendering by requesting images from Shopify that best match the user's screen dimensions. This prevents unnecessarily large image files from being downloaded, which is especially beneficial for mobile users with slower connections.
📍📍📍 Note 📍📍📍
This component can only be used for images hosted by Shopify, as it leverages Shopify's query parameters to specify image dimensions.
Out-of-the-box, it functions just like the standard Image component: you simply need to provide a URL for an image hosted on Shopify via the URI property. However, it offers customization options for more granular control over both web and native platforms.
Functionality on Web
For web applications, this component generates "source sets," which define a list of different image URLs for various screen dimensions. The user's browser automatically selects the most appropriate size from this set and requests it from Shopify.
You can customize the source set using the following web-only properties: Starting Width, Intervals, and Increment Size.
Example: Using the defaults (Starting Width of 200, Intervals of 5, and Increment Size of 200) creates a source set with images at 200px, 400px, 600px, 800px, and 1000px wide.
Functionality on Native
For native applications, the Shopify Smart Image component will measure the user's screen and automatically request the most appropriate image dimensions from Shopify based on that measurement.
Available Properties
These properties are configured in the Settings Panel and control the source and platform-specific optimization of the image.
- URI (Settings Panel): The location/URL of an image hosted on Shopify. You should not include a width or height query parameter, as these will be set automatically by the component.
- Increment Size (Settings Panel [Web Only]): The increase in image width between each item of the source set.
- Default: 200
- Intervals (Settings Panel [Web Only]): The number of items (URLs) to include in the source set.
- Default: 5
- Starting Width (Settings Panel [Web Only]): The width of the smallest entry in the source set. This should be set to roughly the smallest the image will ever need to be displayed.
- Default: 200
- Priority (Settings Panel [Native Only]): An optional way to customize the order in which images are loaded on a screen. The order of precedence is High > Normal > Low.
- Default: Normal