Hello there. I'm having trouble making the plugin work.

I'm getting this error on the terminal:

TemplateWriterWriteError was thrown

ENOENT: no such file or directory, stat '/images/uploads/meBio.png'

The path exists and it's correct, so I don't get the error. I'm a self taught programmer and sometimes is very hard to understand why things don't work. (the project does not have a "src" folder)

Thank you for your time.

The code:

const img2picture = require("eleventy-plugin-img2picture");

module.exports:

cfg.addPlugin(img2picture, {

  eleventyInputDir: "//",
  imagesOutputDir: "_site",
  urlPath: "_site/images/",
  extensions: ["jpg", "png", "jpeg"],
  formats: ["webp", "jpeg"],
  sizes: "100vw",
  minWidth: 150, // Minimum width to resize an image to
  maxWidth: 700, // Maximum width to resize an image to
  widthStep: 150, // Width difference between each resized image
  fetchRemote: false, // When true, remote images are fetched, cached and optimized.
  dryRun: false, // When true, the optimized images are not generated. Only HTMLs are processed.

  // Function used by eleventy-img to generate image filenames
  filenameFormat: function (id, src, width, format) {
    const extension = path.extname(src);
    const name = path.basename(src, extension);

    return `${name}-${id}-${width}w.${format}`;
  },

  cacheOptions: {},
  sharpOptions: {},
  sharpWebpOptions: {},
  sharpPngOptions: {},
  sharpJpegOptions: {},
  sharpAvifOptions: {},

});

Hello :)

I think I've uncovered a bug whereby using images via https doesn't result in images being fetched, optimised and rendered in tags.

My config is as follows:

./src/config/plugins/image.js

module.exports = {
	eleventyInputDir: "./src",
	imagesOutputDir: "public/assets/images",
	urlPath: "/assets/images/",
	fetchRemote: true,
	minWidth: 50,
	maxWidth: 2000,
	hoistImgClass: true,
	widthStep: 200,
	sizes: "100vw",
	sharpAvifOptions: {
		quality: 95,
	},
	sharpWebpOptions: {
		quality: 95,
	},
	sharpJpegOptions: {
		quality: 95,
	},
};

I'm then using eleventy with a Shopify plugin to fetch images and render them in the form of cards, using a Nunjucks macro. I have tested this using just an image tag, and the same still applies. The macro is called like so:

pages/product-listing.html

{% from 'components/listed-product.html' import listedProduct %}
...
  <section class="plp-listing">
    <ul class="plp-listing__container">
      {% for product in shopify.products | reverse %}
        {{ listedProduct(
          product.images.nodes[0].src,
          product.title,
          "$" + product.variants.nodes[0].priceV2.amount | formatPrice,
          '',
          "/products/" + product.handle)
        }}
      {% endfor %}
    </ul>
  </section>

Then this listed-product macro is as follows

_includes/components/listed-product.html

{% macro listedProduct(src, name, price, styles, href) %}
  <li class="listed-product {{ styles }}">
    <img class="listed-product__image" src="{{ src }}" alt="{{ name }}">
    <p class="listed-product__title">{{ name }}</p>
    <p class="listed-product__price">
      {{ price }}
    </p>
    <a href="{{ href }}" class="listed-product__button">View Product</a>
  </li>
{% endmacro %}

Finally, the built HTML in /public is so:

  <li class="listed-product ">
    <img class="listed-product__image" src="https://cdn.shopify.com/s/files/1/0748/0872/1690/files/edit-9.jpg?v=1689013081" alt="Proverbs Woman">
    <p class="listed-product__title">Proverbs Woman</p>
    <p class="listed-product__price">
      $55.00
    </p>
    <a href="/products/proverbs-woman" class="listed-product__button">View Product</a>
  </li>

Let me know if you need anything further from me :)

Hello, I want to apply a sharp placeholder to the images generated by this plugin.

See this issue for the specific placeholder manipulation that we are after.
lovell/sharp#1532

Is it possible to apply existing sharp placeholder options to this plugin or will an external library be required?

Thanks,

According to MDN (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture)

The <img> element serves two purposes:

It describes the size and other attributes of the image and its presentation.
It provides a fallback in case none of the offered <source> elements are able to provide a usable image.

the <img> tag within a <picture> tag is still used to display whichever source is selected by the browser. Because of this the classes should still be on the <img> tag for full "styleability" or there should be a flag enabling the user to keep classes on the <img> tag.

In my case I am unable to achieve the same styling effect using Tailwind classes on an image using img2picture that I previously could but when I manually move the classes to the <img> tag with developer tools it works.

Another reason to do this is that in the case of a browser compatibility issue with <picture>, the <img> will still have styling.

This is a bug in sharp, the main package elevent-img uses.

