Sia Karamalegos

Responsive images on Shopify with Liquid

Screenshot of “Responsive images on Shopify with Liquid”

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. 😍

  1. screenshot of The Case for JPEG XL

    Jon Sneyers avatar Jon Sneyers

    The Case for JPEG XL

    Jon gives a good overview of everything JPEG XL improves over other image formats. This article can be seen by some as biaised, as Jon is part of the team that created the format, but I really think it honestly shows clear advantages, and I hope it will help people understand JPEG XL support in browsers would be great.