Creating jpeg from PS: best practice

J
Posted By
jpegchallenged
May 30, 2006
Views
879
Replies
7
Status
Closed
In PS CS on a PC, my color working space is AdobeRGB98, and my images are in 16 bit mode. From these huge files, I want to create small jpegs for web viewing and sometimes higher resolutions files for off-line viewing. I don’t mind creating different jpegs for these purposes, and my intent is for both PC and Mac users to view the same jpegs at their highest quality. After much research and experiments, I remain unsure if I’m taking the right steps. Here are some suggestions/comments that I have come across, and their related questions.

Suggestion/comment 1: "Before converting to jpeg, use Image_Size to change to 72ppi first. This will significant cut down the file size."

Question 1: True or fiction? Is 72ppi the optimal resolution for jpegs to display on both PCs and Macs?

Suggestion/comment 2: "PCs and Macs have different gammas."

Question 2: Should (or can) anything be done to compensate for this gamma difference when creating jpegs so that they look good on both PCs and Macs?

Suggestion/comment 3: "There is an algorithm to incrementally upsample (at +10% increments) an image from low to high resolution for best interpolation. For down sampling from high to low resolution for a jpeg, the reverse algorithm should be applied, using either Image_Size, Save_As_Jpeg or Save_For_Web."

Question 3: True or fiction?

Suggestion/comment 4: "Covert from AdobeRGB98 (or other color working space) to sRGB first before creating the jpegs."

Question 4: I find that following this suggestion results in much better looking jpegs on my PC. But should the sRGB profile be attached with the jpeg and why? With the sRGB profile attached, will it make any difference how a jpeg may appear on a PC vs on a MAC?

Suggestion/comment 5: "Save_As_Jpeg and Save_For_Web use different algorithms to convert to jpeg."

Question 5: True or fiction? Save_For_Web definitely has many more options to choose from, but is the underlying conversion algorithm that different?

Suggestion/comment 6: "In Save_For_Web, select Uncompensated_Color (or some other choice) and Bicubic_Sharper (or some other choice)."

Question 6: Which Color and Bicubic interpolation are the best options? Should Browser_Dither be enabled?

Suggestion/comment 7: "You need to create different jpegs for web and off-line viewing, because a web browser can make a color and tonal difference."

Question 7: I understand that a web browser can influence how a jpeg’s size is displayed, but it is true or fiction about the color/tonal difference? If true, how should the different jpegs be created?

Thanks.

Master Retouching Hair

Learn how to rescue details, remove flyaways, add volume, and enhance the definition of hair in any photo. We break down every tool and technique in Photoshop to get picture-perfect hair, every time.

N
nomail
May 30, 2006
wrote:

In PS CS on a PC, my color working space is AdobeRGB98, and my images are in 16 bit mode. From these huge files, I want to create small jpegs for web viewing and sometimes higher resolutions files for off-line viewing. I don’t mind creating different jpegs for these purposes, and my intent is for both PC and Mac users to view the same jpegs at their highest quality. After much research and experiments, I remain unsure if I’m taking the right steps. Here are some suggestions/comments that I have come across, and their related questions.

Suggestion/comment 1: "Before converting to jpeg, use Image_Size to change to 72ppi first. This will significant cut down the file size."
Question 1: True or fiction? Is 72ppi the optimal resolution for jpegs to display on both PCs and Macs?

One of the most common misunderstandings. The resolution of the image has nothing to do with the size on the monitor or the file size. Only the total size in pixels is relevant. If you lower the resolution with ‘Resample Image’ checked, you will see a smaller file size, but that is because of the resampling, not because of the resolution.

Suggestion/comment 2: "PCs and Macs have different gammas."
Question 2: Should (or can) anything be done to compensate for this gamma difference when creating jpegs so that they look good on both PCs and Macs?

No, the monitor profile takes care of that, and more and more Macs use gamma 2.2 nowadays anyway. Macs use ColorSync, so *every* program uses color management when displaying the image.

Suggestion/comment 3: "There is an algorithm to incrementally upsample (at +10% increments) an image from low to high resolution for best interpolation. For down sampling from high to low resolution for a jpeg, the reverse algorithm should be applied, using either Image_Size, Save_As_Jpeg or Save_For_Web."

Question 3: True or fiction?

Try it yourself. To me it’s fiction. Use ‘bicubic sharper’ for downsizing.

Suggestion/comment 4: "Covert from AdobeRGB98 (or other color working space) to sRGB first before creating the jpegs."

