Following on from our image optimisation blog last week, we thought we’d keep a theme running (for now) and give an overview on pixel vs vector. What is the difference between them, and which should you be using for online illustrations?
When browsing the web, all of the graphics you see are made from either pixels or vectors. With some elements of content the decision is easy – icons will be vector, photographs will be pixel-based. However, if you’re not sure what the difference is, or which route to take for your next illustration project, read on!
Pixel is a tiny physical coloured square that is the smallest building block of raster images. When combined with other pixels it can build all kinds of graphics. How big and sharp an image is depends on the amount of pixels that build it – both their amount and density. The higher their density (pixel resolution), the sharper the image appears on the screen.
Vector is a mathematical formula that describes where points lie in relation to each other as well as the path between them – its curve, colour, thickness and fill. The image is generated by analysing these calculations, and drawing all the shapes on the screen. Due to their vector nature, these graphics are resolution independent, meaning they can scale infinitely without losing their quality.
Pixels are most commonly used in photographs and various artworks such as digital illustrations or paintings, while vectors are predominantly used for simple graphics like logos, icons and fonts.
PS and AI
Although most of different types of graphic software can support both formats, they tend to specialise in a certain type of graphic. For example, Adobe Photoshop is pixel-oriented, while Adobe Illustrator has a largely vector environment.
Pixel
Pros
- Infinite possibilities when it comes to colours, shapes, textures, shading…
- Allows for very precise (literally pixel-specific) editing that lets graphics be as detailed as required
- Pixel-based graphic formats are widely used and the vast majority of them can be opened with the simplest image software
- Works across all browsers
Cons
- Resolution dependent (lose quality when scaled up)
- Large file size
- On high pixel density displays (like retina), they can look blurry if the website doesn’t include retina-specific versions of the image
Vector
Pros
- Resolution independent (can be scaled up infinitely and will always stay crisp)
- Small file size (unless the vector is incredibly detailed)
- Look sharp on both regular and high resolution displays
- Can be easily converted to pixels when necessary
Cons
- Limited possibilities, especially when it comes to shading or textures, that results in a characteristic ‘vector-look’ of graphics
Using vector graphics used to be tricky, but currently all of the modern browsers can display vectors easily. In fact, it’s now possible to change some of their properties with code, and even animate them. Sometimes a pixel fallback is necessary for older devices, but this is becoming less and less of a requirement as old browsers are gradually losing their market share.
Vector graphics can be easily exported to pixels, while translating pixels into vectors is a much more complicated process.
Simple graphics can sometimes be quickly transformed into vectors, for example by using Adobe Illustrator’s Live Trace function (or Image Trace), but the results are often inaccurate. If the pixel graphic is complex – for instance it includes textures or shading – most of the information will be lost in the translation, and the result will be disappointing.
While for simple elements like logos or icons vectors are an obvious choice and for complex graphics like photos your only option are pixels, illustrations can easily go both ways. Depending what kind of style and level of complexity you expect them to be, and depending what they’re going to be used for, illustrations can be both vector or pixel-based.
If you need the graphics to be scalable and the level of complexity isn’t high, go for vector. Simple characters and flat colours don’t require more advanced rendering options like detailed shading or textures that pixels enable you to do. In such cases, vectors will give you more versatility and let you use the graphics in a variety of contexts, including large scale print. Also, if the style you’re going for is geometric and clean, it’ll be easier to achieve perfect curves with the pen tool. To some extent it’s possible to add that hand drawn feel to your vectors as well through textures and grainy patterns. It’s just a more complicated process and you don’t have as much control as you would with pixels.
If what you’re trying to create is more complex than simple shapes and flat colours, pixels are the way to go. Although you won’t be able to scale pixels to large sizes without losing quality, they give you full freedom as to how you want your final illustration to look like.
Realistic rendering is also much easier to do freehand rather than trying to emulate brush strokes with vectors (assuming you have experience in digital art). The only thing to remember is to always draw on a canvas that is big enough and safely store the hi-res files if you ever needed to use your artwork outside of website context. Personally, I never go below A3 in 300dpi.
A good example of how to combine both graphic types is a recent illustration project for our client, Luxury Flooring. One task was to create owl characters to be part of the client’s branding and keep the user company throughout the site. After discussing the budget and how the illustrations will be used we decided to have a small set of scalable vector owls which are part of the core branding and used both digitally and in print, as well as a wide range of simpler sketches that will compliment the website’s content.
For someone who has been drawing as long as I can remember, drawing freehand is much faster and more natural to me than trying to achieve a similar effect with vectors. This is why I have followed a process that might seem counter intuitive to a designer, but which has resulted in a very organic looking vector illustrations.
First I have sketched the characters by hand in Photoshop (using graphics tablet) and drew the lineart on a large canvas to keep as much detail as possible.
I have then used Illustrator’s live trace option to translate these to vectors and added colours. The other set of owl sketches for Luxury Flooring were done in Photoshop and then exported as transparent PNGs to be used across the site. It wouldn’t be possible to preserve the realistic looking pencil-like texture in live trace, and Illustrator’s brushes weren’t as good, so using vectors wasn’t possible.
If you’re interested in learning more about this project have a look at Luxury Flooring’s case study. Otherwise I hope this article has helped you a bit in making your pixel vs vector illustration decision!
