Preparing JPEGs for the Web & More Photoshop Tips

buff-breasted-sandpiper-striding-bpn-beach-cleaned-up-_y9c2860-nickerson-beach-long-island-ny-copy

This image was created at Nickerson Beach, Long Island, NY with the tripod-mounted (I was kneeling) Canon 800mm f/5.6L IS lens, a 25mm Extension tube, and the EOS-1D Mark IV. ISO 800. Evaluative metering +2 stops: 1/1000 sec. at f/5.6

Lens micro-adjustment: -4. Central sensor/AI Servo/Rear Focus AF (with AF active at the moment of exposure).

The extension tube increased magnification about 3% and allowed me–if need be–to focus about 2 1/2 feet closer than with the prime lens alone. Lots of beach clean-up and seaweed re-arrangement. See the original below.

For a greater appreciation of the image, click on the photo. Then click on the enlarged version to close it.

Preparing JPEGs for the WEB

When questioned about poor image quality more than a few folks on Bird Photographers.Net complain about the 200kb file size limit. I am always baffled by these comments and I never have a clue as to what folks are doing that causes their image quality problems.

Here is what I am am currently doing: I start with my master file and crop horizontals 1024 px wide at 96 dpi. I know that that the word on the street is to save web JPEGs at 72dpi but I have been saving at 96 dpi since forever: if it ain’t broke, done’t fix it. (With most of my avian images I selectively sharpen the bird only in my master files using a contrast mask and a hide-all mask.) I sharpen my JPEGs to taste using Unsharp Mask with the Amount between 130 and 225 (to taste) and the Radius always at .3. The average Amount would be about 180. Then I Save for Web with the image optimized to <195 kb. If you convert to sRGB you need to make sure that the Embed Color Profile box is checked when you save for web. If you are not right on the money with all of the above you can find everything detailed in our Digital Basics File, an easy-to-follow PDF that is sent via e-mail. DB includes my complete Digital Workflow, dozens of great Photoshop tips, and free updates for as long as I am still pushing the shutter button.

I have been preparing my JPEGs for web presentation this way (albeit with smaller sized images and smaller KB allowances) for more than ten years and all that I have ever heard is “Your JPEGs look great!” I have never once had image quality problems by having to save at <200kb and never even in the old days when saving at 800 or 600 pixles wide and <80 kbs. Ever. So when I see comments like those above I am always mystified.... Do note that many of the images posted to the web are not optimized to less than 200kb but if I downsize them for BPN they look just as good!

y9c2860-bpn-nickerson-beach-long-island-ny

This is the original image from which the image above was created.

Note: the image above is unsharpened. Here’s what I did to get from A to B (my master file saved as a TIFF at 300 dpi): Leveled the image with the Ruler Tool based on the foot. Expanded canvas with the Crop Tool Added beach with a flopped Quick Mask. Filled in open spots with the Clone Stamp Tool. Cleaned up the seaweed with a series of Quick Masks and moved a small pile of the green stuff from behind the bird to in front of it. Additional beach clean-up with the Patch Tool, the Clone Stamp Tool, and the Spot Healing Brush. Used those same tools to clean the large sands specks from the birds head. Eliminated the dark area behind the leg with the raised foot using Denise Ippolito’s great new Improved Protect and Defend Cloning on a Layer. Click here for more info or to get the free tutorial. Selectively sharpened the bird only using a contrast mask and a hide-all mask. Lightened the iris. The usual contrast and Selective Color work. Flattened, converted to 8-bit, and saved at full resolution as a TIF.

Editing Your Comments

Many folks have noticed that it is no longer possible to edit a comment using traditional methods. We are aware of the problem; it was caused by the recent update to the latest version of Word Press. Do note however that you can correct your errors by using the backspace key to navigate. Peter Kes is working diligently to find a solution.

Shopper’s Guide

Below is a list of the gear used to create the image in today’s blog post. Thanks a stack to all who have used the Shopper’s Guide links to purchase their gear as a thank you for all the free information that we bring you on the Blog and in the Bulletins. Before you purchase anything be sure to check out the advice in our Shopper’s Guide.

Support both the Bulletins and the Blog by making all your B & H purchases here.

Remember: you can earn free contest entries with your B & H purchases. Eleven great categories, 34 winning and honored images, and prize pools valued in excess of $20,000. Click here for details.

Canon 800mm f/5.L IS lens. Right now this is my all time favorite super-telephoto lens.
Canon EF 25mm Extension tube. I am never out without one of these in my vest; it allows for closer focus in a variety of situations.
Canon EOS-1D Mark IV professional digital camera body. My two Mark IVs are my workhorse digital camera bodies.

And from the BAA On-line Store:

