Image_url | image_tag: preload - does not work

Retired Boards Appdev Store Design
1

I am using the image_url feature with image_tag, but when I apply the preload filter, I do not see any additional links being added to the head of the document.

Filter documentation:
https://shopify.dev/docs/api/liquid/filters/image_tag#image_tag-preload

Example:

{{ image_standard | image_url: width: image_standard.width | image_tag: preload: true }}

I do get a rendered image in my template as expected from the image_tag property… but I don’t see any proof of that image being preloaded. I would expect to see something a link tag with a path to the image as described in the documentation.

Link: <IMAGE_URL>; rel=preload; as=image
Link: <IMAGE_URL>; rel=preload; as=image; imagesrcset=ADDITIONAL_IMAGE_URL 352w; imagesizes=40vw

Anyone else having this issue, or can someone show me a snippet example of preload working with a screen shot of the request log or document head with the preload reference.

4 Likes
2

I am experience the same issue.

3

Figured this one out, I had the same expectation that I would see a link tag in the head. Adding a clarification here in case anyone comes across the same thread while Googling.

Turns out I misunderstood the docs. Shopify says “a resource hint is sent as a Link HTTP header”. This is not the same as a link tag being added to the head. Instead, as part of the HTTP header when a request is made to retrieve the site, Shopify does include the preload statement for the image.

In Chrome developer tools, you can see this in the network tab on the initial document request. After expanding the Response Headers section, you can see the image preload data. I’ve confirmed this works as well, the image is downloaded a lot earlier when this header is used.

3 Likes