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.