Repository navigation
Handle images with an alpha channel #105
Description
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.
Activity
zachleat commentedon Jun 25, 2021
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,
alphaOnlymaybe? And then it’d ignore output formats that don’t support alpha if the input has transparency. Also curious what would happen with SVG inputphiliprenich commentedon Jun 27, 2021
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
alphaOnlymaybe just knowing it wouldn't outputjpegwould be fine (even if that would be acceptable depending on the file's design)philiprenich commentedon Jun 29, 2021
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
jpegor 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
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
alphaOnlyPerhaps a blend of these - log the issue only if
alphaOnlyis 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 commentedon Feb 23, 2022
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
alphaFormatsOnlyproperty:If an image doesn’t have transparency, current behavior is maintained (and the value of
alphaFormatsOnlyis ignored).zachleat commentedon Feb 23, 2022
[-][discussion] Handle images with an alpha channel[/-][+]Handle images with an alpha channel[/+]zachleat commentedon Jan 2, 2025
Duplicate of #71
zachleat commentedon Jan 4, 2025
Changed my mind a bit here, I like having the transparency part of #71 as a separate issue. Reopening
zachleat commentedon Jan 4, 2025
Shipping with v6.0.0-beta.1.
Ruleset is:
formatsincludes at least one minimum viable transparency-friendly format, we filter out all formats that are not transparency-friendly.formatsdo 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 commentedon Jan 4, 2025
A little on the fence about not including webp in the minimum viable list but playing it safe there for now
zachleat commentedon Jan 4, 2025
This also adds a
formatFiltering: ["transparent", "animated"]option to opt out of format filtering for either transparency or animation or both #260Fixes 11ty#105, adds formatFiltering option