Jump to content

Is there any way use jpeg with transparency or replace some color with transparency


Recommended Posts



you can create an alphamap which fits to your jpg. The alphamap is a 8-bit-png which only contains black / transparency. Size of  both files still is smaller than a "normal" png but you have 1 more request.

Asking google for 10 seconds gave me this result: http://kaioa.com/node/104


I think you also could load your jpg file into a canvas, go through each pixel, ask for a specific colorvalue and make it transparent if you want to...



Link to comment
Share on other sites

JPG compression adds a lot of noise - so it is not a really good idea to keep a key-color within the JPG itself (see te image)




Of course it is do-able by trolling with distance in HSL model.... but you don't really want me to elaborate about it :D


The solution is still very simple. What you want to do is - having a source JPG file and a mask in PNG format (which will take like no-space since there is only one color and transparency).

Then blend them together using proper globalCompositeOperation (which is million times faster than pixel-by-pixel approach)




How to use the resulting Canvas as a Texture for Phaser/PIXI - I do not know - but someone here will surely help you.

Link to comment
Share on other sites

Hmmm, that mask is pretty neat, but I dont understand why you would do this most of the time?

You can use a PNG compression tool like tinypng to shrink them down.


Just doing a quick test right now using a png with transparency that is 91kb big:

  • Test1 -  loading it into gimp, exported as jpeg (default settings), 41 kb. Nice, less than half size, but transparency lost. I'm sure settings could be tweaked for even smaller size.
  • Test2 -  uploaded png to tinypng, downloaded it, 26kb. Wow big drop, and transparency retained.

This is my first time reading into alpha masks, so maybe I'm missing something here, but why bother?

Link to comment
Share on other sites

You make a new image object, take the canvas into which you drew the composite operation then set the image src via canvas.toDataURL()

img.src = canvas.toDataURL();

Then you can generate a PIXI texture from the image as normal.


Don't do that, you can use a canvas as the source for a texture directly:

var canvas = document.createElement('canvas'),    ctx = canvas.getContext('2d');// draw, draw, drawvar texture = new PIXI.Texture(new PIXI.BaseTexture(canvas)),    sprite = new PIXI.Sprite(texture);// add sprite somewhere in scene.
Link to comment
Share on other sites

  • 4 years later...
  • 8 months later...

I also encountered that issue. I wanted to compress size with jpg images and realised that it does not support alpha channels by default.

I'm using TexturePacker to create spritesheets https://www.codeandweb.com/texturepacker

There is a function to also create the alpha maps. It should be possible to load the images and the alpha maps to create the sprites.

Does anyone have done this before and can tell me how to do this? If not I try try to adapt the solutions from this topic.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...