Photo Processing – New Workflow

I have completed a new, improved workflow to process my photos with my primary goal in mind that I would like to spend more time in the field and less at the computer.

I applied the resulting workflow for the photos taken at Rapids Park Lachine. I was outdoors around 5 hours and processed the photos in less than 2 hours from inserting the storage card into my laptop until being able to see them on the photo gallery site [xMedia: https://xcmsmedia.appspot.com]. I am getting there ;)

Taking advantage of building a new process, I also addressed some issues which have been bothering me in the past, which are:

Backup Raw Media Files: I learned that relying on a manual backup process may be tricky.
Replacing Images: Replacing an image with a new version of the same image was a real hassle although it occurs frequently.
Manual Database Edits: Although not consuming that much time before, it was ridiculous having to spend time adding some meta data manually into the database.
Art Directive: The current process doesn’t provide a convenient possibility to control photo composition for different dimensions and devices.
Pagespeed: Currently, pagespeed insight indicates that the file sizes are not optimized in spite of using different sizes for different device widths.

In the new workflow the only time consuming manual process should be within Lightroom when editing the photos and adding different meta tags likes title, caption, keywords and geo location.

1) First Selection & Backup

Back home from photo shooting, I first scroll through raw photo files and delete all useless photos immediately. The remaining files are copied into OneDrive folder which takes care of raw file backup automatically.

2) Lightroom Import

The OneDrive folder created with the files from a photo session are imported (copied!) into Lightroom catalogue and converted to to DNG. In this process the filename indicates the date when the photo has been taken and the the original file number. Which allows later to return easily to the original raw file if necessary.

3) Lightroom Photo Editing & Tagging

In Lightroom, photos selected to be published are edited and title, caption, keywords geolocation added. The values are written into the exported file by Lightroom and can be picked up later programmatically. The export is done into a Google Drive folder which not only backups the file but also provides a convenient location to pick them up for being published on different social platforms. Conveniently, most of the social platforms are able to pick up the EXIF data and enrich the publication.

4) Uploading Files for Self-Hosting

A program written in Python for Google Application Engine app with Python allows to upload the resulting jpg files into Google Storage. Initiated manually, the application reads the EXIF data and inserts a record into the remote media database for each new photo. A file can be overwritten later. To link a previous upload with a new one, the EXIF data OriginalDateTime value is used to identify the photo. Although not a real unique identifier, because it is possible to have two photos shot within the same second, it serves perfectly well for the purpose.

5) Art Directive

The Python application then presents the photo with some selections to take care of art directive. The choices which can be done are the focus point and if the published photo will should be resized, cropped and resized or cropped. Focus point is used to define the center of the resulting photo variants [regular (8:5); banner (16:9) and square]. Focus point and resizing/cropping can be selected separately for desktop versions and mobile versions.

The resulting images can be reviewed and parameters changed if necessary. At the end, the settings are committed, the variants created and stored in Google Storage from where they are used to generate a static serving url.

6) Serving Photos

The static serving url provided by Google’s Image API provides features which allow resizing on the fly (on file request). Combined with the HTML tag <picture><source /></picture> and media queries the photo can be published optimized for the device screen size and screen resolution [retina].

<picture alt=””>
<source type=”image/jpeg” srcset=”[static serving url desktop]=s750″ media=”(min-width: 992px)” width=”100%” />
<source type=”image/jpeg” srcset=”[static serving url desktop]=s470″ media=”(min-width: 768px)” width=”100%” />
<source type=”image/jpeg” srcset=”[static serving url mobile]=s720″ media=”(min-width: 519px)” width=”100%” />
<img src=”[static serving url mobile]” alt=”” width=”100%” />
</picture>

Building manually these large chunk of HTML code for every photo is inconvenient. I have created another small application which takes care of this. The tags are written once in different templates used by the web site. [xMedia: https://xcmsmedia.appspot.com]


Open air tribune Park LaFontaine, Montreal

Open air tribune Park LaFontaine, Montreal

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s