Ever hear the words "vector" and "raster," when talking about graphics, but wondered what that actually meant? In this post, I go over the technical differences between the two, when each image type should be used, and how you can optimize them.

Intro

Since I recently taught a 2 hour workshop on Sketch 3, I wrote a couple of emails to the attendees the week leading up to the class in preparation for what they’d be learning. In the workshop I was showing them how to use Sketch 3 as a tool, and how to take advantage of what it has to offer, while also highlighting what areas Sketch isn’t good at. I didn’t have time to give an introduction to design basics, so that’s what these emails were for.

Sketch 3: A-Z was a one-week workshop that gave attendees the principles for designing modern day websites, and how they could get up and running with Sketch 3 as a new design tool to see their ideas come to life.

 With programs such as Sketch 3, Adobe Illustrator, Affinity Designer, InkScape, we have what are called vector-based applications. So what I mean by vector-based is that it is based on points: tiny dots that have an X and Y coordinate. If you think back to grade school, you probably had graph paper and were told to put dots at certain (X,Y) coordinates. After all the dots were on the paper, you would connect the dots with a line in a certain order, and you’d end up with a drawing!

Sketch 3, and any design program that can handle vectors, takes that same graph paper concept, and steps it up a notch. Here's a lovely SVG just for you.

Geometry, Man

Since vectors are all based around geometry, and aren’t concerned about pixels — only the distance between all the points — vectors are infinitely scalable! Ever have an image that was clearly a bit too small, and then you decided to scale it up so that it was bigger? It got distorted and looked nasty, didn’t it?

Look ma, I'm a pixel perfect picture!

That’s because when you have a picture, or anything based on pixels, it’s called a raster graphic. You can make them smaller without concern, but once you enlarge them you get weird artifacts, noise, and muddiness as the computer tries to make up the difference.

That being said, Sketch 3 can also do some basic raster graphic editing, and I mean basic. Other programs, such as Adobe Photoshop or Pixelmator, should really be used if you’re wanting do image manipulation, photo retouching, and anything else that you can think of when you hear the word Photoshop being used as a verb.

If you are using any images for the web, there are some rather useful tools out there to help optimize them so they aren’t quite so large. But before I list those, you’ll need to know the different file types, as each tool can optimize certain types of image files.

An easy way to identify if a file is a vector graphic or raster graphic is by the file extension. There are too many to list, but good ole’ Wikipedia has our back.

Vectorize All the Pixels!

Vectors sound like the way to go, so why isn’t everything a vector? Infinite scalability sounds like a huge plus. Also, they are usually editable with any vector-based program, so what isn’t to like?

So much vector. So little time.

Don’t get me wrong, they’re great for logos, iconography, and illustrations. It’s just that the more points you have in a document, the more complex calculations are being processed, and the more colors being utilized, the more work your computer has to do. Imagine a nice photograph of you. The photo makes way more sense to be a rasterized image, as there’s a finite amount of information that the camera took in and converted into the pixels that resemble your face.

Going in and converting something as complex as a photograph, and vectorizing it is possible! Though, to make that vectorized version at the same level of detail as the original photograph can be painstaking work to do by hand (also called rotoscoping when applied to video), and usually there is a limit. There are also programs that let you put a photo in, and out pops a vectorized version of that photo. It’s a cool effect, but it’s not exactly practical for everything.

Nuthin' but an SVG Thang

So vector and raster graphics both have their place. And right now is truly an exciting time in web & app design for vector graphics. Here’s the link to a Columbus Web Group talk that Eric Katz gave on SVGs. It has tons of useful resources, tips, and demonstrations of how to leverage SVGs in front-end development.

In the presentation, Eric (@ericnkatz) brings up some nice tools to optimize SVGs, such as SVGCleaner, SVGO, and SVGO GUI. You can also implement image optimization within the build process using build task managers like Gulp and Grunt.

There are online image optimizers like:

• Kraken.io is awesome because it can also do SVGs

• TinyPNG

• ImageOptimizer

For rasterized images, I personally use a combination of ImageOptim, ImageAlpha, and JPEGMini.  I use ImageOptim CLI to leverage all three apps simultaneously. ImageOptim CLI is command line tool to help automate the image optimization process that can integrate into build processes.