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?
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.
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.
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"></image>
</mask>
</defs>
<image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image>
</svg>
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.
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/
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.
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
Take a look at the Financial Times logo. It's apparently a jpeg but with an alpha channel: http://im.media.ft.com/m/img/masthead_main.jpg
I can't open the image with Photoshop though.
What's with the amount of incredibly confident misinformation here? If you don't KNOW, don't comment. JPEG absolutely supports transparency - transparency is a component/channel, and JPEG can support thousands of channels. JPEG is color-blind, it doesn't even know about red, green, and blue channels, or YCbCr channels, without a JFIF or SPIFF wrapper. Just as JPEG can support 12-bit channels, not just 8-bit - doesn't mean a browser knows what to do with the data. The issue is whether a given browser can decode and properly interpret a channel as meaning 'transparency' during its rendering.
来源：https://stackoverflow.com/questions/2639866/jpeg-image-with-alpha-channel-on-website