Preloading responsive images?

[ankushg]

Hi there!

Trying to improve the LCP time of my site. The largest element happens to be an image, which I'm using Jekyll Picture Tag for.

I was wondering if there's a way to use JPT to also generate a preload tag with an imagesrcset field

<link
  rel="preload"
  as="image"
  href="wolf.jpg"
  imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w"
  imagesizes="50vw"
/>

[rbuchberger]

Short term, you could build this using a naked_srcset

That said, this would be a good idea for a proper output format. It's easy to add link output format, but you'd need to basically copy-paste the original preset and slightly modify it. You'd also need to add two picture tags, one for the link and one for the actual picture.

I'm thinking we can add a simple output format first since it's easy, and then add the ability to generate link preloads for a given preset without duplicating all the configuration.