LensCoats. I have a LensCoat on each of my big lenses to protect them from nicks and thus increase their re-sales value. All my big lens LensCoat stuff is in Hardwood Snow pattern.
LegCoat Tripod Leg Covers. I have four tripods active and each has a Hardwood Snow LegCoat on it to help prevent further damage to my tender shoulders :)
Gitzo GT3530LS Tripod. This one will last you a lifetime.
Mongoose M3.6 Tripod Head. Right now this is the best tripod head around for use with lenses that weigh less than 9 pounds. For heavier lenses, check out the Wimberley V2 head.
CR-80 Replacement Foot for Canon 800. When using the 800 on a Mongoose as I do, replacing the lens foot with this accessory lets the lens sit like a dog whether pointed up or down and prevents wind-blown spinning of your lens on breezy days by centering the lens directly over the tripod.
Double Bubble Level. You will find one in my camera’s hot shoe whenever I am not using flash.
Be sure to check out our camera body User’s Guides here.
The Lens Align Mark II. I use the Lens Align Mark II pretty much religiously to micro-adjust all of my gear an average of once a month and always before a major trip. Enjoy our free comprehensive tutorial here.
Canon EOS-1D Mark IV User’s Guide. Learn to use your Mark IV the way that I use mine.

Did you like this? Share it:

