Charles Lanteigne Photo
 

Saving Images for the Web

Posted on


When exporting images for the web, resizing them down and saving them as JPEG one by one isn't a proper approach—it's tedious, and incomplete. There are a number of additional steps that are important to take into consideration.

Sharpening

Every image (that has presumably been properly capture sharpened already) needs a certain amount of output sharpening applied at the end of the workflow that is appropriate for the intended destination of the image. This is true whether the image is to be printed or simply displayed on screen. Screen sharpening is subtle, because the image's resolution is low, but it definitely makes a difference.

Unless you're using a third-party plug-in (such as PhotoKit Sharpener which is, at the core, what is embedded in Lightroom), you're gonna need to apply some sharpening using a filter like Unsharp Mask or Smart Sharpen.

Here is the same image resized 600 pixels wide and saved as a JPEG (80 quality):

  • The first version was resized straight Bicubic, but not sharpened;
  • The second was resized Bicubic Sharper, but not sharpened;
  • The third was resized straight Bicubic and sharpened using Smart Sharpen (100%, 0.1px, Lens Blur, More Accurate);
  • The fourth was resized and sharpened for screen using Lightroom.

Different Screen Sharpenings

No Sharpening   Bicubic Sharper   Smart Sharpen   Lightroom

I prefer the two last renditions, which make the unsharpened version look downright soft. I am not happy with the result using Bicubic Sharper in Photoshop's "Image Size" dialog box—I find it too muddy for my taste.

Metadata

When I put an image on my web site (or send it to another web service), I want my copyright and contact information to be included, but I don't want to include the camera's EXIF data, geotagging, keywords, ranking/labels and other metadata to be available to the world.

If you simply save an image as a JPEG from Photoshop, all the metadata will be included with it. To avoid this, you need to use an export method that strips the parts you want to keep for yourself. Photoshop's "Save for Web & Devices..." can do that, as well as Lightroom and other applications.

Two ways to restrict metadata when exporting an image.
Left: Photoshop's "Save for Web & Devices...". Right: Lightroom's Export dialog.

Color Space & Bit Depth

If you simply open an image in Photoshop and save it as a JPEG, Photoshop will convert it to an 8 bpc image (a requirement of the JPEG format), but it will leave it in whatever color space it was originally. I use ProPhoto as my working color space, so that would not be a good idea for the web (or for 8 bpc images generally). It's easy to forget, so you want to use a method that converts the image to sRGB automatically.

You also want to play on the safe side and embed the color profile with the image (which is a matter of about 3 KiB, so not a concern in terms of file size). By default, browsers that don't support color management or cannot find a color profile embedded will simply presume sRGB, but it's not worth taking the chance (Safari, for example, doesn't handle untagged images properly).

Automation

The biggest problem, whichever way you decide to use, is the tedious nature of it all. You don't want to manually open each image, resize it, sharpen it, convert its color space, and save it by restricting the metadata. You especially don't want to have to deal with different aspect ratios (which can complicate the creation of actions), and you don't want to have to re-enter/validate each parameter in each dialog box each time (which inevitably leads to mistakes).

What you want is a way to batch process the whole thing. Using Photoshop's "Image Processor" script (accessible via Bridge as well) is one way, but it doesn't do everything right (you'd still have to invoke an action to perform the sharpening and stripping metadata—and don't get me started on file renaming and location.)

Batch processing isn't enough, because you might have specific dimensions and compressions for when you post to your web site, which are probably not the same as for your blog, facebook, flickr, email attachments, etc. You want to be able to save different configurations for scenarios that you use often, otherwise you'd still have to manually enter/validate parameters in the "Image Processor" dialog box each time.

The Solution

The only image workflow application I know that does it all impeccably and effortlessly is Lightroom (I have not worked with Aperture, but I imagine/hope it has a similar feature). Lightroom takes care of file location and renaming, color space, compression, dimensions, screen sharpening, metadata, and even basic watermarking—and it allows you to save all of those in templates that can be used to batch process any number of images with two clicks.

Forgive me if this sounds like a sales pitch for that application, but it really is brilliantly designed. It does everything an image needs while saving you all the hassle and the mistakes, so I am surprised when I see fellow photographers still doing it otherwise, often missing the mark in some of the aforementioned steps.

Filed under
20 / 43 Archive
RSS Blog
20 / 43 Archive