32

I would like to make a JPEG image file with some pixels that are partially transparent or fully transparent, similar to a PNG file with an alpha channel. Is this possible? If so, how would I go about doing this?

I would like to use the image on a website. If I try to do this, would it work in any or all of the currently popular browsers? Assuming it is possible, will it just work, or are there any tricks or hacks required to make it work?

EDIT: I found this page describing a JPEG image with transparency. Does anyone know if there's a convenient way to produce files in this format? Is it widely supported?

Semnodime
  • 1,872
  • 1
  • 15
  • 24
Elias Zamaria
  • 96,623
  • 33
  • 114
  • 148
  • You could use a Java applet or Flash applet to load two JPegs, one of which is a greyscale image you can use as an alpha channel. But I recommend sticking to pngs. – David Rutten Apr 14 '10 at 18:16
  • JPEG JFIF does talk only YCbCr. If you want to use it in the wild, the answer is "No God, please no! – Elis Byberi Mar 03 '20 at 21:59

8 Answers8

41

Yes you can do this. The JPEG format makes provision for exchangeable image file format

  • Color space definition
  • Component sub-sampling registration
  • Pixel aspect ratio definition

JPEG/Exif is the most common for photography and JPEG/JFIF is the most commonly used for storage.

When the others state JPEG format doesn't provide for an alpha channel all they are really saying is that there is no widely used formats for JPEG encoding that include an alpha channel.

Have a look at On adding alpha channels to JPEG images, where the author describes and provides a solution to exactly what you are trying to do and uses the the canvas element to render on a browser.

martin
  • 2,493
  • 1
  • 20
  • 13
  • 1
    Note that the original question asks for a solution that works in IE7. That elaborate solution described on that site will not; it will fall back to PNG. Also note that that writeup was posted months *after* this question was asked. – Pointy Apr 24 '12 at 12:47
  • @Pointy - There are a variety of polyfills available to get this running on IE7 (such as excanvas.js), also everything in the writeup was still relevant when this question was asked. – martin Apr 25 '12 at 20:10
  • 19
    @Pointy why is sharing new information not available at the time the question was posted a reason to criticize the answer? – dimo414 Aug 07 '12 at 22:06
  • 2
    It's funny that JPEG+Alpha hack you link to takes 55KB as JPEG, but only [27KB as properly-optimized PNG](http://i.imgur.com/WMaQXd4.png), so I'd recommend checking [TinyPNG](http://tinypng.org) first — PNG can be more efficient than this hack. – Kornel Mar 11 '13 at 20:16
  • 3
    That image really is just an example. Images such as scenic photographs would be a good example where a JPEG could be ~1MB while a PNG of sufficient quality would still be ~10MB. – martin Mar 11 '13 at 23:55
  • 1
    @porneL - Thanks for sharing the link to TinyPNG. Make this a proper answer and I'll happily upvote it. I've got perfect results for my CSS background images, where file size is approx the same as for an equivalent JPG or even lower. With full transparency support and no hack required. – Stefan Haberl Jan 14 '15 at 08:25
  • The linked doc shows that must be careful to use the result correctly. 1) requires custom css - can't just send it to browser as a jpeg, and expect it to work. 2) must hide image until the mask has been applied - otherwise there will be a momentary flash of the non-masked version. – ToolmakerSteve Nov 04 '19 at 02:07
12

Outdated Answer

If your browser does not implement canvas support, you cannot use a JPEG with transparency. You'll need to stick to PNG or GIF.

Semnodime
  • 1,872
  • 1
  • 15
  • 24
DavGarcia
  • 18,540
  • 14
  • 58
  • 96
  • I see. Definitely will have to go with a PNG then and accept the file size. There are many ways to improve PNG sizes, check out this article that helped me: http://www.smashingmagazine.com/2009/07/15/clever-png-optimization-techniques/ – DavGarcia Apr 14 '10 at 21:09
  • Not true. Although there are no common JPEG formats that include a alpha channel there is nothing stopping you creating your own and rendering it on the client with a canvas element. – martin Apr 16 '12 at 03:51
7

You can also use SVG to combine a JPG with an alpha channel, as outlined here. You'll need to inline your SVG in the HTML, or it won't work in all browsers. Also, IE8 is not supported.

The svg inline code will look like:

<svg preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 560 1388">
  <defs>
    <mask id="canTopMask">
      <image width="560" height="1388" xlink:href="img/can-top-alpha.png" />
    </mask>
  </defs>
  <image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg" />