21 comments to Preparing JPEGs for the Web & More Photoshop Tips

  • avatar Troy

    Traditional landscape photos can be harder to get below the 200k limit because more of the photo has in focus/fine detail usually.
    A lot of bird photography has a lot of bokeh or completely OOF areas that the jpg compression algorithm can compress greatly without any detectable decline in image quality. This is the same sort of reason that raw files of higher iso are usually a higher file size than lower iso files, because the noise can’t be compressed compared to the smoother low iso files.

    Hi Troy, I completely understand that but I do some landscapes and some bird images with tons of fine detail; the 200kb files look great…. I do agree that huge files will of course look better to some degree. artie

  • I love these clean, white shots. By the way, greetings from Frank Nicoletti from Hawk Ridge in Duluth, MN. Met him in the banding blind this morning.

    Hi Back to Frank. It has been a while. Is Dudley still around? artie

  • Is the “Nov 2009 Revision & Update” the latest and greatest version of your Digital Basics?

    Hey Doug, No. There was a free update sent in March 2011. Please e-mail us. Let us know how you paid and we will get it to you. artie

  • avatar Bill Richardson

    Thanks Mike. I really like the improvements in PK2. I tried capture sharpening in PK2 and in ACR and could not tell a differecne so I went the easy route of doing it in ACR. I do creative sharpening in PK2 also. I will have to try resizing to 360 ppi in Photoshop before final sharpening/printing. It will be interesting to see if I notice an improvement. Thanks for the info!

  • I prefer to keep things simple when printing. Lightroom makes a great job of it. Leave all the resizing and sharpening to LR and leave the original layered image alone. In the days before we went Mac I used qimage. That did a fine job too.

  • @Bill Richardson, I do capture and creative sharpening using PK Sharpener 2 in Photoshop, size for printing, and then do output sharpening with PK Sharpener 2 as the final step.

  • avatar Bill Richardson

    Thanks Mike. I attended the Epson Academy about 4 years ago and was wondering if that was the case. I presume you resize to 360 ppi BEFORE final sharpening for print? (I capture sharpen in ACR and use Pixel Genius sharpening for output sharpening and print on Epson 2200 and 2400 printers)

  • @Bill Richardson, I saw Jeff Schewe make the same recommendation that you mention in the Luminous Landscape “From Camera to Print” video and that prompted me to pose your same question on a popular online forum about 2 years ago. At that time, I was informed by a reliable source that Jeff Schewe has changed his recommendation on this and now recommends always resizing to 360 PPI prior to printing. In many cases, it probably will not make a visible difference either way, but my feeling is that the driver may indeed do as good a job as Photoshop in many or even most cases but I don’t think it would ever do a better job so I stick with Photoshop.

  • avatar Bill Richardson

    Mike Milicia: Hi Mike. Great explanation. Regarding your comment that it is best to resize an image in Photoshop before sending it to the printer, it certainly makes sense that Photoshop would do a better job. It also makes sense that resizing to 360 ppi and then sharpening that resolution would be preferable to sharpening one resolution followed by printer resizing (although time consuming if you print many sized prints of the same image). However, when I attended the Epson Academy, Jeff Schewe preached never resizing from the native resolution so long as it was between 180 and 480 ppi. I adopted his approach and have seen an improvement in my prints. What is your take on this?

  • […] Preparing JPEGs for the Web & More Photoshop Tips […]

  • Artie, Keith & Martin are correct that the PPI/resolution setting on a digital image file has no effect when an image is displayed on a monitor. Here is my attempt to explain why :

    When an image is sent to a monitor for display, the monitor device driver does a simple one-to-one mapping of image file pixels to physical monitor pixels. The physical size of the image on the screen is strictly a function of the pixel dimensions of the image file and the physical pixel density of the monitor. For example, if you display an image file with pixel dimensions of 800 x 1000 on a monitor that has 100 physical pixels per inch, you will get a 8″ x 10″ image. If the same image file is displayed on a monitor with 80 physical pixels per inch, you will get a 10″ x 12.5″ image. A monitor with more tightly packed physical pixels, i.e. a higher number of physical pixels per inch, has the potential to display a finer degree of detail. But to achieve the finer detail and have the displayed image be equal in size, you would have to send it an image file with more pixels. The resolution or PPI on a digital image file is just a metadata attribute and is ignored by the monitor device driver. It has no effect on the quality or appearance of the image. Projectors work the same way.

    The only time the PPI of a file is consulted is when printing. The printer driver looks at the pixel dimensions and the PPI attribute of the file to deduce the physical size of the print being requested. The driver will then upsize or downsize the image file as needed to come up with the number of pixels that the printer actually needs to have in the source file to render an image of the desired size on the printer. For example, Epson printers need 360 pixels in the image file for every linear inch of printed output. If you request a print of a file with pixel dimensions of 1600 x 2400 and a PPI of 200, the printer driver concludes that you would like the image to be rendered as an 8″ x 12″ print. Since the driver knows that the printer needs 360 pixels of image for every inch of linear output, it then goes on to upsize the image file to 2880 x 4320 pixels before sending the image on to the printer. Note that it is generally recommended that you do this upsizing or downsizing yourself in Photoshop before requesting a print as Photoshop is likely to do a better job at resizing than the printer device driver.

  • avatar Bill Richardson

    I use an action to resize, sharpen and stroke my images for the web and have done some experimentation to make it work as well as possible in one click. I find that using bicubic sharpen for downsizing works much better than the alternatives even when applying sharpening last as recommended. Bicubic has no sharpening component and bicubic sharpen does and I used bicubic to avoid “automatic” sharpening. I previously assumed adding additional sharpening later to an image resized using the bicubic method would work to make up the difference. However, my experience is the opposite. I therefore use bicubic sharpen always for web resizing and then apply whatever sharpening I need. This is in Photoshop, I don’t use Lightroom and don’t know if the resizing options are even available there. As to ppi, your monitor reads the pixel dimensions and does not care what the ppi is. BTW, ppi is the proper term, dpi refers to printing resolution.

  • avatar Jay Gould

    Artie, most of the time I see the complaint about the 200 limit in relation to landscapes; not avian. Is there a difference in the amount of information in a landscape image that causes landscape images to suffer from jpeg compression more so than images of single birds? This would be an interesting discussion in the Workflow Forum. Cheers and thanks for the 96dpi information.

    It makes zero difference. Start a thread and shoot me a link via e-mail.

  • The clean up, re-positioning of the bird and the really clever balancing act with the seaweed transforms this excellent image into a great one! Love it.

    Regarding the unsharp masking I was under the impression that you sharpened 3 times using a lesser amount and radius. Something like 0.2 and 125. Am I imagining it Art or have you simply updated your sharpening methods?

    Still in place with my 800 wide JPEG action as it works fine generically without over-sharpening. I use the updated method for sharpening individual images. artie

  • i have learned so much and enjoyed your art over the years. Thank you. I want to share some thoughts. I have loved photography since college and I am now 79 and still learning from you and Denise. Nikon has been my equipment of choice since my first Nikon F (that I earned in college) and I use PSE 9 and Lightroom3. Because, of that combination of equipment and software coupled with the fact that you and Denise share and teach so much that is of inestimable valuable I spend time converting as much as I can to fit my style and equipment. I am so grateful for all you two do and feel we will meet some day and I can, in person say, “Thank you!”

    Raleigh, Many thanks for your more than kind words. We all shall meet somewhere sometime some way. artie

  • The DPI value in an image really doesn’t matter at all, folks – it’s just a tag and it means nothing in a web presentation context.

    I’ve just uploaded a file which I’ve saved at 30 DPI:
    http://www.capture-the-moment.co.uk/tp/tfu29/upload/tree_sparrow_RT_1_30DPI.jpg

    and at 3000 DPI:
    http://www.capture-the-moment.co.uk/tp/tfu29/upload/tree_sparrow_RT_1_3000DPI.jpg

    And as you can see, they’re identical, and have the same file size. Strangely, the “30 DPI” file shows 300 DPI in some exif viewers/image editors, but that doesn’t change the point.

    Thanks Keith. Can you explain why? artie

  • I’m always baffled when I see references to dpi when saving images for the web. It’s completely irrelevant what you set the dpi to. All that matters is the pixel size. The dpi setting only makes a difference when you print an image.

    Thanks Martin. Can you explain why? artie

  • avatar John Storjohann

    Artie, for me the most impressive thing is what you did with the composition by deciding to move the clump of seaweed from the back to the front. It’s something I wouldn’t have thought of…and it lends balance and additional depth in its new position. Like Denise, I love the raised foot. Thank you for sharing.

    Thanks John. Not sure where I got my sense of compositional balance but it’s nice to have :) artie

  • Thanks for your workflow, Artie. I’m pleased to see I’m not the only one who ‘neatens’ the scene by cloning.

    I read somewhere that 72ppi is the Mac screen resolution and 96ppi is the PC screen res. As most of my viewers have PCs I’ve always gone with 96ppi.

    What me neaten? :) artie

  • Looks great and I love the raised foot! I think you left in just the right amount of seaweed. Nice work and thanks for sharing your web presentation workflow.

    Thanks Lady D. artie