One of a three part series discussing the quality of art we need to make our clients look their best. We’re carving these posts into Dots, Vectors, and Caliber. Welcome to “Dots.”
This post covers a kind of image people encounter on a daily basis: Photos. Thanks to the web, they’re ubiquitous in our lives. While there’s an abundance of photos around you constantly, we’re going to dive deeper into the technical requirement that ensures photos look their best in print and on screen.
Everything on a screen or sheet of paper is composed of dots. In the old days, these were called “raster” images. Today, on your computer display or phone, they are called pixels—a shortened take on “picture element.”
Because this is the broadest category of art, it can be used for just about any sort of image. (Whether it should be is something discussed in Part 2 of this series.) So a raster image can be a photo, a chart, a graph, or even your logo.
Common File Formats
Listed in the order most likely for you to encounter. If you want to decode the file formats—and learn about other, less common, formats—check out this list on Wikipedia.
Everything is made of dots. Okay, let’s talk about making these dots look fantastic in print first. Between the printed page and your screen, printed images are the more complicated of the two. We’ll start there.
The first determination of quality is the resolution. The higher the resolution (the more dots) the more detail you hold when the image is prepared for commercial printing.
As an industry, we’ve messed up on this resolution thing. MB, Megapixels, Retina, HD, UHD. . . . We have more words to describe image resolution than the Inuits have for “snow.” No wonder people are often confused when we ask for “print quality images.”
Because they are everywhere online, it’s easy to grab a file from the web. People assume that a photo that looks superb on your web page would look equally brilliant in the annual report.
Odds are, it will be terrible printed at any size beyond that of the average Post-It note.
Simply put, it takes more resolution (more dots) to make a photo look good when it’s being printed. How much bigger? Printing typically requires four times the resolution to approximate the same size and quality you see on screen.
There’s a foolproof way to determine how large an image can be printed and still pass preflight. It’s easy:
Look up the resolution. Divide each dimension’s pixel count by 300 to determine maximum print size image in inches. Take an image that fills up a common computer screen: 1,920 x 1,200 pixels. That works out to 6.4”x4”—not bad for a small brochure. But you cannot rely on that image for a full-page or cover shot.
How to find the pixel dimensions of an image on your Mac
Select your file in the Finder. Select Get Info under File in the menu bar—It’s in the second section “More info:”
For comparison, to print something full page you’d need to be in the neighborhood of 3,300 x 2,550 pixels. That’s an image so large it has no business being on a website.
Here’s another tip: The format can give you a hint as to what the resolution might be. JPEGs and TIFFs are more likely to be higher resolution files. PNGs and GIFs tend to be lower resolution and best used online. Speaking of, let’s talk about pixel-based images for your website.
Uploading images significantly larger than needed are a burden to your users. Large images slow down how fast your site loads. People aren’t very patient. Plus, Google penalizes poorly performing sites in search rankings. These penalties make your content harder to discover.
Here are recommended dimensions for sharing images on social media:
- Facebook: 1,200 x 628
- Twitter: 1,024 x 512
- Instagram: 1,080 x 1,080
- LinkedIn: 700 x 400
You can see these are all considerably smaller than even our 1,920 x 1,200 example above. Rarely do you need to go that large for use on a website. Exceptions could be photographers—or artists—looking to increase visual presence or offering image downloads.
A word about the sites we build
Most of the sites we build use WordPress for content management. There are plenty of good reasons to do this, but one reason pertains specifically to art. WordPress does a really good job of resizing your images, so it displays the most appropriate one for the layout your visitor is viewing.
Device manufacturers are pushing the boundaries on resolution with every generation of mobile devices. These are “retina” or “ultra-high definition” screens.
Thankfully the initial wave of higher resolution devices is our phones and tablets. The physical size of these screens has largely allowed images that look good on your laptop to look as good on your phone.
Certainly, 4K and higher resolution displays are becoming more common. When the time comes, we’ll adapt our standard.
Be it for your website, email list, or a printed brochure, your images are important to your brand. The first test of your image is relevant, authentic, and engaging is making sure it looks good where it’s going to be used. This step shows you care.