Adding alpha channels or chroma keys to JPEG images
Author(s) and publish date
- By:
-
-
Dave Raggett
-
- Published:
The GIF image format supports transparency, whilst PNG supports translucency, but neither are particularly good for photos, which compress much better with JPEG. A work around is to use the HTML5 canvas 2D context. The chroma-key.js library automatically applies alpha channels or chroma keys for all images with the associated attributes. The class and id attributes are copied to the generated canvas elements, so if you load the library before your script that adds event handlers all will be well, likewise for style rules that match the id or class values, but note that the img element will have been replaced by a canvas element. To support accessibility, the image's alt attribute is copied to the content of the canvas element. The data- prefix is used for the new attributes as per the HTML5 specification support for custom attributes.
This work is licensed under a Creative Commons Attribution 3.0 Unported License.
I did see the page Alpha and Chroma-key demo
I did see the source code, page and script
Question
Why if I save the page images they are png ?
neither the html or the javascript is converting to PNG
so, in this case, using Firefox to display the page,
I might think that Firefox converts the image to PNG in its HTML implementation with the corresponding attributes.
If this is the case, it would be better to change the JPG to PNG in an image editor, doesn't it?
No need to load the library-convertion, no need to add those tag attributes.
Am I right?
Now in the case of Explorer, the script and the tags with those attributes don' work
The example is a bit unfortunate, as it doesn't show superiority of the solution over PNG. The example images takes 77KB+8KB as JPEG, but can be converted to a single 24KB PNG8 without perceptible loss of quality.
The other JPEG+alpha hack also loses out to PNG8: 55KB as JPEG vs 27KB as PNG8.
Lossless 24-bit PNG is very poor for photos indeed, but lossy PNG can be competitive with JPEG.
So my recommendation is to try ImageAlpha (or pngquant 1.7+) first.
Avenida, I presume you are asking your browser to save the web page after it has loaded. A quick experiment shows that at least for the chromium browser, it only saves the HTML, Script and the PNG image used for the creative commons license. The content of the canvas elements are not saved. The same occurred when trying with Firefox. Of course this behavior may vary from browser to browser.
Kornel, you make a good point about the virtues of PNG8, which is essentially very similar to GIF in supporting an 8 bit indexed palette, and transparency, but note that like GIF, it does not support translucency. As such, PNG8 could be used in place of JPEG plus chroma-key, but not for JPEG plus alpha channel.
In principle, you can used dithered transparency as a low quality alternative to translucency. I used GIMP to see how well the "town.jpg" looked when converted to PNG8, and note that it came out to very close to the same file size as the original JPEG image. However, I wasn't able to successfully generate a dithered transparency version of "town.jpg" using "alpha.png" as an alpha channel (via gimp's layer mask). Perhaps someone else could give that a try and report back here?
Additional: I installed pngquant as suggested by Kornel, and gave it a try. It takes a RGBA PNG image and converts it to an indexed palette with dithered transparancy in place of the alpha channel. The RGBA PNG image for "town.jpg" including the alpha channel is over 288kB, whilst the resulting PNG8 version is 80kB. However, the degradation caused by the dithering will depend on the kind of image. I have updated the demo to show comparisons.
Dave, two things:
There are definitely cases where JPEG+mask will be smaller than PNG8. You can pick larger or more colorful image to demonstrate that.