Shallow Depth of Field = Performant Images

Getting a better camera, and learning about depth of field, can drastically improve the performance of your images on the web.

I made an interesting discovery today while listening to Laura Hogan‘s talk on Designing for Performance at An Event Apart Austin 2015. Well, to say I made the discovery might be a bit of an overstatement. It was more like I made a deduction based on her data that turned out to be accurate. Regardless, it has significant bearing on the art creating and publishing photos on the web:

Photos with a shallower depth of field (more bokeh) produce smaller files and are thus more performant.

After identical compression, the low bokeh (high background detail) photo has a file size of 52Kb. The high bokeh (low background detail) photo has a file size of 32Kb.
After identical compression, the low bokeh (high background detail) photo has a file size of 52Kb. The high bokeh (low background detail) photo has a file size of 32Kb.

Hogan explained that the size of JPEG encoded images is decided by the number of compex edges contained within the image: The fewer complex edges, the smaller the image file size. Her example was two versions of an image of a person, one in which the background had been artificially blurred. The savings in terms of file size were significant. This idea originates from the article Reducing Image Sizes by Justin Avery.

This got me thinking: Would the same happen if you took a photo with a shallower depth of field? With my camera I took the two pictures above, one at f/22 (narrow aperture, deep depth of field, low bokeh) and one at f/1.4 (wide aperture, shallow depth of field, high bokeh). The lower the aperture value, the shallower depth of field; and the more expensive the lens, the lower available aperture value. The results are interesting.

As you can see from the image above, out of the camera, the two image files were more or less identical in size. The match continued when I merely downsized the images in Photoshop. However, when I saved each image with the quality setting at 75% something notable happened: While the low bokeh image with lots of details had a file size of 52Kb, the image with high bokeh and blurred details had a file size of 32Kb.

That is a decrease in file size of 38.5%.

Upon further reflection, this is not surprising: There is far less edge data in an image with high bokeh, so the image file should be smaller. What’s interesting is that this difference only manifests itself after running the image through some form of compression. Out of the camera the two images were roughly the same size.

What is the practical application of this? Simple: When possible, take photos with a faster lens (wider aperture). The more “background blur” or bokeh or the shallower depth of field you get, the more performant the image will be.

How do you make this happen? Stop taking pictures with your phone and buy a real camera. The reason images from the 1970s look so much better than the images of today is that back in the 1970s cameras were sold with prime lenses with wide apertures – anywhere from f/2.8 to f/1.8. Today even expensive DSLRs are sold with stock lenses that don’t go below f/3.4. This produces less bokeh and more detail.

Or better yet, hire a professional to take  your photos and ask them to blur the background when possible. Your website performance will thank you.

On Trust and Opacity

Yesterday Tom McFarlin published an important article titled The WordPress Community (A Comedy of Drama, Ego, Oligarchies, and More). If you work with WordPress or the WordPress community, it is mandatory reading and worth some serious reflection. Tom shines a light on some of the darker parts of flat-structure communities and asks poignant questions about communication, language,…

#BCPWDRF no.1: Do Androids Dream of Electric Sheep? July 3rd, 2015

I know you’re all waiting with bated breath for the announcement of the first meeting of the Book Club for People Who Don’t Read Fast (#BCPWDRF). In my original post I hinted that the first meeting would be the last Friday of June. That obviously didn’t happen. Life intervenes etc. Irrelevant. The official date of…

Responsive Images in Real Life – my presentation for JavaScript Open 2015

Above are the slides from my presentation on Responsive Images in Real Life at JavaScript Open Day in Vancouver, June 25th, 2015, organized by Lighthouse Labs and Microsoft Edge. Below are the relevant links from the talk: srcset and sizes by Eric Portis What is the purpose of the sizes attribute? Responsive…

WordPress, Responsive Images, and Dynamic Image Sizes

This is an addendum to my article WordPress Image Handling in a Responsive Images World. If you haven’t done so already you should read it to get the background. Responsive Images in WordPress Core opens up a previously unattainable opportunity for the application to allow theme (and plugin) designers and developers to take control over image…

WordPress Image Handling in a Responsive Images World

Note to the reader: This post falls under the umbrella “Morten thinking out loud”. You have been warned. This is the first of a 2-part article. Be sure to read the 2nd part WordPress, Responsive Images, and Dynamic Image Sizes once you’re done. Consider the image above. Depending on your screen resolution and size, the image…