JPEG with transparent background

Question

My client wants me to supply images for web as JPEG with transparent background. Is this possible?

Answer 1

JPG does not allow transparent backgrounds.

The only thing you can do is have a flat color background that would blend into your website: eg. if your website background is white, then have JPGs created with a white background.

Otherwise you need to consider saving as PNG, which does allow true transparency.

Answer 2

JPEG doesn't support transparency at all.

Most compatible option is to use PNG, but results in large files for photographs because it is lossless compression.

Another option is to use the new WebP file format which supports both lossless (like PNG) and lossy compression (like JPEG), and allows transparency with both. Support for WebP is relatively good these days, but not yet universal (notably neither Safari nor IE supports it, but Edge does).

Answer 3

While the JPEG format can't handle transparency itself, it is entirely possible to have transparency using JPEGs with modern browsers. It is, however, complicated. It involves using SVG to create a clipping mask that handles the transparency. With Photoshop, you can do this with the pen tool, and then export to Illustrator, where you can convert the pen tool path into an SVG.

Here is a more detailed guide for how to do so.

The trick is to make two things:

• The JPG
• The clipping

The JPG is easy enough. Output that right from Photoshop. Optimize.

Now we can set up the SVG. SVG is happy to take a raster graphic. SVG is known for vector graphics, but it's a very flexible image format.

<svg>
  <image xlink:href="/images/chris.jpg" x="0" y="0">
</svg>

To get the path, we export the path we created with the Pen tool over to Illustrator. Now we have the path over there, and it's easy to export as SVG[.]

Now we have the path data we need[.] Let's use that within a in the SVG we've started. Then also apply that clip path to the :

<svg viewBox="0 0 921.17 1409.71">
  <defs>
    <clipPath id="chris-clip">
      <path d="[path data from Illustrator]" />
    </clipPath>
  </defs>
      <image xlink:href="/images/chris.jpg" clip-path="url(#chris-clip)" x="0" y="0" width="921" height="1409">
</svg>

Alternatively, here is a tool that will just convert a PNG into an SVG with embedded JPEGs. The advantage over WebP is that it will work in Internet Explorer (since version 9) and Safari (since version 3), including on iOS.

That said, the usual standard is indeed to just color the JPEG background to match that of the website, or to use optimized 8-bit PNG, (using a tool like PNGQuant to convert regular 32-bit PNGs).

Answer 4

JPEG 2000 (also known as JP2) is an improved version of the original JPEG format (from 1992) that also has full support for transparency, but it has abysmal browser support (only Safari supports it).

I agree with Lucian, just use PNG, it is extremely well-supported, and there are many tools (pngcrush, optipng, pngout...) to compress files. See here for a comparison.

In regards to what tylisirn said, I understand the concern about file size, but consider this: it is the norm for web pages to be bloated, these days. However, on the other hand, a fast page load time leaves a good impression on users, and has a positive effect on SEO.

Answer 5

You can with PHP and Imagick remove the background dynamically. (remove a fushia color for example). ~ you create a PNG/GIF at runtime from JPG (you can cache transparent image in a folder to avoid server overheating)

https://stackoverflow.com/questions/43544467/imagemagick-white-to-transparent-background-while-maintaining-white-object

Answer 6

Due to the lossy compression nature of JPEG compression, creating a JPEG with a flat colour background for chroma-keying is not recommended since the colour will bleed into surrounding areas.

Depending on how the images are being used, supplying a greyscale matte image in addition to a standard JPEG may suffice, as in the JEPG format the greyscale component of the image data is stored at a much higher resolution than the colour data. These would need to be combined using the canvas API or similar.

As others have mentioned, a better solution would be to just use a format like PNG, which naively supports an alpha channel and is browser compatible.

Answer 7

With the advent of CSS3 mask-image property, one could provide an external alpha mask image for the JPEGs, thus granting them the alpha channel they lack.

Answer 8

Aside from the edge-cases presented in the other answers a JPEG for all practical purposes does not support transparency.

The most common formats which will support transparency are PNG, GIF, and SVG.

If none of these file formats are suitable for the client and a JPEG is required for whatever outlandish reason then you simply need to provide a JPEG for each use-case.

If they are doing a poster then have them tell you the poster color and provide a JPEG with a background to match. If they are simply printing on paper then a white background should be fine. If it will be used on their website then you will need to provide a background suitable for each place used on the website.

Hint: make sure to charge for each use-case

Answer 9

You can create PNG image with transparency and then convert it to SVG containing a color information as JPEG and an alpha channel as a grayscale mask. Here is a tool I wrote to do it https://github.com/igrmk/transpeg

Answer 10

Yes, this is possible.

Just create a clipping path in the Paths panel. When saving the file as a JPEG, Photoshop stores the clipping path in the JPEG metadata section.

Note that the clipping path will only have effect when your client opens the file in Photoshop, not in most other programs, specifically not in web browsers.