Home » Blog » Preparing images and contact sheets for the web

Preparing images and contact sheets for the web

I was aware of the need to prepare images for sharing on the web – not good to clog up websites (particularly your own blog!) with outsized image files that are only of use when printing large-scale. I’ve now looked into how best to do this and into some of the jargon surrounding the workflow. In this post I share my approach, based on research and experimentation, for sharing of images and contact sheets to the web.

Ignore the DPI

DPI settings have no effect on how an image is displayed on a computer screen – they are only relevant if a file is printed (when so many dots-per-inch are printed) – dpi should be ignored unless printing. It appears  seems that there is some confusion about this from legacy systems (Apple started it) that set their screen dpi to 72 so that it would match the printer capabilities at the time – what you see is what you print.

If you still need convincing, there is an in-depth article and practical demonstration at photoessentials.com – http://www.photoshopessentials.com/essentials/the-72-ppi-web-resolution-myth/ (accessed 28.3.15)

Single images from Lightroom

I use Lightroom and Photoshop and here I describe a simple flow for LR, for an image that has already been processed. PS requires a different approach, which I don’t cover here.

  1. Set up a user-preset for exporting images with the appropriate settings (file/export to access the LR menu), which I describe below
  2. Once the preset is set, simple select one or many images and LR will process them all and save the jpegs to the folder you specified.
  3. Upload images to the web, using the method available in your web-interface.

Below is an screen-grab of my LR export settings for the user pre-set blog – click to enlarge. A few words on each selection.

Screen Shot 2015-03-28 at 12.53.31Filing naming – I use custom name – sequence so that if I export a number of images from the same shoot, LR automatically generates jpeg names with the shoot name and an image number.

File settings – this is the most important bit.  Set image format to JPEG and colour space to sRGB for images to render correctly on the web. Quality not only determines the quality of the jpeg, but also its size. It is important not to set this to 100% or very large image files are produced. Also note that this is not a linear scale in terms of file size (so set at 80, the jpeg size is far less than 80% of the full-sized jpeg). I found 80 works well for me, but it is easy to experiment with lower numbers (and smaller files) to see what suits you.

Resizing – I’ve set this to a long-edge of 1024 pixels as this seems to fit nicely on a screen when viewed at 100%.

And finally, I’ve removed most of the meta-data from the image as its inclusion can also increase the size of jpeg files.

Contact sheets

I found manually sharing images and exif data on exposure settings time consuming and a little fiddly. To overcome this, I use the print module of LR to generate contact sheets that automatically create captions including the relevant exif data.

I won’t cover all the details of how to use the print module in LR, as this can easily be found in Adobe’s own online lessons.  Here, I just cover the specifics of setting up the captions to create the exif data. Once you have the contact sheet prepared, you can simply print it to jpeg (remembering to adjust the quality setting to 80 or less for a sensibly sized file) and upload it to the web.

Screen Shot 2015-03-28 at 13.27.48

This screen-grap, shows the photo-info menu in LR’s print module – click to enlarge. By selecting edit, you can customise and save custom settings for the information you wish to be displaced on your contact sheets. Simply select the require parameters from the drop-down menus and insert. The box at the top shows the inserted fields and above that an example of the resulting caption, based on the current photograph. It is sometimes useful to insert your own text around the automatically generated fields. To do this, just click into the box at the top, in between the inserted fields and type. If you need to rearrange the field order, just drag and drop.

A finally, here is an example of a contact sheet created using the preset above, without any manual keying of exif data.

Orange Splash


Comments here