Reference issues:

• 11ty/eleventy-img#91
• lovell/sharp#2666

I've attached a zip archive of a test project to demonstrate this issue. If you comment-out the plugin in .eleventy.js and run yarn start, the html is generated fully but no images generated (obviously). If you enable the img2picture config again in .eleventy.js the plugin does its thing, generates images, but the only thing in the html file is the picture - layouts/base.njk is not included in the resulting index.html file. As far as I can tell I have configured the plugin correctly. What is it that it does not like about my sample config?

const img2picture = require("eleventy-plugin-img2picture");

module.exports = config => {
    config.addPlugin(img2picture, {
        eleventyInputDir: "./src",
        imagesOutputDir: "./dist/images/processed",
        urlPath: "/images/processed",
        filenameFormat: function (id, src, width, format, options) {
            return `${id}-${width}.${format}`;
        }
    });

    return {
        templateFormats: ["md", "njk", "html"],
        markdownTemplateEngine: 'njk',
        dataTemplateEngine: 'njk',
        htmlTemplateEngine: 'njk',
        dir: {
            input: './src',
            output: './dist',
            includes: "_includes"
        }
    };
};

img2picture-test.zip

Hey Saneef,

hope addressing and discussing that here on GitHub is the right place.

If I do understand that right - from the README.md and from playing around with the options, the option "cacheOptions" is for specifying settings for the cache related to the fetch option - so to cache fetched remote images.

It is NOT - please correct me if I am wrong and tell me, what I have not seen or understood - to cache the images generated via the plugin.

Is a functionality like that planned or on the roadmap?

Because I think it would be a very good thing regarding to energy usage (climate), build minute budgets (small organizations) and so on.

Happy to read your thoughts about that. :)

Hello!

First off - amazing plugin. No other gives such fine-grained control over the image output while also being so easy to use.

However, the only thing I haven't been able to do is to pass a value on the img tag to get an alt="" to render.

There are some valid reasons for this - decorative or background images don't need alt text. I've tried passing alt="", alt=" " and looked through the docs for a data- attribute, but all methods still give me validation errors.

Ideally, I'd be able to use a data- attribute or pass alt="" and have alt="" returned (the latter returns alt on it's own, which Google doesn't like).

Let me know if I can provide more info :)

When using imagesOutputDir option, the plugin will still export all images into _site in project root. My output directory, defined by eleventy is .www and when I set this as my image settings:

imagesOutputDir: ".www/static",

The images are still exported to _site.

Is this the nature of the plugin or am I missing something along the way?

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?

I have added this plugin to my project but I get an error when building it.

I've set it up according to the instructions and added it using:

eleventyConfig.addPlugin(img2picture, {
    eleventyInputDir: "", // Eleventy input folder.
    imagesOutputDir: "_site/assets/images/", // Output folder for optimized images.
    // URL prefix for images src URLS.
    // It should match with path suffix in `imagesOutputDir`.
    // Eg: imagesOutputDir with `_site/images` likely need urlPath as `/images/`
    urlPath: "/assets/images/",
    extensions: ["jpg", "png", "jpeg"],
    formats: ["avif", "webp", "jpeg"],
    sizes: "100vw",
    minWidth: 150,
    maxWidth: 1440,
    widthStep: 150,
    fetchRemote: false,
    dryRun: false,

    filenameFormat: function (id, src, width, format) {
      const extension = path.extname(src);
      const name = path.basename(src, extension);

      return `${name}-${id}-${width}w.${format}`;
    }
  });

The error I get is as follows:
https://pastebin.mozilla.org/WjARFvy6

All my images are placed in two places, just for testing. So they are in
assets/images/
and the output folder
_site/assets/images

I have tried setting the input and output directories to all kinds of values but I get the same error all the time.

What am I doing wrong?

With that config i get:

     formats: ['avif', 'jpeg'],
      sharpAvifOptions: {
        lossless: true,
        quality: 10
      },

160K 17 Mar 01:54 _site/assets/images/blog/subsetter-kJ-yxM3qvS-1240w.avif
86K 17 Mar 01:54 _site/assets/images/blog/subsetter-kJ-yxM3qvS-1240w.jpeg
60K 17 Mar 01:54 _site/assets/images/blog/subsetter-kJ-yxM3qvS-640w.avif
33K 17 Mar 01:54 _site/assets/images/blog/subsetter-kJ-yxM3qvS-640w.jpeg

I think given the lossless and quality settings and output, it is not passed to sharp correctly.

When i use sharp cli it results in:

⚡ ⇒ npx sharp -i subsetter-kJ-yxM3qvS-1240w.jpeg -o optimized.avif -q 10 -f heif
10K 17 Mar 01:57 optimized.avif