Bug 21502 – CSS Masks use PNG Alpha, which is sub-optimal. Support mapping grey-scale to opacity?

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Matt Wilcox]

Reporting here as that's what the page at http://webkit.org/blog/181/css-masks/ asks us to do.

CSS Masks appear to use Alpha channels to operate, which means we must use PNGs? PNGs with full alpha channels are 24bit, which makes the file size huge. Why can't Webkit map grey-scale to opacity so we can use JPGs or GIFs instead? white = transparent, black = opaque. This is what most 3D applications use to describe transparency.

[Dave Hyatt]

The reasoning was that existing images could be used without having to construct specialized mask images in greyscale.

[Matt Wilcox]

Why would anyone have an existing image with existing alpha that would be suitable for this effect? I don't want to use this just to mask an image (in which case I may as well just spit out a 24bit Alpha enabled PNG in the mark-up), I want to use it to mask content areas too.

Any way you cut it, you have to make an image with a greyscale mask - if only in order to make the Alpha PNG itself in the first place (e.g., you create the alpha mask in photoshop by creating a greyscale mask and applying it to the layer).

Would it not be better to cut the complication and file-size overheads out by allowing any image file to act as a mask based on the luminance values of the image pixels. This lowers the barrier to entry significantly (i.e, you don't need to understand how to make an Alpha image in an image manipulation program), and means file sizes are a lot lower (JPGs are a lot smaller than 24bit PNGs).

[Mark Rowe (bdash)]

<rdar://problem/6567732>

[Dirk Schulze]

CSS Masking specification allows switching between luminance and alpha masks. Given that most tools create grayscale mask images, it makes sense to support luminance masks as well.

[Alex]

It is now supported via mask-mode since Safari 15.4, so this issue should be closed as resolved. Although surprisingly to me, both Safari and FF consider white to be opaque and black to be transparent, contrary to what I was used to in other apps.

[Antoine Quint]

Per the previous comment, closing this as configuration changed.