ImageMask makes it possible to get Flash like image compression with alpha/transparency and small file sizes.
By adding a "data-mask" attribute to an img tag with a reference to an image that contains the mask will mask the src image.
For browser that do not support canvas it's possible to add a fallback image with "data-mask-fallback".
<img src="path-to-main-image.jpg" data-mask="path-to-mask-image.jpg" data-mask-fallback="path-to-mask-image.gif">
Then run the plugin to find all images with the "masked" class:
$(document).ready(function ()
{
$(".masked").imageMask();
});
Or just apply it to a specific element:
$(document).ready(function ()
{
$("#masked").imageMask();
});
It combines the two images using canvas and replaces the original image with the generated one.
It requires a bit more work because one has to save two images. It also helps to have a solid background on the original image for better compression. There may be circumstances where a normal png with transparency is preffered, but with larger photos it does have a considerable effect.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent