JPEG image with alpha channel on website

transparency jpeg opacity alpha

51,406

Solution 1

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.

Solution 2

JPEG doesn't support transparency. You'll need to stick to PNG or GIF. Why do you want to use a JPEG for transparency?

Update

Please disregard this answer, it was written back when Canvas support was sparse. Refer instead to martin's answer.

Solution 3

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>

Solution 4

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.

Solution 5

You cannot have any kind of transparency with a JPEG image : JPEG doesn't support that.

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.

View more solutions

51,406

Author by

Elias Zamaria

SOreadytohelp

Updated on January 09, 2021

Comments

Elias Zamaria over 3 years

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 popular browsers (IE 7+, Firefox, Safari)? Assuming it is possible, will it just work, or are there any tricks or hacks required to make it work?

EDIT: Some of the replies say I can't do this. However, I found this page describing a JPEG image with transparency. Does anyone know if there is a convenient way to produce files in this format? Is it widely supported?
- David Fox about 14 years
  
  what? you can make a transparent JPEG?
- David Rutten about 14 years
  
  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 Fox about 14 years
  
  @Pointy i makez bad joke apparently. so much for upvotes for comedy!
- Pointy about 14 years
  
  @David sorry, but you'll sympathize I hope with my keeping my sarcasm detector switched off on this site.
- Elis Byberi over 4 years
  
  JPEG JFIF does talk only YCbCr. If you want to use it in the wild, the answer is "No God, please no!
Elias Zamaria about 14 years

I would like to use a complex image, with lots of smooth gradients, like a photograph, and let my background show through part of it, but I would like the file to be smaller than a PNG.
nuthan ratnam vara about 14 years

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: smashingmagazine.com/2009/07/15/…
martin about 12 years

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.
Pointy about 12 years

Random downvotes - it's what life's all about.
Pointy about 12 years

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.
martin about 12 years

@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 about 12 years

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.
Ghigo almost 12 years

The image seems to be a GIF with JPG extension. I'm surprised that the browsers recognize it.
Ar5hv1r almost 12 years

You can rename a gif as a jpeg and most browsers will render it correctly. Never quite understood why websites choose to do that.
Ar5hv1r almost 12 years

@Pointy why is sharing new information not available at the time the question was posted a reason to criticize the answer?
Kornel almost 12 years

BTW: PNG+alpha images can be lossily compressed. That may give file sizes close to JPEG.
Kornel over 11 years

It's funny that JPEG+Alpha hack you link to takes 55KB as JPEG, but only 27KB as properly-optimized PNG, so I'd recommend checking TinyPNG first — PNG can be more efficient than this hack.
martin over 11 years

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.
Stefan Haberl over 9 years

@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.
Ctx over 6 years

What is a channel with "transparency information" good for if no standard software does interpret it as such? To claim, that jpeg supports transparency, a jpeg standard compliant software would have to be obliged to render it that way.
Mogsdad over 6 years

This does not provide an answer to the question. You can search for similar questions, 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, and include a link to this one to help provide context. See: Ask questions, get answers, no distractions
BSMP over 6 years

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.
ToolmakerSteve about 6 years

@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 about 6 years

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.
kwatson over 5 years

To claim, that jpeg supports transparency, means that the JPEG standard supports transparency, in the sense that it doesn't care about a channel's meaning - 'transparency' is as good a meaning as 'blue'. Your comment is more about whether standard software actually supports a JPEG feature. In this case, browsers at this time only understand a limited subset of JPEG functionality, and even that only when wrapped in a JFIF container. As to what it's "good for", if we only looked to standard software for things to be useful, there would only be standard software.
ToolmakerSteve over 4 years

Unfortunately, Safari 13 still does not support WebP.
ToolmakerSteve over 4 years

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.
Elis Byberi over 4 years

@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!