Images for web: vector or raster?


I have created a vector image in Adobe Illustrator. It is basically a simple schema. I would like this schema posted in a web page, but what type of image should I select, raster or vector? According to my understanding, vector is better because of better quality, it should take less space since it doesn't need to save each pixel, and shapes are saved using algorithms that retain proportionality. But in reality I can't find any vector images used in web pages. Why?

If I decide to save the image in raster for web, I need to understand the benefits of both. Assuming that most monitor resolution is 1280 x 1024, I'd like to fit my image to half that monitor size and make it approximately 640 x 512 resolution size.

8/10/2015 10:40:00 PM

The use of vector images in websites has had a bit of a stunted growth due to weak browser support. It was not until version 9 (released 2011) that Internet Explorer included native SVG support. For IE 8 and below, it is necessary to make use of a fallback to ensure consistency across browsers. That's an added step that dissuaded the use of vector images; there was little payoff for that extra work.

The landscape has changed a bit in the past few years. There's now incentive to use vector graphics in web design. Higher density displays are increasing in popularity due to Apple's retina displays and Windows' improved support for UI scaling. Responsive design can also make great use of vector images. You might see vector graphics used all around the web, you're just not aware of it. This very website uses vector images (with fallbacks) for its logo and many of the icons.

Choosing when to use vector images over raster can depend on a few factors. There are many cases where using vector just doesn't make sense. Photographs are the obvious example. Another is for small (less than 32px) icons; vector scales up very well but doesn't necessarily scale down very well.

Whether or not you need a fallback is another choice that won't always be straightforward. You should take into account your target demographic when deciding whether or not you need to implement one. Currently, IE 8 sits at ~11% usage globally, but that statistic might be different for your audience.

My personal philosophy is: if it can be vector, it should be vector. It sounds to me like your example, a simple schema, would take great advantage of what vector has to offer.

4/13/2017 12:46:00 PM