Sia Karamalegos avatar Sia Karamalegos

Responsive images on Shopify with Liquid

Screenshot of “Responsive images on Shopify with Liquid”

https://performance.shopify.com/blogs/blog/responsive-images-on-shopify-with-liquid#fixing-oversized-mobile-images

We launched the image_tag and image_url filters to help with generating responsive images. Before we dive in, what do these filters do? What are the differences between them?

image_url is how we access the Shopify image API to generate image files which are then served from the Shopify CDN. It can resize, crop, add padding, and generate multiple file formats.

image_tag is how we generate an HTML tag when given an image URL. It can create all the attributes for that tag while reducing the amount of boilerplate code you have to write.

I'm no longer using Liquid like I did when my sites where built with Jekyll, but I like that Shopify helps developers more easily manage responsive images.

And I love that Sia included a section about preventing oversized images on screens with resolutions higher than what we can see. 😍

  4. Note from 4 April 2024

    Most mentions of the magical CSS object-fit: cover; in development tutorials should be accompanied by a warning: in most situations, it means the browser will download an image that is larger than required (at least in one direction), and optimization on the server side could be a better option.