JPEG image with alpha channel on website [closed]

Answer 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.

Answer 2

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

Answer 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"></image>
    </mask>
  </defs>
  <image mask="url(#canTopMask)" id="canTop" width="560" height="1388" xlink:href="can-top.jpg"></image>
</svg>

Answer 4

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/

Answer 5

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.

Answer 6

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.