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.
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.
