ZorroJS - Put a Mask on it

The transparency of PNGs for the file size of JPEGs


Try it

Drag a transparent PNG or GIF from your desktop onto this page or use the file picker and see how many kB ZorroJS can save you.

Original Transparent PNG
Change JPEG Compression Quality here to find the optimum quality/size ratio:

ZorroJS Masked JPEG (live rendered)

Using ZorroJS is easy - just use the following code:

In the <head> include this line:

<script src="zorro.js"></script>
	

To display a transparent bitmap anywhere in your html use this:

<img src="yourZorroImage.jpg" onload="zorro.mask(this)"/>
	

The small print

ZorroJS has some pitfalls you should be a aware of:

  • It only runs on browsers that support Canvas and have JavaScript activated
  • Due to cross-domain limitations the images have to be hosted on the same domain as the page
  • Currently there is no fallback for unsupported browsers (this might change in the future)
  • Since the mask has to be rendered it might take low-performance devices a little bit of time especially if you have many or very big bitmaps on the same page.
  • Right now this map creation tool does not work on Internet Explorer (something weird with jQuery I still have to figure out) - the ZorroJS library itself does work fine on IE.

What is ZorroJS?

Transparent PNGs are great, but they come at a price: file size. Wouldn't it be nice if there were transparent JPEGs instead? Unfortunately there is no such thing, but ZorroJS gives you the power of transparent PNGs for the size of a JPEG.

It achieves this by combining the image and the transparency mask inside the same image and uses JavaScript and Canvas to create a transparent bitmap the moment it has been loaded. All you need to do to reduce the file size of your transparent images to 50% or less is to include the Zorro.js library and a tiny bit of code.

The tool on this page helps you to convert your current PNGs to the ZorroJS image format. Give it a try!