WWD Blog

Raster vs Vector Graphics for Web Design

Designing and developing websites comes hand in hand with producing interesting graphics that tell a story, create a mood, or provide an instruction for the end user.

What are vector graphics?

Vector graphics are infinitely scalable and are read by the browser as a simple set of co-ordinates and lines created by mathematical formulas. This means you could infinitely zoom in on any piece of vector artwork and not lose detail in the process. Due to the simple co-ordinate-based production of the graphics, they are quick and easy to create. Due to their scalability, banners, signage vehicle wraps, logos and other designs required for large applications are best created as vectors

What are raster graphics?

You have probably come across the file formats .jpg, .png .gif etc. before. These image files are made of coloured pixels on a canvas, unlike vector graphics, zooming far enough depending on the image size will narrow your view of them down to individual pixels. This format is useful for detailed/realistic graphics, photos, and artwork.

What is the purpose of the graphic?

First, we need to figure out what the intention is. Is this image meant to be a subtle background for a section, a photo of an office building, a portrait of a real person? Raster formats will almost always be the best choice for your website in these scenarios.
Are you placing a logo? Or trying to illustrate how to use a product or service? Vector might be a better bet, the simplicity of vector graphics make it easy to explain a process or action, and a logo will be present on many pages in many different formats, why not save on load times and use a vector rather than constantly scaling a logo on a page by page basis.
If for example you were creating a website for a music venue, trying to replicate a photo of the venue with the same level of detail in vector format would be incredibly time consuming, inefficient and visually unappealing.

What is the brand identity of the website?

What message are you trying to communicate? A photographer's website might not be the best case to show off vector graphics, as the core product is a visual offering. For an agency website however, a vector graphic demonstrating the process or utility could be useful to explain to a consumer use case scenario.

Simplify production

Even if your web browsing were limited only to the main social media platforms and google, you would come across a lot of vector graphics illustrating events or ideas. The reason behind this is that it's a lot less resource intensive to create a simple vector than to set up a photoshoot of whatever mood or process is being communicated. We often see branded styles of vector graphics narrowed down to the simplest forms possible to allow for easy mass production.

File size

While the disparity of file size between vector and raster graphics on the web has been made smaller thanks to google favouring websites using the new, smaller webp format for raster graphics, a size difference still exists. Usually, a vector logo will be considerably smaller in file size than the same logo in a raster format, the mathematics and co-ordinates-based system helps create smaller and more efficient files.