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. Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

    Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?