33: Vector v. Raster, with Sean Doran

All of the Above: Design, Code, and Learning

Episode 33: Vector v. Raster, with Sean Doran

In this episode:

Ever hear the words "vector" and "raster," when talking about graphics, but wondered what that actually meant? In this quick episode, Sean goes over the technical differences between the two, when each image type should be used, and how to optimize them.

SUBSCRIBE WITH

iTunes • Overcast • TuneIn • Pocket Casts • RSS

---

Show Notes & Links

Apps & Tools Mentioned

Sketch 3 by Bohemian Coding

Adobe Illustrator CC

Inkscape

Affinity Designer

Pixelmator

Adobe Photoshop CC

Gulp.js

Grunt.js

ImageOptim

Alfred

---

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.

Before I begin, a big thank you to Kevin Mack and Columbus Web Group for putting on these Weekend Workshops. They are free, open to the public, and are meant to offer accessible education that isn’t your traditional schooling route. The monthly free meetups make for great networking events, educational opportunities, and an all around fun time. I can’t recommend them enough.

Scooby Doo after a couple of Scooby snacks

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.

Vector graphics uses geometrical objects, like points, lines, curves, and polygons to model the image.

via Wikipedia

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?

A dramatic illustration of a vector graphic (left) and a raster graphic (right) being scaled up.

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

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?

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.

This is a nice photo of you.

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.

Now, going in and converting something as complex as a photograph into vector shapes is possible… but…

To make that vectorized version have 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 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 ImageOptim. Every image you see on the All of the Above website has been optimized through ImageOptim. I’ve even set up a global keyboard shortcut on my computer to send any amount of image files I have selected straight into ImageOptim.

How To Set up ImageOptim's Global Shortcut on a Mac (OS X)

1. Download ImageOptim

2. Open up System Preferences

I'm using Alfred as a Spotlight replacement

3. Do a search for “services” and click on Keyboard Shortcuts. This will take you exactly where you want to be

System Preferences

4. On the right-hand side, find the Pictures category

5. Find ImageOptim and assign a keyboard shortcut. I have mine set as ???. but you can make yours whatever you want.

Shortcuts are your best friend

6. Select image(s) from the Finder and then perform your shortcut

This is very meta. These files are this episode's artwork.

7. Presto. You have optimized images.

I care about bandwidth. You should too.

---

FEEDBACK

How did you enjoy this episode? We hope you loved it, but we're curious to know what you thought.

Review on iTunes