Supporting `jpg` extension

[philiprenich]

The markdown issue is related to whitespace in the <picture> element. I’ll add an option to fix that with 0.7.3.

As for jpg versus jpeg I’m happy to entertain some discussion about aliasing jpg to jpeg in another issue but jpeg is the official extension and the only one we support at the moment.

Originally posted by @zachleat in https://github.com/11ty/eleventy-img/issues/41#issuecomment-754686536

I don't believe jpg is an unofficial format - it just wasn't in the initial first choice, but was the required and used extension on Windows at one point. Even though Mac and modern Windows support the 4 character extension, the 3 character version is so ubiquitous I think it's odd to not support it, or at least make a mention of the absence.

jpg is the extension used by most cameras and photo-editing software. I rarely come across jpeg in my day to day.

Not to presume the intentions of eleventy-img, but if the goal is to remove some of the hurdles of image formats and the technical knowledge of responsive images on the web, excluding jpg because it wasn't the original desired extension seems antithetical.

Obviously, there is a coding and maintenance overhead to aliasing one to the other, and I'm not here to try to burden anyone with further OSS maintenance, so I respect that a decision had to be made. Perhaps I note in the docs that acknowledges that there are two common extensions and for simplicity only one is supported?

[zachleat]

I’m confused, we definitely support it on incoming images (in fact, a jpeg could be mislabeled as anything and it should still work, or even not have a file extension at all and should still work). But we have to pick one extension to use in output—and for that we use jpeg.

[philiprenich]

Sorry for the lack of clarity. If I use a jpg input file and set the formats option to include jpg the piece that doesn't work is the generated HTML (this was noted in the linked issue, but should have been explicit in this one)

For example:

<picture>
  <source type="image/avif" srcset="/assets/help/test-392.avif 392w, /assets/help/test-784.avif 784w">
  <source type="image/webp" srcset="/assets/help/test-392.webp 392w, /assets/help/test-784.webp 784w">
  <source type="undefined" srcset="/assets/help/test-392.jpg 392w, /assets/help/test-784.jpg 784w">
  <img src="/assets/help/test-392.webp" width="392" height="513" alt="Test" loading="lazy" decoding="async">
</picture>

The issue is the type attribute being undefined. Even though the input and format are accepted and files generated correctly, the MIME type fails. I'm console logging the HTML for copy/paste and it took me a little while to find the issue. If I were using the plugin in an actual build process I think it would have been harder to debug.

Again, apologies for the out-of-context confusion.

[philiprenich]

In reading https://github.com/11ty/eleventy-img/pull/10 I see the issue around the mime types has come up before. To re-iterate, the issue is not the extension per-say, but allowing the jpg extension to output image/jpeg instead of undefined as a mime type. (since everything else with jpg works fine)

Alternatively, eleventy-img could throw an error when an unsupported format is used like an empty alt.

[zachleat]

A ha! I see what you mean. Yeah that seems like a bug to me—thanks for the extra clarity!

[zachleat]

Using formats: ["jpg"] will alias to "jpeg" and still use "jpeg" everywhere in the output object (starting in Eleventy Image 0.8.0)

[philiprenich]

That was quick, Thanks @zachleat ! And cheers for encouraging better clarity.

[tedw]

FWIW for anyone using the excellent eleventy-webpack starter project, the image shortcode will break for images using the jpg extension. Luckily there’s a simple fix I documented here https://github.com/clenemt/eleventy-webpack/issues/8.

@zachleat P.S. Thanks for all your hard work on 11ty!! I just started using it last year and have been loving it. Thanks also for your excellent blog and all the web font research—much appreciated! 🙏

[danielLee0721]

FWIW for anyone using the excellent eleventy-webpack starter project, the image shortcode will break for images using the jpg extension. Luckily there’s a simple fix I documented here clenemt/eleventy-webpack#8.

@zachleat P.S. Thanks for all your hard work on 11ty!! I just started using it last year and have been loving it. Thanks also for your excellent blog and all the web font research—much appreciated! 🙏

Couldn't agree more!

@zachleat Thank you!!!!

[architchandra]

Thanks, @zachleat for mapping jpg to jpeg. However, if I set formats to [null] to allow whatever format the user has added and a .jpg image is used, imagemeta.url outputs a .jpg url (matching the input file format, not the expected .jpeg format). That breaks rendering on the front-end.

My code:

const Imager = require('@11ty/eleventy-img');
module.exports = function image(src, className = '', alt = '', config = {}) {
  if (src) {
    src = './src/assets' + src;

    let defaultConfig = {
      widths: [null],
      formats: [null],
      outputDir: './public/media/',
      urlPath: '/media/',
    };
    config = Object.assign(config, defaultConfig);

    Imager(src, config);

    let imageMetaList = Imager.statsSync(src, config);
    let imageFormat = Object.keys(imageMetaList).slice(0, 1).pop();
    let imageMeta = imageMetaList[imageFormat].slice(-1).pop();

    return `<img class="${className}" src="${imageMeta.url}" width="${imageMeta.width}" height="${imageMeta.height}" alt="${alt}" loading="lazy" decoding="async">`;
  }
};

Using: Eleventy: 0.12.1 Eleventy-Img: 1.0.0 Node: 12.22.7