Question 4: I find that following this suggestion results in much better looking jpegs on my PC. But should the sRGB profile be attached with the jpeg and why? With the sRGB profile attached, will it make any difference how a jpeg may appear on a PC vs on a MAC?

Programs that cannot use embedded profiles will display an image as if it was sRGB. So yes, do convert to sRGB. It doesn’t really matter where in the workflow you do it, but do it. Attaching the profile helps only for those programs that do read embedded profiles, but it doesn’t hurt either (it only makes the file size a little bit bigger).

Suggestion/comment 5: "Save_As_Jpeg and Save_For_Web use different algorithms to convert to jpeg."

Question 5: True or fiction? Save_For_Web definitely has many more options to choose from, but is the underlying conversion algorithm that different?

I don’t think that the algoritm is different, but ‘Save for the web’ strips the EXIF headers from the file, while ‘Save as… JPEG’ doesn’t. That saves quite a bit in file size, but you may WANT to keep those headers.

Suggestion/comment 6: "In Save_For_Web, select Uncompensated_Color (or some other choice) and Bicubic_Sharper (or some other choice)."
Question 6: Which Color and Bicubic interpolation are the best options? Should Browser_Dither be enabled?

Those color options only change the preview AFAIK. They do not change the final image in any way.

Suggestion/comment 7: "You need to create different jpegs for web and off-line viewing, because a web browser can make a color and tonal difference."

Question 7: I understand that a web browser can influence how a jpeg’s size is displayed, but it is true or fiction about the color/tonal difference? If true, how should the different jpegs be created?

Web browers do not change any colors, but they do not read embedded profiles either. They just send the color numbers to the screen ‘as is’. There is no reason to make different JPEGs unless it’s for somebody who uses a icc-aware viewer and you want to use another profile than sRGB for some reason.


Johan W. Elzenga johan<<at>>johanfoto.nl Editor / Photographer http://www.johanfoto.nl
BH
Bill Hilton
May 30, 2006
asks …

In PS CS on a PC, my color working space is AdobeRGB98, and my images are in 16 bit mode. From these huge files, I want to create small jpegs for web viewing and sometimes higher resolutions files for off-line viewing.

Suggestion/comment 1: "Before converting to jpeg, use Image_Size to change to 72ppi first. This will significant cut down the file size." Question 1: True or fiction?

Fiction … all that matters here is the pixel dimensions … for web files try to go with a max width of 600-800 pixels and a height of say 600 pixel max or people might have to scroll around to see all the image. The ppi setting is ignored unless you are printing.

Suggestion/comment 2: "PCs and Macs have different gammas." Question 2: Should (or can) anything be done to compensate for this gamma difference when creating jpegs so that they look good on both PCs and Macs?

Some people make two versions of each jpeg to try to compensate for this but very few people I know actually go to this much trouble.

Suggestion/comment 3: "There is an algorithm to incrementally upsample (at +10% increments) an image from low to high resolution for best interpolation. For down sampling from high to low resolution for a jpeg, the reverse algorithm should be applied, using either Image_Size, Save_As_Jpeg or Save_For_Web."
Question 3: True or fiction?

Using Photoshop’s ‘bicubic – sharper’ does a pretty good job of downsampling typical dSLR sized images to web sized images, ie, 6 – 16 Mpixel sized files down to say 800×600 pixels. But if you’re downsampling much larger files, say 4×5" sheet film drum scans, you might want to go down in 50% steps. So it depends on how much downsampling you’re doing … how big are your starting files?

Suggestion/comment 4: "Covert from AdobeRGB98 (or other color working space) to sRGB first before creating the jpegs."

Question 4: I find that following this suggestion results in much better looking jpegs on my PC. But should the sRGB profile be attached with the jpeg and why?

You should convert to sRGB first because most browsers will ignore the ICC profile (whether it’s sRGB or AdobeRGB) and the colors represented by sRGB numbers look more accurate in non-color managed apps than the same colors represented in wider gamut working spaces. I have three pics of a red bird in sRGB, AdobeRGB and ProPhotoRGB that show this, if you want to see it.

But we’re starting to see more browsers that are color-managed (correctly interpret the working space profile, if attached) so some argue that you should go ahead and check the ‘ICC profile’ box in ‘save for web’. Note that this will add anywhere from 500 bytes (AdobeRGB) to almost 4 Kbytes (sRGB) to each jpeg though, depending on the profile.

