Home » Blog » Support

Category: Support

High Quality Art: Vectors

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.

Scalable

Pixel art top, vector art below.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?

Steer Shirt in Gulf Blue, showing off vector art for the logo.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.

Uses

Since vectors are used to describe lines, they are great for logos, trademarks, graphs, and charts.

Common File Formats

  • PDF
  • EPS
  • SVG
  • AI

Challenges

Steer Identity Package Deliverables Folder showing common file names between pixel and vector art.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.

Razorback Loaf

High Quality Art: Dots

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

Uses

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.

  • JPEG
  • PNG
  • GIF
  • TIFF

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.

Print

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

Challenges

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

Razorback Loaf Info from Mac OS X

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.

Web

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.

Future Challenges

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.