Putting LF black and white on the WWW

[Ed Richards]

I am curious about the workflow to get decent black and white images in WWW size jpgs. My basic work files start as 190 meg tiff files and I process them in PS CS2. Any tricks to avoid posterized skies when you have a subtle sky gradient? Do you change the contrast from what makes a good print? What sizes work best, and do you down sample the image before saving as jpg?

[David A. Goldfarb]

I downsample in stages, 50% each stage (except for the final stage where I want the image to be a certain size), and resharpen at each stage in decreasing amounts.

[Ken Lee]

First of all, there's no need to make the files any greater than 100 dpi, since monitors can't resolve that. (They are great at displaying colors, but not good at details). Perhaps 72 dpi is enough.

Flatten the image, then down-size, then sharpen. At such small sizes, a little sharpening goes a long way. If your images are toned, then make sure your images are RGB. If you want B&W to be really B&W, then convert to grayscale before saving.

Another thing to consider is that nowadays, 1024 x 768 is fairly standard. The desktop and browser takes up a fair amount of that space, so somewhere around 500 or 600 pixels wide is big enough for people to get the idea.

Unfortunately, monitors are not square, but are horizontally oriented. This limits your ability to display vertical images. Oh well. If you don't take any in the first place, you'll be all set :-)

[Michael Graves]

Ken said to sample at 72dpi; and for the typical .28 dot pitch monitor that's good. However, there is a growing number of .25 dot pitch monitors on the market. For these users, a 96dpi image would be better. For the users who only have .28 you won't be hurting anything.

I'd like to expand on the question to experienced PS users. Would you get better results scanning a fine print and posting a full color scan in order to pick up subtle differences in image color from effects such as selenium toning? I realize this would result in a larger file size, but I would think that procedure would yield a superior image.

[paulr]

Doing your very last sharpening, tonal adjustment, and jpeg conversion in adobe imageready can help a lot. It gives you a live preview of every possibility you try. It also lets you preview on a "typical" gamma 1.8 macintosh monitor or gamma 2.2 pc monitor.

My policy now is to convert web graphics to the sRGB color space, since it's based on the closest thing to an average among pc monitors. it's limited color gammut isn't a factor with black and white. As far as macs, most mac users now are using browsers that are color managed and that respect the profile, so this takes care of them, too.

There are probably a lot of ways to get good results ... whatever method you try, be sure to test your results on actual browsers on other people's computers. Be sure to include laptops--i find most laptops are set up with outrageously bright screens.

The goal is to get your work looking acceptable on a wide range. Abandon any ideas of perfection.

[Ken Lee]

Are you asking if the file should be scanned and saved in color, versus B&W ?

It all depends on how well-calibrated you monitor is. If you can be confident that you are seeing the "real" color space that others will see, then color will be better. If not, then you might be in for a surprise to see how your work appears to others. The same can be said for B&W: the grey values might look great on your setup, but could be way off.

Makke sure to get a monitor calibration tool. I like Gretag-McBeth's EyeOne.

[Jeffrey Sipress]

Work in 16 bit as long as you can to reduce gradation banding. I use Fred Miranda's Web Presenter Pro routine to automate the downsizing chores. Then I use his Intellisharpen routine at between 5 and 10%. There are other available similar routes.

[Ken Lee]

Small clarification: "Ken said to sample at 72dpi"



You can sample or scan your image at high resolution, like 2500 or 1800 or whatever - but the jpg you put on the web need only be somewhere around 100 dpi. Anything more, is wasted bandwidth that nobody can see in a browser.

[Janko Belaj]

sorry, pardon me, but what have to do dpi with our browsers? AFAIK, Web browsers are asking Web servers for physical dimension of image. And Web-masters are coding with physical dimension i.e. photo.jpg



