Work With Images in Shopify - Get Image CDN URL, Theme Assets URL, And Get Image Tag

Get the image CDN URL in Shopify

We can get the image URL from a Shopify liquid object with the help of image_url filter. It will return the Shopify CDN URL for an image. 

Syntax:

variable | image_url: width: number, height: number

In the above syntax, width specify the width of the image  and height specify the height of the image up to a maximum of 5760px. We have to specify either width or height or both. Otherwise, it returns an error.

Example:

{{ product | image_url:width: 100 }}

Output:

//cdn.shopify.com/s/files/1/0561/7470/6753/products/mens-shirt-light.jpg?v=1654824803&width=100

We can use image_url for the article, collection, image, line_item, product, and variant objects as well as their src property.

Crop the image in Shopify

We can use crop parameter to specify which part of the image to show if the specified dimensions is different from the original image aspect ratio. We can use top, center, bottom, left or right as a crop parameter. The default crop value is center.

{{ product | image_url: crop: 'left' }}

Specify image format

The format specify which file format to use for the image. The valid formats are pjpg and jpg.

{{ product | image_url: format: 'pjpg' }}

Shopify can do only the following conversions:

png to jpg 
png to pjpg 
jpg to pjpg

Get theme assets Image URL

In the Shopify theme, we can add images, in any format and any size to the assets folder within your theme directory. Mainly, these Images are used as background images in the Shopify theme.

We can get the reference to the assets folder using the asset_url filter.

{{ 'logo.png' | asset_url }}

Output:

//cdn.shopify.com/s/files/1/0222/9076/t/10/assets/logo.png

Get HTML Image Tag in Shopify

Using image_tag we can generate an HTML <img> tag for a given image_url.

{{ product | image_url: width: 200 | image_tag }}

Output:

<img src="//cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&amp;width=200" alt="Health potion" width="200" height="133">

By default, width and height attributes are added to the <img> tag depending on the dimensions from the image URL. We can override these attributes with the width and height parameters as given below.

{{ product | image_url: width: 400 | image_tag: width: 300 }}

Output:

<img src="//cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&amp;width=400" alt="Health potion" srcset="//cdn.shopify.com/s/files/1/0561/7470/6753/products/science-beakers-blue-light.jpg?v=1654828801&amp;width=352 352w" width="300">

By default, Shopify generates a srcset. However, you can create your own srcset.  We can remove the srcset attribute by setting the parameter to nil as given below.

{{ product | image_url: width: 200 | image_tag: srcset: nil }}

 Similarly, we can set preload, alt, class etc…