A panoramic photograph of a lighthouse in a field with small red-roofed houses

Auto-captioned image with ITPC metadataMost images contain metadata embedded in the bitmap file. In digital cameras and some other media, this data is in EXIF format. (The acronym is a little bit of misnomer: EXIF is also used in some audio formats).

EXIF is intended to be a “write once, read many times” record: only information germane to the original image at the moment it is made, such as time, place, focal length settings and ISO, are meant to be embedded.  Many applications, including , have the ability to read and re-write EXIF, as does . However, there are a few issues with using EXIF as a source of image captioning for web pages:

  • Different manufacturers record EXIF data inconsistently in digital cameras; there is, as yet, no one standard.
  • EXIF data is often stripped or modified as an image moves through a workflow (for example, in PhotoShop) or web services: Facebook deletes EXIF information from images, in part to avoid privacy concerns. (Not everyone wants their home to be located from their posted photographs: many cameras, including those in mobile phones, embed the current GPS coordinates in EXIF data.)
  • It is relatively rare for designers to put raw images with fully preserved EXIF data on web pages.
  • EXIF data is only supported in JPEG, TIFF, BMP, and a few other formats; embedding in GIF and PNG is not officially supported.

Instead, I’d suggest using IPTC data as a source of captioning information. The format is richer and more diverse than EXIF, while eliminating all the drawbacks above, except for the last: PHP doesn’t support reading IPTC from PNG or GIF files. (In order to do that, I would recommend RDF… but as an XML standard, RDF is somewhat harder to explain and use… so I will leave that for another time.)

PhotoShop CS5 image File Info ScreenFirst, we need to make sure our images are correctly tagged with ITPC data. If our portfolio consists of just a few images (or if you have the ability to add metadata while editing the image) I would recommend using Adobe PhotoShop or Bridge to add the correct information. In PhotoShop, the metadata editor is found under File / File Info…  (For this example, I’ll use a Creative Commons licensed photographs by René González.)

PhotoShop Save For Web with Metadata onAs you can see, there are many options for adding metadata to an image (the adventurous will spot Dublin Core as one possibility). For right now, we’re only interested in the areas most easily accessed by PHP: the ITPC tab, most particularly the slots for creation date, location, and content of the image.

With the data added, save your image as usual, with the alteration that you must turn on the option for metadata: either the All Except Camera Info or All option.

Photograph by Matt Hintsa, used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.