Optimization of JPG Files for Web Viewing
This topic came about as a result of Scott Eells asking about the variation in appearance an image undergoes depending on the browser, monitor, and other factors. In addition to color shifts and bland color, some images appear to be sharp while others are not. We have all noticed that the same image looks different on Firefox, Safari, IE and other browsers, and that monitors, which by the way ought to be calibrated, often vary widely in their reproduction of an image. While we can calibrate some monitors (see the Tutorial on Digital Workflow), others such as laptops are not as easily manipulated. Moreover, there is difference between PC and Mac monitors: the latter has a gamma of 1.8 while the former has 2.2 so the same image on a mac computer will look lighter than it does on a PC. Finally, there is the problem that many browsers will use the monitorâ€™s color profile rather than sRGB, which is the normal web format that adheres when you save an image in Photoshop for the web. We have all noted that some websites have a sharpness, an almost edible tangibility to their images,that gives them texture and depth. So what can we do to control the look of our images?
Many are of the opinion, like Phil Samhaber, that there is no â€œfoolproof way to make them display the same on all platforms in all browsers without sacrificing either quality or size. Boosting the contrast, sharpening them up and hope for the best seems to be a good idea.â€ As Andreas Kornfeld put it, â€œI find cranking up the contrast is the most important, it will make the images pop, and I rather use a high quality (compression) setting to avoid jpg artifacts. The people that I want jobs from better have a t-1 or dsl connection.â€ These days it doesnt pay to design your website with the dial up customers in mind, so one neednt compress oneâ€™s images so much.
Before I introduce some of the lengthier methods for preparing your JPGs to be viewed on the Web, let me recapitulate some brief advice that will save you some time and probably produce acceptable results. This comes down to saving the JPG on a higher setting (10 or 12), boosting the contrast somewhat (be careful not to blow out the highlights too much), fiddling with the hue and saturation a bit to deepen the color, and sharpening, as Srinivas Kuruganti suggests, go to â€œFILTER and click on SHARPEN, click on UNSHARP MASK, . . . at 50%, radius .6 pixels.â€ After which you either save as a JPG or save for the web, which automatically converts the image from 16 bit to 8 bit and embeds the sRGB profile. (That latter step however poses a problem for us, as will be explained later by Kristjan Logason.) Phil Samhaber advises that one should sharpen an image after resizing and warns that oversharpening will leave nasty artefacts. Jerome Pennington adds, â€œonly sharpen once. It should be the final step in the process. When processing RAW images (I use Capture One) I disable Sharpening and apply Unsharp Mask manually in Photoshop after all edits and adjustments have been made. Also, try converting the image to the LAB color space and sharpening only the Lightness channel, then converting back to RGB.â€ Finally Peter Marshall noted that a plugin exists for sharpening: â€œOn sharpening I really like the FocalBlade plugin for Photoshop, but there are others as good. This has two settings for screen and print (and lots of other things you can set.) It can sharpen edges without increasing grain on surfaces.â€
Now this is where the methods start to go ballistic. Phil goes on to add,
â€œYou could also use ImageReady, which has some very convenient and powerful features (like a detailed preview, advanced quality options etc.) And if you want to spend even more time, you could set up an sRGB proof in PS (view → proof setup → custom → sRGB, perceptual) and adjust/process them with proofing swiched on. (cmnd + y)
A calibrated monitor will also help a great deal, especially once you have the PS color settings figured out.â€
What is sRGB? â€œItâ€™s a color profile primarily used on the web and on the pc side. Translating color and compressing the color space. PS >Image>Mode>Assign Profile or Convert to Profile. They are two different things. Proof is just softproofing on the monitor and not accurate, especially on an uncalibrated monitor, then itâ€™s just useless, as uncalibrated monitors are in general. Still, every monitor is different and web browsers still have no standards converting colors, they are not displaying the same colors, contrast, dynamic range, etc.â€ (Kornfeld).
But if you want to go for the proof, then from the Proof menu, you choose Custom, and â€œfind the sRGB profile in the â€œdevice to simulateâ€ drop down. Choose â€œperceptualâ€ as the rendering intent and save the proof setup, which you can now toggle with cmnd + y. . . . softproofing should give you a pretty accurate preview of what the image is going to look like, rendered in sRGB, on a calibrated monitor.â€ (Samhaber)
The next contributor, Gayle Hegland, argues against using JPG as a format and prefers Tiff: â€œI will cut to the chase and tell you that you need to save your photographs and this is for the web only, not for jpeg emailing, in TIFF which is a â€œLosslessâ€ compression technique file. Lossless techniques compress image data without removing detail.â€ However, there is some question as to whether a TIFF file is in fact optimal for the web, given that while we need quality color and sharp detail, we also need to provide files adequate for reasonably fast download. In terms of optimizing your image file for the web_, small is better than large. Nonetheless, Gayleâ€™s comments are worth reviewing, if only to remind all of us that it is always a good idea to have RAW and/or Tiff files to work from, while the JPGS are the copies we make to email or upload to the web.
So instead of JPG, Gayle offers this five step method courtesy of Ted Forbes, which he enjoins upon all submissions to the IPA:
FIVE STEP PROCESS FOR PREPARING PHOTOGRAPHS FOR WEB GALLERY
1) Image Mode â€“ Please make sure images are set to RGB mode.
2) DPI â€“ Images must be set at 72 dpi.
3) Size â€“ Web Gallery Images will inevitably need to be re-sized .
Make certain that the image height and width are both set to a minimum of 500 pixels. For example â€“ if you have a horizontal scan, make certain you have it
scanned at 72 dpi and a minimum size of 500 px high by 200 px wide or
whatever the width comes out to be. The image can always scale down,
but scaling upwards results in a loss of image quality. Using 500 for
the higher width or height is the safest route to go.
4) Format â€“ Please submit images in Pict or Tiff format. These formats are not Compressed. No JPEG or GIF files please. These result in a quality loss when recompressed for the web site. If you are not the web designer of your site and you have to email your images for upload, as a convenient option, you can use a Zip file software program. Donâ€™t worry, compressing the complete once compressed (optimized) TIFF file via zip or sea formats is perfectly fine for emailing purposes since the file has to be unzipped to upload.
5) Quality â€“ Please make sure that the scan looks like you want it.
In the case where you are not your Galleryâ€™s Web Designer, there should be no color corrections or enhancing done by anyone else after you have saved your photograph changes with your image editing software program. After you have emailed your photograph/s or Zipped Photographic file, each photo will or should go on the site as you have submitted it, but re-sized.
Click on:IPA Portfolio Image Submission Guidelines)â€
In case you dont understand the problem with JPGs, Photoshop spells it out for you: â€œJPEG format supports CMYK, RGB, and grayscale color modes, and does not support alpha channels. Unlike the GIF format, JPEG retains all color information in an RGB image but compresses file size by selectively discarding data. A JPEG image is automatically decompressed when opened. A higher level of compression results in lower image quality, and a lower level of compression results in better image quality. In most cases, the Maximum quality option produces a result indistinguishable from the original.
(See Saving files in JPEG format.)â€
A rebuttal regarding compression and loss will be found at the end of this article. What follows is Gayleâ€™s concluding comments on the value of TIFF. If you are working with JPGs, you may still be able to convert that file back to TIFF and keep it as the basis for all other subsequent uses:
â€œkeep the future simple. If now you notice an extreme difference when you save a TIFF file from that how many times saved(?) jpeg image from your original jpeg scan, then go back to the original jpeg saved scan (if you still have it) and save to TIFF, if that is still bad go to original photo or smart card file, rescan/re-download, redo changes, sizing, resolution, etc. and this time and in the future save first as TIFF, make sure you back it up and put it in the archive bank with all your negatives and smart card files. In the future always work from your saved TIFF, (etc.) file and save a jpeg email copy for your jpeg file. (Notice in Adobe that your jpeg title save has copy attached to the end of it) TIFFâ€™s (or an exchangeable file format) will act as your computer negative that you will guard with your life and religiously download it immediately to that data drive that you hang around your neck and sleep with under your pillow until you get back home to put it in The Archive Bank of Negatives and Smart Card files. This is a conclusion that I have made from my notes above that jpeg is not meant to be used as a transferable or many times over saved file format. â€œOne time, last timeâ€ saved, is itâ€™s correct photographic function.â€
Kristjan Logason is up next with the following very complete explanation. Unlike Gayle he advocates the use of JPG:
â€*Photoshop and saving images for the web.*
When saving images fore the web it is crucial to start with a good image. With a good image I mean an image with lot of information. One of the things that we are doing when saving images for the web is stripping as much information out of the file as possible and compressing the file so that it will load fast enough in the web browser.
1. Open an image.
Best is to start with an image that has not been compressed before, as compression is needed for the web and further compression only degrades the image, makes it pixelated and fussy. Therefore start with a file that is in a lossless form like .psd, .tiff, or raw. Do not use .jpg if possible as the file has already been compressed in a lossy format. Lossy format means throwing out as much information as possible.
2. Color space.
So what about color. I tend to convert all images that are intended for the web to sRGB. In Photoshop PS2 goto Editâ€”> Convert to profile and select sRGB. there can be some different sRGB profiles around and my profile has the full name sRGB IEC 61966-2.1. In browsers that can read the information of the profile the image will show your colors. But again there is no guarantee that it will be as you intended because you cannot control the viewerâ€™s monitor but you get close enough and did your best.
Before you start working on the images you have to see to it that your screen is calibrated. If you do not have a â€œspiderâ€ and calibration software there are simple things that can help you out. One of them is making an image in Photoshop. With an image like this and a gray card in hand (something all photographers own) you can now twist and tweak the color settings of your monitor so that you see all the grades and also ensure that the middle gray is gray not yellow or red. The blackest black should be that but you should detect the color next to it. the whitest white should be just that (no tint) and you should detect difference between that and the next shade and the gray should be gray and nothing else.
In our preparing of images for the web, one thing has to be considered. PC and MAC computers have different gamma settings and therefore images made on a MAC can be to dark, when seen on a PC. PC has a gamma of 2.2 and MAC has a gamma of 1.8. So if you are working on a PC you would want to make your images a little bit lighter and on Mac a little bit darker than usual. In the Ideal world the browser would detect the image and correct it, but that is not the case. . . . Computer screens in homes are not likely to be calibrated but they are more likely to be so in an environment that constantly is working with pictures. For those that have not yet gotten them self an calibration device, it is good to get familiar with the rgb values. That can rely help in color correction work. It is very good to know that a middle gray value is R128 G128 B128 all equal and therefore gray. If you make a new image in photoshop and fill it with gray but your screen is shoving reddish gray yellowish gray it therefore needs calibration or compensation.
3. Images and their size.
As not all browser show images alike, so do also software that one uses to publish images to the net or on the net. Flash is a software that is very popular to use for photographers sites. It is necessary for photographers that are going to use flash to get to know the settings in flash. It is crucial for good result that the images are of the right size. This is also the best for images in other software or just the old fashioned HTML. Sites like flickr that automatically resize images also degrade the image quality. Try to optimize the size to that what is needed. if an image is to be shown at 350 pixels with donâ€™t make it larger or smaller. This can result in fussy image.
What is the right PPi or dpi for the web?
Screen resolution is 72dpi/ppi. That is the resolution images should be in. Not less not more. When resizing images in Photoshop (or similar software) a 350 pixel width 350 pixel height 72 ppi setting the image should be around 200k in size which is not bad for the web. Size does matter here and bigger is definitely not better. The bigger the file the slower it downloads. The only way to show bigger file is to compress it more but that again degrades its quality.
One other way of compressing the file is to use the â€œsave for webâ€ function in Photoshop. For Photographers concerned about their copy right I do not recommend this, as this strips all the data out of the file. To compensate this one can put an logo, watermark or some copyright text on the images, but many photographers think this gets in the way. I try to do every thing. I put all information (IPTC data) in the fields under file info and put copyright text on my images, thus if any one grabs my images they can not argue that they did not know the image was not free.
It is ok when saving images as .jpg for the web to use compression of about 10. I say saving .jpg because it is the best known form on the web and gives you good enough file that has fine color rendition and not to big size I like to use the compression of 12 but my images are for people with good band with. Those with out it are not looking to buy my images. They are at my site for other reasons. Still I try to get them as small as possible so some times I use setting of 10 and in extreme cases I use save for web.
5. Now the final step before saving.
The sharpening. Sharpening should be carried out as the last step. It can differ a bit how much sharpening an image can take. There are many ways to sharpen an image in Photoshop but one has been with me for some time and i like it. The USM or unsharp mask can be found under
Filters→Sharpen→unsharp mask. this is the setting I most often use:
(setting added because of lack of picture) Amount=100, Radius= 0.6, Threshold= 1
It over sharpens the file a bit, but that is compensated when I save as .jpg, as the file gets fussier when the jpg compression is working on it.
Go to →file→ save as
And save the image as .jpg with compression of 10 or 12.â€
However, this post led to a discussion of the need for providing the right dpi, or dots per inch or ppi, points per inch. Kristjan stated that monitors have a screen resolution of 72ppi and that images prepped for the web should conform to that standard. The problem is that monitors are not all uniform with regard to ppi: â€œthe original Mac had 72 ppi. Today, the 12-inch PowerBooks and iBooks have 106 ppi; the 14-inch iBook has 91 ppi; and Appleâ€™s current Cinema Displays range between 98 and 100 ppi.â€ The 17 inch display apparently has a ppi of 117. Andreas Kornfeld at this point kicked in with an explanation of the problem: 72ppi appears to be an outmoded standard, so we need to increase the ppi to 100. If we want the best looking properly proportioned image displayed on these monitors, we still want to ensure that the file sizes do not get out of hand:
â€œA 72 ppi file will look smaller on a 96 ppi monitor than a 100 ppi file. Thatâ€™s why it is interesting to read that the monitor resolution on current monitors, especially the more and more common LCDâ€™s, including all Laptopâ€™s, is up, only the die-hards are still using CRTâ€™s. Disregard the file size at this point. Next step could be to reduce the file size by converting from a 16-bit/channel file to an 8-bit/channel file under Image>Mode>8-bit. Now you can save this tiff file with the layers intact and make a new copy, flatten the image , which is under Layer>Flatten Image, to reduce the file size again. The last step should be a slight sharpening. Nowadays I sharpen once after changing to 8-bit and retouch bad artifacts out. Now itâ€™s time to save the hero as a jpeg. At the 12 quality/100% setting level it should look the same as the tiff file. With the right profile it would be suitable for digital printing. I think for the web you are not able to tell the difference between an 100% and an 80% setting, unless itâ€™s a big image or a big part of the image is a graduated color, like a blue sky. For some vibrant web images check out this german advertising guy http://www.georg-fischer.com/â€
Kristjan demurred by pointing out that â€œits ok to stick to 72ppi but if you know that those that are going to look at your images have more resolution in their screens then make the image larger. That way you keep 72ppi but an image that was 350 pixel wide could be made about400 pixel wide , knowing that its going to be seen on a 100ppi screen. This way it will show its best along all screens but be different in size, but so will also all the context it is in be. All elements on a webpage seen on 72ppi screen is large that on an 100ppi screen but they keep the scale.â€ There was further discussion about the way to define sizing, which you can read by referring to the original thread at the link given below; however, it is largely a matter of semantics and irrelevant to our main theme.
So where do we stand at the end of all this? Andreas Kornfeld gets the last word, which contradicts Gayleâ€™s defense of TIFF files, but his point is that we are trying to optimize the images for the web, so JPG ultimately is in fact the only way to go:
â€œThe initial question was about optimizing for the web. (Those who argue that) resolution doesnâ€™t matter (give bad) advice, because a 4800 ppi file size would (be too) big, and there is no need to do that, as we probably all agree on. Printing is a whole â€˜nother issue, and as far as I can tell we agree on that as well.
Maybe the confusion came when I neglected to mention that I resample my higher resolution scans, because I want to see at least a file that is full screen at 100% when I clean and adjust it, but in the end I bring down the file size by checking the resample bicubic sharper box. Resampling left unchecked, the file will stay the same, in ppi and file size.
What initially irked me to write my post was the post from Gayle, (who argued that) you need to save your photographs and this is for the web only, not for jpeg emailing, in TIFF which is a â€œLosslessâ€ compression technique file. This is wrong advice, a jpeg saved at 100 % looks and prints the same as a Tiff file, I do it all the time, but a jpeg file is smaller, we are optimizing!
(Also, Gayleâ€™s remarks about) â€œincompatibilities with using jpeg files for the web, images must be set at 72 dpiâ€ is misleading, thatâ€™s why I looked into the current state of affairs in terms of monitor resolution in the first place. The 72 dpi is from the days of typography moving to desktop publishing. Because I noticed that my images shrink on good quality monitors, I resample bicubic sharper to 100 ppi, my personal preference.â€
(As for use of the bicubic resampler, here is Andreasâ€™s explanation: â€œin PS>Image>Image Size, you have the pixel dimensions, document size and at the bottom the three check boxes (the CS verison is what I have, might have changed in CS2), the last box is Resample Image: Bicubic, Bicubic Smoother, Bicubic Sharper. I read that bicubic sharper is better for reducing and Bicubic smoother for upsizing.)
An addendum on Sharpening:
The methods outlined above for sharpening are admittedly somewhat crude in the sense that they provide an overall sharpening designed essentially for images viewed on the web; however, this method is not ideal for all forms of output (printing for example), nor would I necessarily use them for anything other than a file specifically intended for the web (so the original Tiff or JPG would have remain untouched). The problem with sharpening is that it increases pixelation, screws with highlights and can introduce artefacts, so it must be undertaken with a light touch. There are several plug ins out there that will take care of all this for you. The most sophisticated of which are FocalBlade and Photokit Sharpener both of which are extremely sophisticated tools that allow you complete control over every step of the process so you can compensate for the inevitable softening that occurs with digital capture as well as subsequently sharpen according to different kinds of output. As Thomas Pickard pointed out to me recently,
I think 2 to 3 pass sharpening is much, much better than sharpening an image at the end. You should try it, the results speak for themselves. I use the actions from the following link. They take a bit of reading to work out how they work; and a bit of use to understand what combination to use, but I would have to say the end result has been much sharper images without the increased highlights or artifacts: Actions (which I use) here. And Scripts (which I haven’t tried) here.
Now what we are talking about here is the Two (or even three) pass method originally advocated and refined by Bruce Fraser and later incorporated into the Photokit Sharpening plug-in. Fraser wrote a good and brief article about this, which you can find here.
As it happens I stumbled on a similar technique, which is downloadable for free from this site. The action works very well and is very similar to Fraserâ€™s method outlined in the article just cited; however, this particular web page doesnâ€™t explain things very well, gives keystroke commands for PCs only, and makes an error in its description of how the levels function should be set. So I am going to spell out the entire action below, and you can see that it is very similar to what Fraser talks about in his article. This kind of subtle sharpening, which Fraser argues is good for â€œpresharpeningâ€ or compensating for the softening of digital capture, ought to be applied as a first pass prior to the other corrections you would make once you open the RAW file and prepare it for conversion to Tiff and JPG. Here is the formula:
make sure that your image is in RGB mode, 8 bit.
Now duplicate your image as a duplicate layer (Menu: Layer: Duplicate Layer) . And if not done automatically, select the new layer and set the blend mode to Luminosity.
It’s time to rule out the parts of the image that there’s no use sharpening, and thereby we have one source of noise less.
If using a PC, Press Ctrl + A to select the entire canvas; otherwise go to Menu: Select: Select All. Press Ctrl + C or F3 to copy the image, then go to the channel palette, create a new channel, hit deselect and press Ctrl + V or F4 to paste. Your Alpha channel will fill with a desaturated version of your image.
Now, having only the new channel selected, run the Find edges filter found in the menu (Filter → Stylize → Find edges).
Open the level dialog (Ctrl + L or Menu: Adjustments: Levels) and use these settings:
Channel: Current (or Alpha 1 in fact)
Input levels: 126 / 1.05 / 236
Now run the Gaussian blur filter found in the menu (Filter → Blur → Gaussian) and set Radius: (1.5)
Open the levels dialog again and use these settings:
Channel: Alpha 1
Input levels: 88 / 1.00 / 244
Now click the “Load channel as selection” button and click Select: Inverse.
Then we have to contract the selection (Select → Modify – Contract.. in the menus). Set it to contract by 2 pixels
Finally select the RGB channel .
Apply Unsharp mask (Filter → Sharpen → Unsharp mask.. in the menus) with these settings:
Deselect. Then delete the alpha channel.
If you think the sharpening was too powerful on your image then lower the layer opacity for the sharpened layer untill you’re satisfied with the result. Finally merge the image: Menu; Layers: Merge Visible.
You can see that this is very similar to what Fraser outlines in the article cited above, and of course you can use one or the other of these methods yourself, create your own action in Photoshop, and thus avoid having to shell out bucks for a plug-in. Moreover, if you yourself are not printing these images out, you can use this as a first pass method and leave the final sharpening to the publication or printer that is handling your files once you deliver them. The virtue of either of these methods is that no pixelation occurs in unwanted areas, the important edges are sharpened but the rest of the file is left untouched (which allows for subsequent sharpening if need be) and you can vary the coordinates depending on the file. I found, for example , that varying the coordinates for the Gaussian blur stage and the Modify/Contract stage can subtly influence the results. Either way, you will discover that your images improve tremendously once you initiate this action â€“ just compare the file before and after and you will plainly see the virtues of sharpening in this manner.
The original Thread:
an example of the problem originally put forth by Scott Eells (click on JPG vs JPG):
On the sRGB color profile:
Here is a resource for a bunch of tutorial and pdfâ€™s about color management:
Articles on Monitor Resolution:
2006-06-21 23:38:56 UTC
Jul 10 2006