3

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

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.

  • "Another is for small (less than 32px) icons; vector scales up very well but doesn't necessarily scale down very well."... If you spend some time "nudging pixels" (as you would with a raster-icon anyways). You can get a vector image to look just as good as a small raster-icon. But it might be harder since there is often a lot of trial and error involved! – die maus Aug 10 '15 at 19:40
  • @diemaus true, it's not impossible to have a vector image that scales down well. But it's certainly not the case for all vector images. Also, welcome to the site! – JohnB Aug 10 '15 at 19:41
  • 1
    your answer somewhat suggests that using small vector-images would be a bad idea, but it is often very viable. :) Thank you for your kind welcome! Figured I'd join a exchange more focused on front-end development. :) – die maus Aug 10 '15 at 21:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.