Closed. This question needs to be more focused. It is not currently accepting answers.

---

Want to improve this question? Update the question so it focu开发者_运维问答ses on one problem only by editing this post.

Closed 4 years ago.

The community reviewed whether to reopen this question last month and left it closed:

Original close reason(s) were not resolved

Improve this question

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?

---

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.

---

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.

---

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>

---

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.

---

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.

---

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/

---

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

---

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.