Bug 21502 - CSS Masks use PNG Alpha, which is sub-optimal. Support mapping grey-scale to opacity?
Summary: CSS Masks use PNG Alpha, which is sub-optimal. Support mapping grey-scale to ...
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 525.x (Safari 3.1)
Hardware: All All
: P5 Enhancement
Assignee: Nobody
Keywords: InRadar
Depends on:
Blocks: 95389 97134
  Show dependency treegraph
Reported: 2008-10-09 06:42 PDT by Matt Wilcox
Modified: 2024-06-03 01:42 PDT (History)
6 users (show)

See Also:


Note You need to log in before you can comment on or make changes to this bug.
Description Matt Wilcox 2008-10-09 06:42:46 PDT
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.
Comment 1 Dave Hyatt 2008-10-09 09:45:00 PDT
The reasoning was that existing images could be used without having to construct specialized mask images in greyscale.

Comment 2 Matt Wilcox 2008-10-09 10:57:26 PDT
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).
Comment 3 Mark Rowe (bdash) 2009-02-08 22:51:37 PST
Comment 4 Dirk Schulze 2012-11-21 22:10:06 PST
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.
Comment 5 Alex 2023-11-14 00:51:29 PST
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.
Comment 6 Antoine Quint 2024-06-03 01:42:08 PDT
Per the previous comment, closing this as configuration changed.