The problem with tagging sRGB files is that they will look pretty much the same with or without the tag for most colors, so where you *really* need the tag is with wider gamut images, BUT if the tag is ignored (and right now it’s mostly ignored because so few browers recognize them) then saturated colors in the image might look very dull.

So there is no easy answer to this Q. The safest way is to convert to sRGB first (in case the user’s browser is non-color managed) and attach the tag (but it doesn’t help much for sRGB images 🙂

Suggestion/comment 7: "You need to create different jpegs for web and off-line viewing, because a web browser can make a color and tonal difference."
Question 7: I understand that a web browser can influence how a jpeg’s size is displayed, but it is true or fiction about the color/tonal difference?

First, the web browser does not "influence how a jpeg’s size is displayed", it’s just a one-to-one map of the pixels (except for the ones that compress it to fit a screen). So that part is wrong.

As for the "color and tonal difference", this is because of the lack of ICC color managed web browsers … in other words if you tag the images and the web browser is color-managed the jpegs should look about the same in the browser as in Photoshop but if the browser is not color-managed then the tags are ignored and saturated colors look duller, especially if the tag is for a wide gamut working space.

Thanks.

Hope this helps …

Bill
MR
Mike Russell
May 30, 2006
wrote in message
In PS CS on a PC, my color working space is AdobeRGB98, and my images are in 16 bit mode. From these huge files, I want to create small jpegs for web viewing and sometimes higher resolutions files for off-line viewing. I don’t mind creating different jpegs for these purposes, and my intent is for both PC and Mac users to view the same jpegs at their highest quality. After much research and experiments, I remain unsure if I’m taking the right steps. Here are some suggestions/comments that I have come across, and their related questions.

Suggestion/comment 1: "Before converting to jpeg, use Image_Size to change to 72ppi first. This will significant cut down the file size."
Question 1: True or fiction? Is 72ppi the optimal resolution for jpegs to display on both PCs and Macs?

Yes, 72 is the nominal resolution of a computer display. By itself the 72 ppi number means little, so make sure you also change the linear dimensions of the images (in inches or cm) and have the Resample box changed, or nothing will happen.

Suggestion/comment 2: "PCs and Macs have different gammas."
Question 2: Should (or can) anything be done to compensate for this gamma difference when creating jpegs so that they look good on both PCs and Macs?

Yes, sort of. Although under OSX it is easy to set your monitor to match the gamma of a PC, many systems do not do this. The Safari web browser does honor embedded profiles, so keeping the sRGB profile is a good compromise. A rather fussy choice is to have two sets of images, one at 1.8 gamma for Mactintosh, and allow the user to manually select which image to view.

Suggestion/comment 3: "There is an algorithm to incrementally upsample (at +10% increments) an image from low to high resolution for best interpolation. For down sampling from high to low resolution for a jpeg, the reverse algorithm should be applied, using either Image_Size, Save_As_Jpeg or Save_For_Web."

Question 3: True or fiction?

This is called stair step interpolation, and although many respected photoshop folks swear by it, the advanatages are probably fiction – why not try it and see? Since some sharpening algorithms – notably Photoshop’s bicubic sharper – have a sharpening step, multiple sharpens can have the effect of making the image sharper.

Suggestion/comment 4: "Covert from AdobeRGB98 (or other color working space) to sRGB first before creating the jpegs."

Question 4: I find that following this suggestion results in much better looking jpegs on my PC. But should the sRGB profile be attached with the jpeg and why? With the sRGB profile attached, will it make any difference how a jpeg may appear on a PC vs on a MAC?

You got it. Since Mac Explorer and Safari both honor embedded profiles, this is a good way to address the Macintosh platform.

Suggestion/comment 5: "Save_As_Jpeg and Save_For_Web use different algorithms to convert to jpeg."

Question 5: True or fiction? Save_For_Web definitely has many more options to choose from, but is the underlying conversion algorithm that different?

Suggestion/comment 6: "In Save_For_Web, select Uncompensated_Color (or some other choice) and Bicubic_Sharper (or some other choice)."

Question 6: Which Color and Bicubic interpolation are the best options? Should Browser_Dither be enabled?

Bicubic sharper does well for downsizing an image, though you may want to disable it if you go the stair step route to avoid over sharpening. To save space, save for web strips the exif information and the embedded profile, so you may want to avoid it and simply save as jpeg.

Suggestion/comment 7: "You need to create different jpegs for web and off-line viewing, because a web browser can make a color and tonal difference."

Question 7: I understand that a web browser can influence how a jpeg’s size is displayed, but it is true or fiction about the color/tonal difference? If true, how should the different jpegs be created?

There are a number of ways that the browser’s image will differ from what you see in Photoshop. The main one is that, for a PC anyway, embedded profiles are generally ignored, and it is best to convert your images to the sRGB color space for web use.

The colors for an Adobe RGB image will be slightly less saturated when viewed using a web browser than in Photoshop. If you hand off your images to strangers for viewing, I recommend using sRGB for everything, including printing. However, sRGB has the taint of Microsoft, and the larger gamut of Adobe RGB has its allure. So some people choose to use Adobe RGB for editing, in the belief that they are making a political statement by thumbing their nose at monopolistic evil, while at the same time accessing significantly more colors. While this does no harm to your images, if a stranger gets hold of one of your Adobe RGB images, there is a significant risk that they will a less saturated version of your image, and decide that you are not the photographer for them.

There is another, seldom discussed issue, and that is the fact that jpeg gives higher priority to accurate brightness than to accurate color. Conversion to jpeg takes considerable liberties with areas of flat color, sometimes changing them significantly from their original color values. In most cases this is not a significant problem, but for purposes such as accurate rendition of color targets, a non lossy format, such as png, psd, or tiff, is better.


Mike Russell
www.curvemeister.com/forum/
T
Tacit
May 31, 2006
In article , wrote:

Suggestion/comment 1: "Before converting to jpeg, use Image_Size to change to 72ppi first. This will significant cut down the file size."
Question 1: True or fiction? Is 72ppi the optimal resolution for jpegs to display on both PCs and Macs?

Fiction, but a very, very common fiction based on a misunderstanding of what resolution is and how browsers display images.

You do not need to change the resolution to 72 pixels per inch (or any other resolution). What you need to think about is the TOTAL NUMBER OF PIXELS. You want to downsample the image so that the total number of pixels will fit comfortably on a computer screen.

Suggestion/comment 2: "PCs and Macs have different gammas."
Question 2: Should (or can) anything be done to compensate for this gamma difference when creating jpegs so that they look good on both PCs and Macs?

This is true. On most monitors, a picture displayed on an uncalibrated PC system will be darker than the same image on an uncalibrated Mac.

What can you do? Not much. It’s a fact of life. Your images will look darker on PCs than they do on Macs.

Suggestion/comment 3: "There is an algorithm to incrementally upsample (at +10% increments) an image from low to high resolution for best interpolation. For down sampling from high to low resolution for a jpeg, the reverse algorithm should be applied, using either Image_Size, Save_As_Jpeg or Save_For_Web."

Question 3: True or fiction?

True, but largely irrelevant.

When you reduce the size of your image, you can, if you choose, downsample in increments. This may give an image that is slightly better, emphasis on "may" and "slightly." Most likely, unless you are a very critical viewer, you won’t notice any difference. The difference will be less significant than the degradation to the image that will occur when you save it as a JPEG.

Suggestion/comment 4: "Covert from AdobeRGB98 (or other color working space) to sRGB first before creating the jpegs."

Question 4: I find that following this suggestion results in much better looking jpegs on my PC. But should the sRGB profile be attached with the jpeg and why? With the sRGB profile attached, will it make any difference how a jpeg may appear on a PC vs on a MAC?

Do not save the profile.

Two reasons:

1. It makes the file bigger.
2. Browsers discard it without even looking at it by default.

A user can, if he chooses, instruct some (but not all) browsers to use a color profile. In all of my time working on computers, I have never once seen or heard of anyone who actually does this. Ever.

Suggestion/comment 5: "Save_As_Jpeg and Save_For_Web use different algorithms to convert to jpeg."

Question 5: True or fiction? Save_For_Web definitely has many more options to choose from, but is the underlying conversion algorithm that different?

No. However, the two techniques produce different results, largely because the Save As command may by default include extra metadata in the image, such as icons, previews, EXIF data, and so on, which browsers do not use but which make the file size bigger.

Suggestion/comment 6: "In Save_For_Web, select Uncompensated_Color (or some other choice) and Bicubic_Sharper (or some other choice)."
Question 6: Which Color and Bicubic interpolation are the best options? Should Browser_Dither be enabled?

Dither is irrelevant for JPEGs.

"Bicubic Sharper" only matters if oyu use the Save for Web dialog to change the pixel dimensions of the image. If you are not changing the image size in the Save for Web dialog, then this setting makes no difference.

"Uncompensated color" means "Show me the way the image will look in a browser." Often a good idea…

Suggestion/comment 7: "You need to create different jpegs for web and off-line viewing, because a web browser can make a color and tonal difference."

Question 7: I understand that a web browser can influence how a jpeg’s size is displayed, but it is true or fiction about the color/tonal difference? If true, how should the different jpegs be created?

A Web browser does not change the tonal values, color, or size of a JPEG.


Art, photography, shareware, polyamory, literature, kink: all at http://www.xeromag.com/franklin.html
Nanohazard, Geek shirts, and more: http://www.villaintees.com
N
nomail
May 31, 2006
tacit wrote:

A user can, if he chooses, instruct some (but not all) browsers to use a color profile. In all of my time working on computers, I have never once seen or heard of anyone who actually does this. Ever.

As far as I know, Apple Safari uses color profiles by default and you cannot change that. Internet Explorer for the Mac can also use color profiles, but you have to specifically switch it on. I did when I used that program long ago. So now you’ve heard of someone. 😉


Johan W. Elzenga johan<<at>>johanfoto.nl Editor / Photographer http://www.johanfoto.nl
J
jpegchallenged
May 31, 2006
Thanks for everyone’s inputs. With the exception of a few minor points, they are quite consistent and very helpful. I ran two experiments based on them and found one interesting variation in the results.

I started out with an edited file from a 35mm film scan ready for inkjet printing. It is in AdobeRGB98 color working space, with many layers, no saved selections or alpha channels, 16bit, Image_Size resampled at 360ppi, and a whopping 620mb (you read it right). The histogram extends to both ends with no clippings at either, with an abundance of shadow and little highlight. There are some saturated colors that are oog in sRGB. Here are the two experiments:

Experiment one: Convert to sRGB (Flatten_Image enabled, Perceptual, BlackPoint_Compensation enabled), Image_Size (450×300 pixels, 360ppi, Constrain_Proportions enabled, Resampled with Bicubic Sharper), Save_For_Web (Browser Dither unchecked, Uncompensated_Color checked, Progressive Checked, ICC_Profile checked, Quality at 50, Image_Size
[450×300 pixels, 100 Percent, Constrain_Proportions enabled, Quality
with Bicubic Sharper] )

Experiment two: Same as above with two exceptions. A Convert to 8bit step is added before Covert to sRGB. This allows me to enable Use_Dither in Convert to sRGB, which is grayed out in Experiment One (disabled for 16bit?).

Results: Jpeg_1 is 30kb and jpeg_2 is 34kb. Both histograms have significant clipping at the shadow end and minor clipping at the highlight end. Jpeq_2 has more clippings at both ends.

Subjective evaluation: Jpeq_2 has more overall contrast, more color saturation, and is sharper in the fine detail areas. The differences may be subtle, but are very observable for a trained eye. Jpeg_2 looks closer to the original image and would be a better choice. I’ll settle for a potentially brighter or punchier look on an uncalibrated Mac.

Conclusion: Since Use_Dither is the only difference between the two, it appears that enabling it produces a better (or punchier) jpeg, at least for this image, but at the expense of increasing the file size by ~10%.

Would appreciate further comments. After this is settled, I’ll try the stair step interpolation method.

Another question: I can create an action for this quite easily for either Save_For_Web or Save_As_Jpeg. But if an image has saved selections or alpha channels, I wonder how I can include deleting them in an action. In Save_As_Jpeg, I can only save as a copy if the alpha channels are not deleted.
J
jpegchallenged
May 31, 2006
tacit wrote:
In article , wrote:

Suggestion/comment 5: "Save_As_Jpeg and Save_For_Web use different algorithms to convert to jpeg."

Question 5: True or fiction? Save_For_Web definitely has many more options to choose from, but is the underlying conversion algorithm that different?

No. However, the two techniques produce different results, largely because the Save As command may by default include extra metadata in the image, such as icons, previews, EXIF data, and so on, which browsers do not use but which make the file size bigger.

Others also pointed this out. The EXIF data, even for a film scan file in my case, can be useful. For example, if I enter captions with the images, a program and utility can extract and associate them with the images on a web page.

MacBook Pro 16” Mockups 🔥

– in 4 materials (clay versions included)

– 12 scenes

– 48 MacBook Pro 16″ mockups

– 6000 x 4500 px

Related Discussion Topics

Nice and short text about related topics in discussion sections