Scripting Adobe Photoshop to Produce JPEGs for the Web

by Philip Greenspun, August 2005 (updated July 2010)

Tweet

You have a high-quality digital camera that produces big files. For higher quality and to preserve detail in highlights and shadows you might be taking pictures in Camera RAW Format, which provides 16-64 times as many levels of intensity as a JPEG. If you wish to publish these images on the Web you face some challenges:

• the files are too large; nobody wants to wait for a 10 MB file to download unless they are going to make a print and hang it on their wall
• the files are probably in the wrong format; browsers can't display RAW-format or TIFF images
• the files don't contain enough copyright information; you want to have a visible "Copyright 2005 Joe Smith" in a corner of the image and some data in the file as well that is visible to folks who care to look with various tools such as PhotoShop
• the pictures are not available in a range of sizes; most of the time you'll want to present thumbnails illustrating an article that are hyperlinks to larger versions

This page offers some personal tools that have been used to process the digital images that you see on philip.greenspun.com. The fundamentals of this solution rest on the fact that Adobe Photoshop CS (8.0) and later versions have a built-in JavaScript interpreter with a published API. A JavaScript program runs within Photoshop and therefore works either on the Macintosh or Windows. Here are my production steps:

1. copy files from digital camera memory cards into folders named "YYYYMMDD-subject", e.g., "20040429-north-seymour" for some photos taken on April 29, 2004 on the island of North Seymour in the Galapagos (http://philip.greenspun.com/images/200404-ecuador-peru/20040429-north-seymour shows the final results)
2. create a subfolder called "rejects" where I put the crummy images; remember that the great photographers are usually only known for a few dozen photos created over a lifetime
3. rename the better files using the Adobe Bridge image browser included with Photoshop CS2, which has nice "batch rename" capabilities for selecting multiple images and giving them all the same name plus a two-digit sequence number.
4. use File -> Browse -> Scripts to select a JavaScript program that I have modestly called philg-pscs2-processor.jsx (after downloading, rename it to remove the .txt extension); note that this script has been tested with the CS2 through CS5 versions of Photoshop
5. fill in the information about what I want to appear on the image and inside the extra info
6. let the script do its work, which includes the following:
   1. finding all of the files in the directory with appropriate extensions, e.g., TIFF or JPEG or CRW (Canon RAW) or CR2 (Canon RAW the second time they thought about creating a standard format that would last for all time)
   2. for each file create versions of the image that are roughly equivalent to the old standard Kodak PhotoCD sizes, to be named foobar.1.jpg (thumbnail, settable in the dialog box), foobar.2.jpg (256x384 pixels), foobar.3.jpg (512x768), foobar.4.jpg (1024x1536)
   3. unsharp mask the image with appropriate settings (sharpening should always be done at the final size)
   4. add black borders around the smaller versions
   5. draw visible copyright text in the bottom right corner of the borders on the .3 and .4 sizes (if you don't have fixed-width fonts already installed on your computer, try downloading 6x13.fon and 9x15.fon)
   6. add invisible copyright text and photographer attribution in the metadata associated with the files
   7. save the .2, .3., and .4 file as JPEG
   8. export the .1 size with the SAVEFORWEB option (cuts the file size down from about 30 KB to 9 KB by eliminating extra info and blank space)
7. use pscp to copy the JPEGs up to a directory on this Web server, a Unix machine
8. cd into the new directory containing the images and run make-image-directory-index.pl, a Perl script, which finds the similarly named files and creates an index page showing all of the thumbnails (using some templates that are available from hyperlinks below). For each thumbnail the Perl script creates an AOLserver .tcl Web server script that will be invoked when a reader clicks on a thumbnail. This script calls a function that generates a Web page showing a larger version of the image (settable via a cookie at the reader's preference to the .3 or .4 JPEG). The function also looks into the file system to see if perhaps the original camera RAW or a naked .jpg (no prefix numeral) file is there and offers that as the camera original file for folks who want to print. If you wish to use this script on a server that is not running AOLserver you will have to modify it to produce .aspx pages (Windows IIS) or .php pages (typical Unix server) or whatever.

It seems kind of painful, eh? It would be nice if commercial tools did this stuff out of the box but they don't. They almost always lack the capability of writing the text in the bottom right corner of the image, for example. And none prepare the server-side scripts that make it possible to publish various sizes and sometimes park the camera original file on the server. The folks at Google who bought Picasa could probably add these features fairly easily but they haven't.

What about a solution using free software? I think Photoshop does a better job of converting RAW images than any of the free programs. Photoshop also has very high quality image processing algorithms for resizing, unsharp masking, etc. One could probably get reasonably similar results with open-source tools and if anyone succeeds I would be happy to link to their solution. For now, though, it seems as if Photoshop CS2 is worth the investment. The script might work in Photoshop CS but I'm not sure about the last "export for the Web" step with the thumbnails.

Setting Up Photoshop Defaults

Photoshop out of the box will truncate filenames to 31 characters for compatibility with the feeble file system in Macintosh OS 9. This only happens on the "save for Web" thumbnail part of the script. A kind soul at Adobe sent me the following instructions for disabling this default:

Create or open a file, then bring up the Save For Web dialog. Pop open
the little flyout menu (circle with arrow in it) to the right of the
Preset menu and choose "Edit Output Settings...". In the Output
Settings dialog, choose "Saving Files" from the second popup, then
uncheck the "Mac OS 9" checkbox under "Filename Compatibility". OK the
dialog and click Done in the main Save For Web dialog.

Photoshop also applies a lot of automatic adjustments to Camera RAW images by default, including as much as one f-stop of exposure adjustment. If you're generally careful about exposure and other settings at the time of exposure you'll probably want to turn off the automatic adjustments and "save new camera defaults" each time that you get a new camera (or maybe just a new RAW format extension). The procedure is explained on page 162 of the hardcopy manual that is included with Photoshop CS2.

Potential Improvements

The software really ought to have some sort of ability to associate captions, technical info (e.g., "Canon 20D, 300/2.8 lens"), and stories with each image. I wrote about doing something like this for Kodak PhotoCD files in the images chapter of Philip and Alex's Guide.

Perhaps the right way to do this is with the Photoshop "metadata" associated with a RAW image. This should be possible to carry through into the JPEG. And then the software on the Web server could extract it out while serving the pages with the larger images.

More Details on the Server-Side Stuff

This site uses AOLserver, an efficient free open-source Web server that sits behind most of America Online's very popular sites and that was the first to pool connections to relational database management systems back in 1995, which was when I started using it. I haven't done a comprehensive survey of Web server programs recently so I can't tell you that AOLserver is still the best option (I elected to use it in 1995 when it was literally 100 times faster than using the then-typical CGI scripts that opened up fresh connections to Oracle for every page load). And in fact most of AOLserver's best features have been copied by the Microsoft IIS, for example. But AOLserver does everything that I've ever needed to run an online community so I still run it at philip.greenspun.com.

As mentioned earlier once the JPEGs are parked in a directory on the server I run make-image-directory-index.pl, which in turn draws on the templates thumbnail.tt and index.tt [download all of these using the Firefox browser; MSIE tries to render the index.tt file as HTML and the Apple Safari browser ignores the text/plain MIME tag even for the Perl script]. This software was by Jin S. Choi in response to this specification. (Note to young programmers: No matter how simple the program you want to have a clear specification somewhere of what that program is supposed to do and why.)

At right is a thumbnail image hyperlinked to the URL "monte-alban-10.tcl". There is in fact a file by this name in the file system on the server. The contents of this file are, in their entirety, the following:

# This is the target of the thumbnail /images/200411-oaxaca/monte-alban-10.tcl

philg_thumbnail_target {788 536} {1571 1064} "copyright 2004 Philip Greenspun"

The arguments to the procedure philg_thumbnail_target are the dimensions of the .3 and .4 sizes of the image so that a page can be prepared with WIDTH and HEIGHT tags. The procedure definition is loaded when the server starts from the file philg-thumbnail-target.tcl.

Acknowledgments

The only programming languages that I actually understand are Lisp and SQL. Thus I had a lot of help with this project from some folks at Adobe who are Photoshop/Javascript experts and Jin S. Choi, master of all things Unix and otherwise.

• 
  Sony Alpha A37 preview
• 
  Sony NEX-F3 Preview
• 
  Lensbaby Edge 80 Optic Review
• 
  Concert and Live Music Photography: Clubs, Bars, and Small Venues
• 
  Olympus Tough TG-1 iHS Preview
• 
  Canon 5D MkIII First Impressions Review
• 
  Sigma 120-300mm f2.8 EX DG OS HSM Lens Review
• 
  Olympus OM-D E-M5 First Impressions Review
• 
  Datacolor Spyder4Elite Review