</svg>
silviot
  • 4,615
  • 5
  • 38
  • 51
5

The original JPEG format doesn't provide for an alpha channel. You can make a PNG file, however. It will work in IE7+ and other "modern" browsers.

The "JPEG 2000" format does support transparency, but despite the name it's really a completely new image encoding format. It's only supported by Safari.

Pointy
  • 405,095
  • 59
  • 585
  • 614
  • Sorry but there is nothing stopping JPEG form providing alpha channels. JPEG defines the codec for compressing and decompressing and makes provisions for color space definition. – martin Apr 25 '12 at 20:17
5

Currently, JPEG doesn't support transparency.

You can switch to PNG images, to get either 1bit or 8bits of transparency (or GIF, which only supports 1 bit -- i.e. transparent, or not-transparent).

You can also switch to WebP which has similar mechanics to JPEG. It supports lossy/lossless compression, transparency and animations.

Itchydon
  • 2,572
  • 6
  • 19
  • 33
Pascal MARTIN
  • 395,085
  • 80
  • 655
  • 663
  • BTW: [PNG+alpha images can be lossily compressed](http://pngmini.com). That may give file sizes close to JPEG. – Kornel Sep 10 '12 at 08:00
  • @Kornel - to clarify, that tool converts 24-bit RGB to 8-bit palettized PNG (plus alpha). Useful to know about, but not at all close to the quality that JPG can do with similar data size. – ToolmakerSteve May 04 '18 at 18:30
  • Unfortunately, [Safari 13 still does not support WebP](https://caniuse.com/#feat=webp). – ToolmakerSteve Nov 04 '19 at 01:48
1

I'm still looking for the same solution.

Unless browsers give us support for alpha channel or a new image format there will be only workarounds.

Using a jpeg for image and a png for mask would reduce drastically the size, but will increase the file count (2 IMAGE+ALPHA instead of 1 IMAGE with ALPHA).

If you want to improve browsers loading speed and reduce size, you should find a solution with only one browser request (1 image file).

Any solution that I have found is a prototype. But you should check this:

CSS3 Masks http://www.webkit.org/blog/181/css-masks/

And a two file combination http://blog.jackadam.net/2010/alpha-jpegs/

Heroselohim
  • 1,241
  • 1
  • 18
  • 23
1

There are plans for JPEG XL to support transparency. From Draft Call for Proposals on Next-Generation Image Coding (JPEG XL):

1.2 Scope

The next-generation image coding activity aims to develop an image coding standard that offers:
...

  • Features for web applications, such as support for alpha channel coding and animated image sequences.

...

4.2 Compressed bitstream requirements

Submissions shall cover at least the core requirements, and are encouraged to cover desirable requirements as well.

Core requirements

...

Support for alpha channel / transparency coding

BSMP
  • 4,596
  • 8
  • 33
  • 44
Mike
  • 31
  • 1
  • This does not provide an answer to the question. You can [search for similar questions](//stackoverflow.com/search), or refer to the related and linked questions on the right-hand side of the page to find an answer. If you have a related but different question, [ask a new question](//stackoverflow.com/questions/ask), and include a link to this one to help provide context. See: [Ask questions, get answers, no distractions](//stackoverflow.com/tour) – Mogsdad Jan 19 '18 at 17:34
  • OK, so this obviously isn't a new question but it would still be better if you quoted the relevant part(s) of the PDF in case the link expires. – BSMP Jan 20 '18 at 07:35
  • As someone who is interested in this topic, I found it informative to know that there was a possible solution coming, even if it does not help today. – ToolmakerSteve May 04 '18 at 18:38
  • This answer could be updated. JPEG XL is no longer a draft. – gerrit Oct 31 '22 at 11:44
-1

Technically speaking, JPEG suports thousands of channels even in 12-bit, not just 8-bit. The interpretation of data is defined by the JFIF or SPIFF wrapper.

Practically speaking, the issue is, whether a given browser can decode and properly interpret a channel as meaning 'transparency' during its rendering.

The fraction of browsers (or other software) which supports transparency within jpeg file will thus change over time.

Semnodime
  • 1,872
  • 1
  • 15
  • 24
kwatson
  • 19
  • 1
  • @kwatson JPEG JFIF does talk only YCbCr. Color space conversion is out of scope of JPEG standard, it is defined in JFIF. As long as OP wants to use it in the wild, the answer is "No God, please no! – Elis Byberi Mar 03 '20 at 21:58