17

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

  • 56
    Is it possible your client does not know what JPEG means and is using the term as a generic word for image? – WGroleau Nov 2 at 22:34
  • @WGroleau maybe the client is AJA class (Averge Joe - Advanced) that considers JPEG as synonym for bitmaps (a.k.a. the images with pixels). – Crowley Nov 4 at 21:49
  • 1
    Is there a chance to hand them proper .png images and if they ask why you did not give them .jpegs you can anser them the format is supported as wide as jpeg is and it supports transparency. I think, as WGroleau mentione, they won't notice anything. – Crowley Nov 4 at 21:51
  • 2
    Renaming the file as image.jpeg.png might be sufficient. – beppe9000 Nov 5 at 12:26
43

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.

  • Is this a good idea to try to set a blending background color since it might not be homogeneous? – Amessihel Nov 5 at 10:27
  • 1
    @Amessihel No, but it's the only option if JPG format is indeed required and transparency needs to be simulated. – 13ruce Nov 5 at 12:42
14

It is entirely possible to have transparency with 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).

  • 17
    In all fairness, SVG with a clipping mask is not jpg. And a clipping mask is a level of complexity that may or may not be desired. – Scott Nov 3 at 8:52
  • 9
    @Scott I agree; it isn't. But I don't read the Question as requiring that. It doesn't say a "JPEG file containing transparency" but just "images for web as JPEG with transparency," which is more ambiguous. Furthermore, even if that is not what the OP or their client meant, I believe that the information in my Answer may be relevant to future readers who search for and find this Question in the future. It's just as valid as including information about WebP or suggesting the use of PNG. – trlkly Nov 3 at 9:05
  • 1
    If you need partial transparency, you should use a mask (which could be a separate grayscale PNG) instead of clipping. – Joey Nov 3 at 16:42
  • 11
    This is like saying you can drive your car over the ocean... if you put it on a boat. Come on. – Lightness Races with Monica Nov 4 at 17:22
  • 2
    Doing the pen step in Photoshop just to export the path to Illustrator for exporting to SVG seems like a gross misuse of the programs - just do the pen step in Illustrator. That being said, this seems like it both overcomplicates the issue and is too limiting for modern practices (e.g. you can't have partial transparency with this option). If there's flexibility on the image format, then just use PNG. If the source image must be a JPG, then the masking should be done with a greyscale image mask like what Joey suggests. Barring specific needs, those should be the only two reasonable options. – Abion47 Nov 4 at 20:04
14

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

  • 15
    Regarding WebP, I think more notably: Safari currently does not support it at all (mobile nor desktop). That eliminates ~25% of the entire browser market share, obviously including all iPhones. – justinpawela Nov 3 at 5:01
  • 1
    WebP browser support. – Theraot Nov 4 at 4:27
  • 1
    Why one would need transparency in high-resolution photographs? – Crowley Nov 4 at 21:52
  • @Crowley, consider an "about" page with photographs of the company's staff. – Mark Nov 4 at 23:39
  • 2
    @Mark I still cannot find reason using transparency there. Proper choice of the shooting background is much neatier way. – Crowley Nov 4 at 23:44
9

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.

  • related: progressive image rendering – beppe9000 Nov 5 at 12:29
  • @beppe9000 thanks for the link! While reading it I was reminded of how Facebook uses blurry thumbnails as placeholders while it downloads the actual image. It's not really progressive loading, more of a distraction instead of blank space, but the microthumbnails have the advantage of taking a negligible amount of space (~200 bytes). This technique could definitely be applied to PNG, maybe even JPEG if it has support for custom metadata, but I don't think browsers would be interested in implementing it... engineering.fb.com/android/the-technology-behind-preview-photos – Friendly Neighborhood Demon Nov 6 at 16:46
  • Nice engineering at fb... Well, I think it doesn't scale very well with content served by different entities. Probably WebP is a more appealing alternative. This one is a good read too: developers.google.com/web/fundamentals/performance/… – beppe9000 Nov 8 at 15:38
3

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

  • A cool option, but probably not relevant as OP is merely providing the image file to a client, not designing and hosting their website's backend for them. As such, the image itself needs to support transparency. – Abion47 Nov 5 at 20:24
3

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.

2

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

  • Including SVG in that list is somewhat misleading, seeing as it's a very different format from the other two. – Abion47 Nov 4 at 20:06
  • @Abion47 Even IE9 supports it. I would say that any printing company worth their salt is going to request an SVG since it will let them blow it up as large as they need. – MonkeyZeus Nov 4 at 20:20
  • You misunderstand my point. An image that started life as a raster image cannot be saved as an SVG in the way that it can be saved as a PNG or GIF. If OP's image was in a vector format originally, then it should absolutely be kept as a vector format for as long as possible. But if it's an image composition (in Photoshop, for example), then the SVG ship has long since sailed unless OP wants to effectively redo the entire project in order to save it as an SVG. – Abion47 Nov 5 at 2:52
2

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.

  • I wasn't aware of this, nice to know! But it doesn't seem to answer the question. It doesn't seem like the OP is directly involved in web development but has hit a wall with a misinformed request from a client. – Wolff Nov 5 at 19:54
  • Of course. But, for others seeking similar solutions, this might prove useful. – Sinus Mackowaty Nov 6 at 13:41
-1

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.

  • 2
    "My client wants me to supply images for web as JPEG" – Scott Nov 3 at 21:01
  • @Scott OTOH, this answer and the JPEG2000 one actually answer the question as written. i.kym-cdn.com/photos/images/original/000/909/991/48c.jpg – JollyJoker Nov 4 at 9:07
  • 1
    @JollyJoker No they don't, seeing as OP specifically asked for images regarding their use on the web, so neither Photoshop-specific metadata-based masks nor JPEG-extended image formats with virtually non-existent browser support really address OP's actual needs as written in the question. – Abion47 Nov 4 at 20:08

Not the answer you're looking for? Browse other questions tagged or ask your own question.