How To Load Responsive Images From Assets in a Shopify Theme

In this tutorial, you will learn:

1. Where to put your own images in a Shopify Theme.
2. How to add them efficiently and keep page load times snappy.

This is particularly helpful when building custom components with images to assist users in making selections.

Step 1 — Add a Master Image to the Assets Folder

Shopify Themes are segregated into distinct folders. The folder for static assets is the /assets folder. Paste your images into this folder:

📁 ./
├── 📁 assets/
│   ├── 📄 animations.js
│   ├── 📄 base.css
.
.
.
│   ├── 📄 master-image-1.png
│   ├── 📄 master-image-2.jpg
│   ├── (etc.)
.
.
.
│   ├── 📄 theme-editor.js
│   └── 📄 video-section.css

Unfortunately, the Shopify Theme structure must be flat, so there’s no neat organising by folder you can do here. The only possible strategy is to give related images a prefix so they group together:

📁 ./
├── 📁 assets/
│   ├── 📄 animations.js
│   ├── 📄 base.css
.
.
.
│   ├── 📄 my-section-master-image-1.png
│   ├── 📄 my-section-master-image-2.jpg
│   ├── (etc.)
.
.
.
│   ├── 📄 theme-editor.js
│   └── 📄 video-section.css

Step 2 — Use the asset_img_url Filter For Fast CDN Loads

To keep your theme snappy, you can use Shopify’s CDN to automatically resize your images for you. To do this, you can use the asset_img_url filter, like so:

<img src="{{ 'my-section-master-image-1.jpg' | asset_img_url: '800x' }}"

This filter returns your image’s URL on the Shopify CDN and lets you choose a particular size. I’ve opted for 800x which means 800px wide.

The asset_img_url filter can create multiple different image sizes, which are pre-processed and delivered quickly.

Step 3 — Use srcset for Responsive Image Loads

The asset_img_url filter can be applied multiple times to create a srcset. The srcset is a selection of different possible sources the browser can use for an image, depending on the screen size and resolution.

To add the source set, update your image code to this:

<img src="{{ 'my-section-master-image-1.jpg' | asset_img_url: '800x' }}"

The set above has three options:

• 400w means "this image is 400 pixels wide"
• 800w means "this image is 800 pixels wide"
• 1200w means "this image is 1200 pixels wide"

The browser makes the image choice for you, selecting the highest quality necessary for the best user experience.

Make it Lazy

The final trick is to add the loading="lazy" attribute:

<img src="{{ 'my-section-master-image-1.jpg' | asset_img_url: '800x' }}"

This prevents the image from being loaded until it comes into view. Resulting in faster page loads.

Final Words

That’s it! I worked on this for a customer store that sells beautiful maps. Images are a big part of the store, but they were starting to slow it down. This helped me keep it fast and user-friendly! Happy shop store speedy upping!