Vector vs. Raster Images for Web

In the world of HiDPI screens and responsive websites, having high quality images in your website designs is a must. Graphics, especially ones that include text, must be readable at varying sizes when viewed on desktop and mobile devices.

Each browser renders images a bit differently, and web browsers on Windows might render a bit different than on Linux or Mac.

Raster Images

JPG, PNG and GIF images are all raster images. This means that the image is made of pixels each with a single color. If you zoom in on a raster image, you’ll see a grid of colored squares that make up the overall image. These formats are best for photos and photo-realistic graphics as they can be compressed in a way that alters pixels by their nearest color while still retaining the same look at higher compression levels.

When a raster image is resized, the browser renders the resized image in the best way it can to retain the image clarity. Modern browsers will attempt to clear up the image with softening filters to prevent pixilation, an effect that looks like sharpening that can produce jagged lines most noticeable in Internet Explorer.

Vector Images

Vector images are a series of shapes and lines that can be resized without losing clarity. These image formats are made up of defined points, curves and solid shapes defined by shape, percentages, widths and hues. When a vector image is resized in a web browser, it’ll always look clear and crisp.

All modern web browsers support the SVG file format for vector images. In most cases, an SVG file can be used like a standard image, though does not always support applied CSS filters. Since an SVG file is basically a text file similar to XML, you can target elements within the image for additional functionality by element ID. Cool stuff.

File Sizes

Having a website that loads quickly is important. The largest file sized elements in a site are most likely images and video, which is why compression is important. Each web asset should be created in the most effective file format possible considering how it’ll look as well as how small the file size can be. A logo, for example, will probably look best as a vector image whereas a photo can be compressed as a JPG.

Let’s take this iMac graphic, for an example. I exported it from Adobe Illustrator as an SVG, PNG and JPG file, PNG and JPG at 72dpi. Since it’s a vector image to begin with, it’s nothing more than a series of shapes that is considerably smaller as an SVG.

• SVG – 4 KB
• PNG – 13 KB
• JPG – 20 KB

Browser Support

Now that all modern web browsers support SVG images both on desktop and mobile, it’s a good idea to start considering this as an ideal file format in your web sites. Vector images look great on HiDPI screens on our tablets and phones as well as Apple’s desktop and notebooks with retina screens. Since they look great at any resolution and can often be much smaller in file size, they’re a much better solution than creating @1x, @2x and @3x versions of the same raster file for these different screens.