How to save JPEGs with a clean matte?

BP
Posted By
Bob_Pierce
Nov 15, 2008
Views
2033
Replies
5
Status
Closed
From a cut-out image on a transparent background, I use Save for web specifying a black matte to create a JPEG. The resulting image has compression artefacts within the black matte around the image just the same as if the original image had a black background. I can then apply a mask channel copied from the orignal file to the JPEG and fill the matte with black. Delete the mask and Save and I have a JPEG with a matte free of artefacts.

Is there a simple way to achieve the same thing and what’s the point of the matte option?

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

R
Rilla
Nov 16, 2008
To make sure I understand this correctly… You are cropping an image with a transparent background and your trying to add a black border to it or are you trying to add a black background to it? Or… Are you trying to just create a mask?
-Rilla
C
Curvemeister
Nov 16, 2008
Jpeg does not support transparency. The only function of the matte color, in the case of jpeg, is to specify the color of the transparent portions of the image.

I recommend png if your goal is a good quality transparent image for web use. Gif is a jaggy second best.
BP
Bob_Pierce
Nov 17, 2008
I am currently using .png files with transparent backgrounds and dropshadows. These are significantly larger (2x or 3x) than the equivalent .jpg files so the site loading time is also much longer but, of course, .jpgs don’t allow transparency. My sites are in Flash which, via ActionScript, allows me to apply drop shadows at runtime to transparent images. It also allows me to create a transparent bitmap image from a .jpg by setting to transparent all pixels that have the matte colour. Unfortunately, as I described above, not all the pixels in the matte area will retain the matte colour because of the way the JPEG compression is done. As a result, the cut out image created by ActionScript will not have clean edges. I can fix this by the second operation on the .jpg I’ve described but this process is not easily automated in an Action and one site in particular involves a lot of images!
M
Mylenium
Nov 17, 2008
Sounds like you could benefit from the new Flex image format which provides a few fancies like tiled loading and transparency support (and as of CS4 can be saved from Photoshop). There should be Flash components and classes to use it, so maybe look into that if you have the time. Short of that you could perhaps revert to GIF for the matte. On greyscale images it should create intesimally small files, especially if you limit yourself to 16 levels or so…

Mylenium
BP
Bob_Pierce
Nov 17, 2008
Thanks Mylenium, I didn’t know about the Flex image format I’ll look into it.

Must-have mockup pack for every graphic designer 🔥🔥🔥

Easy-to-use drag-n-drop Photoshop scene creator with more than 2800 items.

Related Discussion Topics

Nice and short text about related topics in discussion sections