eleventy-plugin-img2picture icon indicating copy to clipboard operation
eleventy-plugin-img2picture copied to clipboard

Published 20 hours ago • verified publisher icon saneef

Add possibility to preload responsive images using data-img2picture-preload

Open ItsEthanH opened this issue 1 year ago • 3 comments

Hello :)

Was wondering if it was possible to create a responsive preload tag based on the presence of some attribute on tags, such as data-img2picture-preload

I've seen how this can be done here: https://web.dev/articles/preload-responsive-images

The issue is, that with the default way of naming images, the hash at the end of the image isn't guaranteed, and creating a responsive preload with these randomly generated hashes is difficult.

I could change the filenameFormatter option to use a more predictable filename, but this prevents the eleventy-img disk cache: https://www.11ty.dev/docs/plugins/image/#disk-cache

Therefore, would it be possible to "map" the srcset/sizes attribute from the tag, create a responsive preload, and add that to the

of the associated html document, please?

I can try submitting a PR?

ItsEthanH avatar Mar 26 '24 16:03 ItsEthanH

Hey @ItsEthanH, thanks for bringing this idea.  

Please do try, and send a PR.

I haven't really delved into the idea. But, here are some thoughts that popped in my head after reading your notes.

  1. The generateImage() returns a string with generated <picture>...<picture> HTML. Maybe, we could return an object with { picture: "<picture>...", otherDataNeededForPrelodedTag: ""}. This can be used later in the calling replaceImages() to generate <link rel="preload" ... /> tags and inserted into the HTML document (content).
  2. Since the plugin is made for different file formats for each image, like avif, webp, and jpg, which one can be used in the <link rel="preload" ... /> tag? How can we figure out the media attribute? Is it possible from the sizes attribute?
  3. If we have figured out the key things, a minor enhancement: we can insert the <link rel="preload" ... /> tags at the end of <head> tag, by default. Additionally, we can allow users to use HTML comment like <!-- img2picture:preload-tags --> to pinpoint the location to insert the preload tags.

Cheers.

saneef avatar Mar 26 '24 18:03 saneef

Hey @saneef!

Thanks for the pointers. Just wanted to drop a quick comment to say that I'll take a look at this over the weekend and try to submit something.

I'm using your wonderful plugin in a project of mine where this kinda functionality would be really helpful, both to myself and to people making use of the project. Just don't want you to close it down, when I fully intend on adding this very soon :)

ItsEthanH avatar Mar 28 '24 13:03 ItsEthanH

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

stale[bot] avatar Apr 27 '24 14:04 stale[bot]