I have made small test (one ugly picture, was just testing 7mm lens on Oly dSLR) with 72, 96, 150 and 300 dpi resolutions. size 300x400 pixels. and every of my browser (Safari, Firefox, iCab) is showing photo of same size... here is that link: dpi test in new window (http://www.belaj.com/unsorted/dpi/" target="blank) (html coded without width and height attributes)



for those who want to force browser to load only the pict, here are links (will open in new window too):
http://www.belaj.com/unsorted/dpi/72dpi.jpg (http://www.belaj.com/unsorted/dpi/72dpi.jpg" target="blank)
http://www.belaj.com/unsorted/dpi/96dpi.jpg (http://www.belaj.com/unsorted/dpi/96dpi.jpg" target="blank)
http://www.belaj.com/unsorted/dpi/150dpi.jpg (http://www.belaj.com/unsorted/dpi/150dpi.jpg" target="blank)
http://www.belaj.com/unsorted/dpi/300dpi.jpg (http://www.belaj.com/unsorted/dpi/300dpi.jpg" target="blank)



(O.K... maybe browsers on Win systems act differently, I cannot test that right now, but such behavior would be against w3 rules.)

[Ken Lee]

Janko -

You are perfectly right. Your web page is a perfect demonstration.

As your page shows, there is no reason to send an image to a browser at 300 dpi, if 72 dpi will result in the same quality. That is why we recommend that people send images no larger than 100 dpi.

Small images occupy less storage on the server, and they travel faster over the wire. This is especially helpful to people who have a slow internet connection.

If you do not specify the dimensions of an image in the "img" tag, then the image will appear in the original size of the image. The "width" and "height" keywords are optional only. If your photo is 200 x 300, and you want it to appear 200 x 300, there is no need to specify width and height. The "alt" tag is also optional, and so is the "border" tag.

[Janko Belaj]

and, btw, just have checked, if you export your photograph with Adobe Image Ready (or Photoshop's "Save for Web" function, what is the same code anyway) they will create files some new resolution (not pixels size!) no matter what was the original resolution: 100dpi jpeg, 72 dpi gif and 72dpi png... (on my Mac)

[Janko Belaj]

yes Ken, but - 300dpi, 1200dpi and 72dpi image of 400x300 pixels have almost same byte size... should have same size but compression can create some small changes (in just few bytes). And, btw, speaking about optional attributes - width and height (and alt too!) are demanded by html (and newer) specifications... otherwise you will have "dancing" page while loading. Browser take information about width and height of incoming element and can prepare space for it only if it is declared in html code. It is not a "must have", but is good to be there. :-))

[robc]

Ken and others,

It amazes me that people still refer to screen image as being 72dpi or 96 dpi or 100dpi. Just how do you think you can set that value? If you set dpi in PS your screen software ignores it since it takes its resolution from the graphics card software parameters which do not look at PS or any other image software.

Yes old crt's were around 72dpi but that is not a fixed value. A lot of newer crt's are 96dpi but again that is not fixed.

if you change your screens native resolution from say 1280 wide to 800 wide and both options use the full width of the screen then I would like you to tell me how they can both be 72 or 96 or 100 dpi wide when at the 1024 setting a 600 pixel wide image will be using much less screen width than at 800 screen width resolution width.

It is further complicated by the fact that on a crt you can adjust the screen by stretching the width and height.

If you want to know just how many pixels per inch your screen is currently using just take a ruler and measure the viewable area width and divide that into the screen resolution width.

there will be an optimum viewable screen width in inches to tie up with pixel dot pitch so that you get best results on your screen but you will need to play with stretching your screen to find it. It will also depend on the screen grid(if you have one).

So please forget the mythical 72 or 96 or 100 dpi image concept. Its pure mis information(unless you are talking about printing).

for simplicity just think of screen resolution as x pixels wide and image as z pixels wide and it will occupy z/(x/100) percent of your screen width which is z pixels funnily enough.

please note that because your screen is not capable of displaying 5lp/mm (10 pixels per mm) then all on screen images should appear soft. Using sharpening to create artificial edge effects does two things.

Firstly it makes the image look harsh, especially at lower screen resolutions.

Secondly it increases the jpeg size when you save for web. Omit any sharpening(or only use a aver small amount) after the last downsize operation and use a higher jpeg quality instead which lessens the amount of jpeg artifacts.

To get to final size from a 4600 pixel wide image, first do any major sharpening you need then take final size, say 400 pixels and double it up to 3200. make first resize to 3200 then 1600 then 800 then 400. Skip sharpening at final step.

