Liquid and the Shopify image CDN can help make image generation and markup easier. The image_tag filter (docs) in Liquid should be your go-to choice for rendering an HTML <img> tag. It generates all the markup necessary to make your image responsive. This demo starts from the perspective of delivering responsive images, and shows how the image_tag behaves with different attributes so that we can achieve our optimization goals.
Note that we always feed an image_url into the image_tag. The image_tag uses Shopify's image CDN API to manipulate your images to provide different sizes and formats. It can also perform other tasks like cropping. Learn more in the docs.
Jump to a section:
- Plain
image_tag - Adding
srcsetto animage_tagnaively - Fixing the display width of our image
- Adding the
sizesattribute - Using
<picture>for art direction - Fixing oversized mobile images
Oops, you need to pick an image in the theme.