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.
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.
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.
Save The Planet, One Byte at a Time
With the size of pages on the web steadily growing over time, you can do your part by optimizing images for your users.
If you were to hike up Mount Everest, it helps to keep your load light. Not only will your body thank you, but you’ll go farther, and you’ll be less likely to stop and turn around if the trail gets too difficult. Without excess weight to carry, it opens up opportunities that were once closed off.
Same thing goes for page weight.
When you optimize your images, you’re providing a better and lighter experience for all your users. Even though internet speeds are increasing on average, the reliability of those connections are increasingly varying as cellular service continues to expand.
Other than reducing wait time and respecting users’ data allowances, keeping an eye on file sizes can have another effect: reducing bounce rates.
Lara Hogan on the Path to Performance Podcast:
My favorite one from Etsy is we ran this experiment on mobile web where we added 160 kilobytes of hidden images, meaning the user saw nothing different, we just dumped a bunch of hidden images onto the page and increased page weight by 160 kilobytes. It triggered a 12% increase in bounce rate. Insane. Twelve percent is a lot of percent.
Cool. So how do we go about optimizing images?
Tools to Reduce Image File Sizes
Depending on what operating system you’re running, there are different tools for available to you. Here are online image optimizers that are available to everybody:
One thing to note! It’s not always a good idea to optimize SVGs. If you plan to script or animate the SVG, don’t optimize it. Visually, the SVG will look the same, but the resulting code will not. The optimizer will delete and change parts to squeeze out every byte it can.
If you’re on Windows, you’ll be best off taking suggestions from a blog post by Addy Somani, a Google Engineer.
I do have experience with tools available on Mac OS X though, and here’s my suggested setup for image optimization.
For rasterized images, use a combination of:
The order you use these tools matters. ImageOptim should always be used last in your workflow, because it uses lossless compression. If you run an image through ImageOptim before ImageAlpha or JPEGmini, you’re losing out on bytes saved.
Why these three particular tools? Because for a majority of use cases, they are consistently the best at optimizing file sizes while maintaining image quality.
If you’re comfortable with using a command line tool, ImageOptim CLI leverages all three apps in the correct order. It’s magical.
For SVGs, all you need is SVGO. It is a command line tool, so if that isn’t for you, you can stick with SVGOMG, the web version.