take a look at the two images here (http://www.visualperception.net/photoart/gallerygbp/artgalleryArchives.php). They were made from scans of prints and employed blurring in the sky sections to get rid of noise and downsizing artifacts from big files. Some manual digiedge sharpening was used on route.

The proof of the pudding is to be seen by taking your screen resolution to 600x800dpi where the images still look reasonably smooth even on my 19inch 1280 x 1024 native res monitor.
The other images on my site will look crap at 800x600 because they have been used as work images whilst developing and are not optimised.

Note that bicubic downsizing introduces image artifacts. For pictorial images such as landscapes they are not usually visible. When they are, then some intermediate action such as blurring may be necessary to remove the artifacts.

[Ken Lee]

"Just how do you think you can set that value? "



Sorry if I gave the impression that one can set the value... You are right !



As you and others have stated very nicely, not only is monitor resolution limited, it varies from monitor to monitor, and from setting to setting.



For that reason, list members have recommended (and demonstrated) that one should not really try to provide a truly high-resolution image over a browser: after around 72 - 100 dpi, there is no discernable gain.

[Joe Forks]

As a few of the others have mentioned, pay absolutely no attention to dpi, or ppi for web presentation, all that matters is the total number of pixels, or literally pixel width x pixel height of the uploaded image, barring img tags which resize an image within the browser.

Here is an image which I sized at 4 (four) ppi, then uploaded to the web.

www.logojoe.com/photography/images/clouds_4ppi.jpg (http://www.logojoe.com/photography/images/clouds_4ppi.jpg)

Where the ppi /dpi comes into play, is of course printing images.

Forks

[paulr]

"if you export your photograph with Adobe Image Ready (or Photoshop's "Save for Web" function, what is the same code anyway) ..."

This is indeed how it's supposed to work, but for some reason I get much more predictable results using ImageReady rather than using save for web. Often with save for web, things look a lot different from my expectations in a browser. It might just be that it lacks the preview options. Save for web does work well for me for non-photographic art--gifs and things for web design.

[Doug Dolde]

One way to avoid artifacts is to size it a bit oversize on your monitor. Do a Print Screen or Grab on the Mac and paste the results into a new document. Then you can fine tune the size without introducing artifacts.

[robc]

paul,

in photoshop save for web, right click in the optimised image and make sure uncompensated colour is ticked.

The web uses sRGB to display images. At least IE does and it ignores embedded colour profiles. If you have use document colour profile ticked then you will see the same image as your working profile for the image, which if you are using adobe 1998, will not be what you see on the web (since IE ignores it). i.e. IE6 defaults to sRGB regardless of your image profile.

For this reason you should convert your image to sRGB before save for web in PS and use the uncompensated colour option so that Adobe 1998 (or whatever) is not used to display the optimised image in save for web.

[paulr]

This is the equivalent of what I do; but for whatever reason I often get unpredictable results with save for web. I know it works for some people, but I wanted to throw that out there in case anyone has the same issues.

[Mike Davis]

I came into this conversation in 1994.

The importance of dpi, ppi, etc is as a method of making sure that the image is a reasonable size.Those of us who come from digital print and started doing electronic retouching in the 80's think of dpi in the same way that a dot etcher thought of lpi for screens.

In general 72 or 96 or 100 dpi and a maximum size of 500 or so pixels in the widest dimension will produce an image that is viewable and doesn't take forever to download.

I am reminded of an art director from many years ago who wanted to use a 300 dpi 100% scan of an 8x10 on a web page. In those days 28k modems were still the rule with occasional users having isdn and many companies (including fortune 500's having fractional t1's). The image that this art director wanted would download at about 1kbyte/second. It's size was around 50MB. That of course meant that 50,000 seconds or around 14 hours would be required for download. These days things are faster, but huge images still cause problems for servers and users with slower lines. Call it whatever you want, dpi, ppi, lpi, fbi, cia, bbc, bb king, or doris day (thanks John and Paul), but keep the images small enough that downloads are reasonable.

[Brian Ellis]

I started with the prints, not the negatives. Quality on the web isn't good enough IMHO to justify starting out with the negative and then having to do all the dodging, burning, etc. that was done to make the print. This assumes of course that you already have the prints. I used 500 ppi for the longest side of each image and let the short side fall wherever it fell so that the total file size varied a little but not a whole lot. On most monitors this produces a relatively small image but brings the image up quickly. IMHO if an image downloads very slowly people are too impatient to wait around, they'll just move on to another site.

[Ken Lee]

"What sizes work best, and do you down sample the image before saving as jpg?"



"pay absolutely no attention to dpi, or ppi for web presentation, all that matters is the total number of pixels, or literally pixel width x pixel height of the uploaded image"



In Photoshop, when you re-size an image, you can describe it both ways: in Pixel Dimensions, and Document Size, which includes Resolution, IE ppi.



http://www.kenleegallery.com/images/personal/ps1.jpg

[Janko Belaj]

Ken, you are messing it up a bit. Document size is connected with printing but not with on-screen dispaly (tv, web, pda...). Pixel Dimensions is what is relevant for this topic.

[Frank Petronio]

Using Image Ready or Photoshop's "Save for Web" strips away some of the header information that get embedded into a jpg file when you just save it as a jpg file. I have mine set to strip away any color profile as well (it's a check box) as I think it is better not to include any profile. The result is a smaller file.

I have downsized large files with long gradiants in one step without banding. Banding or moire will occur when you unluckily match the frequencies of the image and the screen, not because of the numberr of steps you take downsizing. The important thing is to not oversharpen - slightly softer images translate to jpg better.

Downsizing in steps is important for print work where you want to maintain max sharpness. But too much sharpness can work against you with web images.

I just pick the pixel dimensions I want to work with for the image size and could care less about the dpi. In fact, it is almost always wiser to set Photoshop to use Pixels as your default measurement unit and forget about inches or millimeters until the last printing stage.

Many newer websites use 700-800 pixel wide images, which are very nice to view on the majority of screens. I'd still aim to keep the jpg size under 100K but I am less worried about the slow downloads than I used to be because I figure that viewers looking at photos will be more tolerant than a general interest website. And it is surely nice to see a larger image - even if it is more tempting to "thieves". I'll take that tradeoff - seeing big embedded copyright symbols and elaborate anti-piracy warnings are pretty ugly and the people stealing your images are just kids and scum.

One teenage girl blogger linked her homepage background to one of my images, piggybacking off my server no less. So it was an easy matter to change my image into something very uncomplimentary and she quickly changed her page. You can tell if someone is doing this by looking at your web stats.

[Ken Lee]

Joe and Janko: I was wrong. Now I see what you are talking about.

Thanks !