RFC: Tokens for remote images

[Aravind Reddy V]

As of eleventy-img v2.0.1, there is a pretty critical architectural bug related to remote images. Currently the hashes of remote images are generated using the URL, instead of the image content, and that creates a class of cache related bugs. Here is a Request For Comments on one way to solve it. Please leave your thoughts.

When returning stats for remote images, lets return a randomly generated token, and store a mapping from URL to tokens in memory. After all the remote images are downloaded, and their hashes are calculated, we do a string replace of the Token with the path of the image generated using the hash.

Example

Stealing code from the docs for this:

const Image = require("@11ty/eleventy-img");

(async () => {
  let url = "https://images.unsplash.com/photo-1608178398319-48f814d0750c";
  let stats = await Image(url, {
    widths: [300]
  });

  console.log( stats );
})();

The output is:

{
  webp: [
    {
      format: 'webp',
      width: 300,
      height: 300,
      filename: 'C90K6oSMsVss7XJ5pPpY-300.webp',
      outputPath: 'img/C90K6oSMsVss7XJ5pPpY-300.webp',
      url: '/img/C90K6oSMsVss7XJ5pPpY-300.webp',
      sourceType: 'image/webp',
      srcset: '/img/C90K6oSMsVss7XJ5pPpY-300.webp 300w',
      size: 10184,
    },
  ],
  jpeg: [
    {
      format: 'jpeg',
      width: 300,
      height: 300,
      filename: 'C90K6oSMsVss7XJ5pPpY-300.jpeg',
      outputPath: 'img/C90K6oSMsVss7XJ5pPpY-300.jpeg',
      url: '/img/C90K6oSMsVss7XJ5pPpY-300.jpeg',
      sourceType: 'image/jpeg',
      srcset: '/img/C90K6oSMsVss7XJ5pPpY-300.jpeg 300w',
      size: 15616
    }
  ]
}

we store a mapping {https://images.unsplash.com/photo-1608178398319-48f814d0750c: 'C90K6oSMsVss7XJ5pPpY-'} inside eleventy-img, and replace it with the actual file hash as post processing of eleventy generated images.

Please leave your comments about potential bugs you see in this system and your thoughts on improvement. Thank you.

[Aravind Reddy V]

Actually it doesn't need to be random tokens. We can keep the current behaviour and just return the hash of the URL instead of a randomly generated token. Then do pretty much the same thing.

Let's provide an option to enable or disable this new behaviour and keep it disabled by default, atleast until a new major version.