By John Williams
Let’s talk about images. I know this isn’t exactly cutting-edge technology. In fact, I’ve been giving talks on this topic for almost 20 years. The outlines for the talks haven’t changed much, but the content certainly has. Some of the rules are tweaked a bit. Some no longer apply. Some of them are directly contradicted by new guidelines.
There’s only one piece of advice that’s remained constant: save your photos as JPGs.
Some of you might say “well, obviously.” But several times a year — working with both new and experienced content managers — I run into people who get this wrong. They upload photos in PNG format and then write us complaining that their page loads slowly. “You are uploading PNG files,” we say. “Please save those as JPGs and upload them again.”
Problem absolutely solved.
I’m looking here at a photo a client sent us. It’s 2000 x 2700 pixels, which is sizable but not outrageous. (If you think that’s outrageous, come to my talk.) As a PNG it is 7.6 Megabytes, or twice the size of CNN’s front page — advertising beacons and all.
Exported as a JPG, the same file with the same dimensions is 560k. You could download 13 copies of the image as a JPG for what you’d download for the original size.
It is true that you are sacrificing image quality when you convert to JPG. That’s because JPG uses a strategy called “lossy compression.” JPG literally throws some data away when it saves the image, much like a college student evacuating his apartment at the end of term. Compress the image too much or too often and the quality starts to go downhill. So you want to keep your originals as high in quality as possible. But your website — that’s where you want to publish JPGs.
PNG doesn’t suffer from the problems of recompression; it stores every pixel every time. But that comes at the cost of larger file sizes and increased download times. In other words, leaning too heavily on the “image quality” end of things causes a significant degradation in the “site responsiveness” end of things. It’s a balancing act.
So, How Much to Compress?
JPG compression is usually set on a numeric scale. Photoshop calls this “quality.” At the high end, or 100%, there’s no JPG compression. At the low end, or 0%, so much data is tossed out that many images are barely recognizable. If I am automating compression — say, for example, a bunch of head shots for a staff directory — I might start at 70% and work my way up or down a little.
But compression quality — like just about anything else about images — is more perceptual than it is anything else. For large featured images, especially those that go full bleed on a page, compression is more critical and artifacts easier to spot. These I spend some time with in Photoshop’s preview mode, nudging the slider back and forth until I’m sure I’ve got a good balance of size and quality. That sounds more arduous than it is; it’s a matter of seconds or minutes, not hours.
There’s So Much More
Of course, this raises a few questions, like:
- Is there any good time to use PNGs?
- There are 2 kinds of PNGs, what’s up with that?
- Come on, you really don’t think 2000 x 2700 is excessive?
- How do we not crush our visitors’ mobile data plans?
For those answers and more, be sure to attend my talk at edUi on Monday, October 24, just before lunch time.
About the Author
John Williams practices front-end web development at NewCity, with a special interest in data visualization. He’s worked for several media companies, government agencies, and associations — including AARP, the Discovery Channel, and the Library of Congress.
Want to Learn More?
John will present “Getting Web Photos Right: When “72 DPI at 400px” Is No Longer Enough” at edUi 2016. Learn the difference between various image formats, the best image format choice for different situations, how to prep images for performance, and new image-handling capabilities of browsers and content management systems.