The Important Distinction Between Pixels and Vectors in Media

Sometimes Exporting in One Click Just Is Not the Answer

Companies that make software designers rely on day-in and day-out know us too well. They know that we want to accomplish our tasks in the quickest way possible. So, they build software that allows us to design and export with just a few clicks. And in most cases, this works. As long as you know where you will publish the image and choose the right color mode, you will be good. Right? I mean, that is what the software makes us believe. Click “Export” and you are golden!

Well, there is another aspect to designing graphics: what type of file to use. How many times has this happened to you? You go on a company’s website and see a logo or illustration that looks like this:

You can make out that it is a donut, of sorts. But why did the company publish a blurry image? Do they not know that it automatically decreases the value of their website? This leads us to our discussion of the two different “constructions” for images: pixel-based and vector-based. In this example, the designer created a pixel-based image that is too small. So, when it fills a larger space, it blurs and gets pixelated. So, how can we prevent this travesty?

Pixels Are Squares That Cannot Be Added or Removed

For the purpose of this blog, I am going to focus the discussion around Adobe Photoshop and Adobe Illustrator. We know from our earlier blog that Photoshop is best used for RGB creations. However, unlike Illustrator, Photoshop is used for pixel-based creations. When you design something in Photoshop (e.g., an icon), tiny squares stack together to make the image. The creation is in essence just a collection of colored square pixels that somehow look like an icon! Once you export it, you cannot add (or remove) pixels from it.

The number of pixels in a pixel-based image is static. This is why choosing the right canvas size in Photoshop at the beginning is important. Think about it in terms of a room. You have to install one-foot floor tiles in a ten-by-ten feet room. So, you go through the painstaking process of purchasing all the tiles and installing them only to find out you need to expand the room to 20×20 feet. You do not have tiles for that new area, so now only part of the room is usable. And, no one wants to hang out in a room half-tiled and half raw concrete!

This same concept applies to pixel-based images. If you design a 500px by 500px image, the number of pixels needed to fill that image is made. So, when you export it, there is a fixed amount of pixels present. If you upload it to a website, per se, it could be shrunk down. But, if it were to be enlarged it would look blurry or pixelated since these pixels are a constant size. They cannot be made larger. If an image needs to be larger, it needs more pixels. And more pixels are added when you change the canvas size or increase the PPI (Pixels Per Inch) in Photoshop.

The New Standard is a Vector

So, how can we solve this? Well, say hello to vector-based illustrations, or SVGs (Standard Vector Graphics). “Vector” probably rings a bell from your high school or college physics class. Or, if you are a fan of the Despicable Me franchise, Vector is everyone’s least favorite dancing villain from the first film.

Well, do not worry about digging out that old textbook just yet. Vectors in graphic design are actually pretty easy to pick up. In essence, a vector illustration relies on mathematical equations to form an image. These equations figure out where all the edges in your illustration meet. What is the benefit of this? Well, if you have to make an icon larger, for example, the equations keep the proportions the same, so your image remains crystal-clear. No matter how large or how small your creation is, it will look amazing. We use Illustrator to create SVGs and everything remains the same until we are ready to export. Once we have our creation, we click File > Export As > SVG. Then, after typing our file name, a pop-up appears that we can leave as-is.

You will notice after export that you cannot open an SVG in your media explorer. Since SVGs are made of code, they need to be opened by a web browser. On Windows PCs, they will likely open in Internet Explorer (I am sorry in advance). On Macs, they will likely open in Safari.

The beauty of SVGs is that they can be used for both digital and print purposes. On websites, SVGs are great for mobile-responsiveness. No matter the size of the screen, SVGs can remain sharp and proportional. In print, the printers can easily determine the illustration by interpreting all the information contained in the SVG’s code.

Nearly all platforms and website builders accept SVGs as a file type. When you upload an SVG to your website, follow the same process as you would any other image in your media library.

SVGs Are Your Friend

Do not let visitors to your site roll their eyes when they see a blurry or pixelated illustration! If you have Illustrator it is super easy to take the icons you have on your website (or in your print designs) and form them into vectors. Your visitors and your mobile site will thank you.