Handle images with an alpha channel

[philiprenich]

I think it might be useful if eleventy-img helped with transparent images. A PNG can be used as a source and will output alpha channels on AVIF and WebP, but if you've requested a JPEG output then you get a little bit screwed.

What I've done in my configuration currently is checked the extension and swapped my output format to match the input, but that doesn't seem great. I think I'll change that out and require the sharp package and do a sharp.hasAlpha(), but it seems like this could be a useful thing to have built in to eleventy-img.

I'm not exactly sure what the best behaviour should be, but that's the point of opening this ticket for discussion.

Perhaps it should throw an error if the input uses alpha and a source like jpeg doesn't support it? Or warn and ignore the jpeg format?

Thoughts around this? Is it outside of the scope and goals of the plugin? Better ways to do it? I'd be curious what other use cases people have come up against with alpha channel images and what they did to solve them.

[zachleat]

I love this. I don’t think there is necessarily a one-case fits all default here but I think it’s worth starting as an opt-in option, alphaOnly maybe? And then it’d ignore output formats that don’t support alpha if the input has transparency. Also curious what would happen with SVG input

[philiprenich]

I'm not SVG expert, but I just ran a couple of tests with Sharp against a few SVGs, including just a solid rectangle I made, and all said they had alpha, even if nothing was showing. Not surprised, but may make this a little harder to pin down exactly. As a user option though if you did alphaOnly maybe just knowing it wouldn't output jpeg would be fine (even if that would be acceptable depending on the file's design)

[philiprenich]

Was thinking sorting out use cases might be the easiest way to proceed here. Thinking out loud here so others can chime in.

Use Cases

In both cases, the user has requested jpeg or another non-alpha supporting format.

An image with unknown transparency

For whatever reason, I have an image I didn't create and therefore don't realise it has transparent sections (OSes and browsers aren't always good and highlighting this unless you're in image editing software)

In this case I would like Eleventy-img to notify me of the potential issue

Solution options

• The plugin could warn and continue. This would be a non-breaking change
• The plugin could error and fail. This would be a breaking change

An image with known transparency

In the case I am aware I have a transparent image, I want to tell Eleventy-img to only output alpha supporting formats.

Solution options

• Opt-in config, ie, alphaOnly

---

Perhaps a blend of these - log the issue only if alphaOnly is undefined (or falsey?).

Part of me really wants to error & fail because jpegs will look broken, but part of me wants to let the dev make that final decision and just try to nudge them along.

Btw, I'll be happy to PR this if it's useful enough 👍🏼

[zachleat]

Putting this one in the enhancement queue but I’m still a fan of it. I think we’ll need to have a very clear about the behavior up front though.

Specifically, let’s document what happens when an input image has transparency, perhaps under a alphaFormatsOnly property:

• Filter out output formats that don’t support transparency
• Throw an error if no output formats are left

If an image doesn’t have transparency, current behavior is maintained (and the value of alphaFormatsOnly is ignored).

[zachleat]

This repository is now using lodash style issue management for enhancements. This means enhancement issues will now be closed instead of leaving them open.

View the enhancement backlog here. Don’t forget to upvote the top comment with 👍!

[zachleat]

Duplicate of #71

[zachleat]

Changed my mind a bit here, I like having the transparency part of #71 as a separate issue. Reopening

[zachleat]

Shipping with v6.0.0-beta.1.

• Minimum viable transparency friendly formats: png, gif, svg
• Transparency friendly formats: png, gif, webp, avif, svg

Ruleset is:

1. If formats includes at least one minimum viable transparency-friendly format, we filter out all formats that are not transparency-friendly.
2. If formats do not include at least one minimum viable transparency-friendly format, we use the original list of formats (which may include non-transparent formats who will have alpha channel flattened, which was the previous behavior).

When filtering changes formats, debug messages are logged.

[zachleat]

A little on the fence about not including webp in the minimum viable list but playing it safe there for now

[zachleat]

This also adds a formatFiltering: ["transparent", "animated"] option to opt out of format filtering for either transparency or animation or both #260