From phishing and man-in-the-middle attacks to government surveillance, the Web faces an increasing number of threats every day. Gone are the laudable ideals of the Internet’s humble beginnings; in are the pragmatic concerns of incredibly powerful technology with unprecedented reach.
Registred Creative’s final 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 “Caliber.”
What we’ve worked through in the previous pieces (Dots and Vectors) covers the technical aspects of what makes an image “look good.” There’s another side to images. An aspect that is, literally, subjective: The subject or content of your images. Content also encompasses the style, quality, color palette, composition, and an endless list of art lingo.
Three blog posts in, some people might, justifiably, begin wondering if images are worth all this trouble.
Worth the effort.
You can reference a dozen studies that show, posts with images get 94% more views. There’s no shortage of articles illustrating the allure of images for Facebook and Twitter users.
The extra search engine credibility a web page picks for images with proper HTML tagging improves discoverability. Photography is also more accessible than ever before, so readers expect images in your blog post, report, or brochure.
Even with all of the above, there’s a fundamental reason to include images.
Everyone loves a picture.
Research shows that 50% of our brain tissue is tied to vision. That’s a whole mess of brains for visual processing. The challenge is picking the right images for your project.
Before we get into image selection, let’s make sure you work with images you can use.
Simply put: Do you have permission to use the image? Using someone’s work without permission might have karmic repercussions. Get caught using an unlicensed image from Getty and there will be financial fallout.
Using images without permission also implies you don’t value content enough to pay for it, give credit to a Creative Commons contributor, or hunt down something suitable from the public domain.
If that’s the case: Why should anyone value what you’ve written between the images? So, let’s look at the images you can use. Here’s a quick summary on the most common permissions:
- Public Domain Images: These are a free-for-all. No permission needed and no restrictions on use.
- Creative Commons: These licenses allow images to be shared, used, or built upon by others. Attribution is typically required.
- Royalty-Free: Also known as known as “stock,” royalty-free isn’t free. You pay once for a perpetual license. No one gets an exclusive license.
- Rights Managed: Specific licenses for specific uses. Typically at higher fees than anything else listed.
- Original Photography: Creating your images means that no one else can use them—unless you grant permission.
Help with original photography.
If you don’t have the know-how to produce the work you want, you can commission it. Registered Creative has produced a wide range of images for ourselves and our clients.
Everything Should Contribute
One of the first questions you should ask in looking at an image is: Does it contribute? Ask yourself that question when you consider adding an image. How does this image contribute to the goal of the piece? Tossing in any old image isn’t useful for the reader.
So what do you look for in a photo? Quality is difficult to quantify. It’s how people end up saying things like “I’ll know it when I see it.” Thankfully Jakob Nielsen has done amazing work researching what people look at and for how long when visiting a site. Nielsen’s research shows that visitors view images that are:
- Crisp & colorful
- Cropped, instead of reduced, to fit small spaces
- Not excessively detailed
- Highly related to the content on the page
- Smiling & approachable faces
- People looking at (or at least facing) the camera
- Appetizing food
- Clear instructions or information
As visually wired human beings are, more studies from NNG show that people tend to ignore images that are:
- Low contrast
- Too busy
- Look like advertisements
- Not related to content on the page
- Include generic people or objects (blatantly stock art)
- Cold, fake, or too polished
It’s easy to take study results like the above as a checklist or set of rules to follow. Don’t. Keep them in mind, but whatever you do, stay true to your brand.
Support Your Brand
If you’re looking to get Instagram famous, all your images should be square. It’s the format associated with that platform.
If your plan is to journal about rebuilding houses, you can get away with raw, less polished, images since it’s about works in progress.
Although, if you’re a wedding photographer, you’re going to want to make sure your images are professional and polished. But, if your approach is behind the scenes, casual, documentary photography, then you have more latitude. (Those pictures sound way more exciting.)
The above doesn’t mean the degree of finish on images can’t be blended on a website or within a brand. A photographer who shares process pictures of studio or lighting setup has a case to use less refined images in those pieces.
Often clients draw from a wide range of images. Maybe some public domain with a bit of stock art. Perhaps original photography from several events courtesy of volunteer photographers. Some images may come in with different (or incorrect) white balance. A variation in white balance can produce dramatically different, overall, color casts.
Color cast is a great example. Focusing on color is something that film directors have done for decades. For example, Stanley Kubrick had a thing for red. Over his films, it became a signature of sorts, akin to a brand.
A step we take on nearly every project that brings varying image color is to color correct the images. We look at your graphic or brand standards, and if we need to shift a collection of disparate images, we make those changes in a way that reinforces your brand.
There are other adjustments we may make—for example, making sure our team photos are cropped and scaled in a similar way.
That’s it. More questions? Feel free to reach out to us. We’d be glad to help with your Dots, Vectors, and Caliber.
Second of a three-part series discussing the quality of digital art we need to make our clients look their best. We’re carving these blog posts into three parts: Dots, Vectors, and Caliber. Welcome to “Vectors.”
Vector files aren’t well known outside the design world. That’s a shame because vector files are quite useful. Vector art describes shapes, colors, and transparency with mathematical formulas. Data is used to plot dots that make clear, crisp lines when displaying the image. This means they’re scalable and typically require less space and bandwidth.
Unlike the pixel-based images discussed in Part 1: Dots, vector images are resolution independent: They can be scaled as large or as small as needed with no loss in quality.
Sure, in the end, all images are composed of dots on our screens or paper, but the information in vector files draws those dots at the size they need to be for how they’re being used.
File Size Matters
A benefit of that scalability is reduced files size compared to their resolution equivalent, pixel-based version. For example, we created these billboards with the NCSU Center for Clean Technology. All four delivered in a 479 KB vector-based PDF file. For reference, all four billboards could be delivered on a 3.5″ floppy drive from the 90s.
Following the guidelines for raster art, each of these files would be around 4.7 GB each. In contrast to the PDFs, that’s nearly an entire DVD for each billboard—or an hours-long download over an average internet connection.
Just for bandwidth efficiency, it makes a lot of sense to use a vector file when it’s appropriate.
Why not use vectors everywhere?
So, vector-based files sound pretty great. Why not use them everywhere? They’re fantastic for logos and illustrations. However, their nature makes them—potentially—worse for photos or any other sort of continuous tone image.
The subtleties of photos—the shading, the lighting, the nuance can be lost when rendered in the data vector files use to carry the information. Of course, you could do a highly detailed vector file—enough to carry those nuances but then the file size becomes prohibitive.
The short version: Photos are dots, vectors are lines.
Since vectors are used to describe lines, they are great for logos, trademarks, graphs, and charts.
Common File Formats
The biggest challenge the Registered team faces with vector files is that a raster image can be saved in a vector format. Literally wrapping a plain old raster image as a vector file. The wrapping doesn’t hold up when we go into production. The result: Same as a JPEG or PNG file from a web page.
A challenge our clients face: Unless you work as a graphics professional, you likely don’t have the tools to properly view a vector file. Most vector file formats require specialized software, such as Adobe Illustrator, to view. Understandably, it can be uncomfortable forwarding a file that you can’t see yourself. Registered Creative delivers a full complement of logo files to our clients as part of brand assets to our clients. We use common file names to alleviate that concern of sending a mystery file.
Say the volunteer who’s making a shirt for the softball team you’re sponsoring is asking for the logo as an EPS file. You should be confident that “my-logo-file.png” delivers the same image as “my-logo-file.eps” just in a format suitable for commercial use.
The people’s vector file.
There is one type of vector file that is viewable in readily available applications: PDFs. Developed in the 1990’s by Adobe, the Portable Document Format (PDF) was designed to retain precise layout and typographic information. Adobe released the technology as an open standard in 2008. In addition to Adobe Acrobat, there’s a wealth of options for PDF viewing. Even, some web browsers will let you view a PDF file.
So far, in our series, we’ve covered the basics of what it takes for two, broadly, different kinds of files to “work” for your image needs. In the next piece, we’ll review the more subjective aspect of art.
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.