Yeah! JPEG with Alpha Transparency
This is the source of the demo page, that refers to the article Yeah! JPEG with Alpha Transparency!.
First you need two image files:
This file just need to contain your photo, that should have transparent areas at the end.
This file need to have exactly the same pixel dimensions as the JPEG and must contain the transparent areas. The not transparent areas can be simply black.
Add images to your body like this:
<img src="images/my-image.jpg" alt="some text" /> <img src="images/my-image.png" class="alphaMask" style="display: none; " aria-hidden="true" />
IMG element with the PNG must ...
- be directly behind the
IMGelement with the JPEG
- have the class name "alphaMask"
- be hidden via CSS
aria-hidden attribute ensures that it will be ignored by screen readers.
The script tries to replace only the value of the
src attribute of the first
IMG element with a data URI. So, the
IMG element itself would persist. But in some situations (especially if the images come from another domain), that will fail. In such cases the script replaces the whole
IMG element by a