Vector vs Raster

[Rob Veteran]

Throughout my time here in Neowin, I have seen many questions on graphics answered hundreds of times, and felt that a central respository on some of the more simple questions of computer graphics could be useful. And so, I've created this. Please give your comments, corrections and suggestions for revisions.

Raster graphics are images that are defined in terms of a generally rectangular grid of pixels, or picture elements. Each pixel is one small square of colour, which, when combined with other pixels side by side, merge together to form one solid image to the eye. Let's take a popular Neowin smiley and analyse its pixel content:

Colours

Computer graphics are generally stored in RGB or CYMK colour formats. The former will be explained in this guide, and should demand be sufficient for a CYMK section, this will be added later.

Colours are made up of a combination of red, green, and blue part intensity. The intensity can vary between 0 and 255.

• Red is 255 parts red, 0 parts green and 0 parts blue.
  
• Black is 0 parts red, 0 parts green, 0 parts blue.
  
• White is 255 parts red, 255 parts green, 255 parts blue.
  
• Yellow is 255 parts red, 255 parts green and 0 parts blue.
  

Each one 16,777,216 colours that are theoretically available are made up of a combination of red green and blue.

The colour yellow can be represented as #FFFF00 in the hexadecimal system. Here, 6 digits are used, which can be the numbers 0-9, or the letter A-F. This way, 256 possible values can be represented in two characters. #FFFF00 represents FF parts red, FF parts green and 00 parts blue, FF equalling 255 in regular denary figures. Hexadecimal figures are mostly used in web design, since the HTML specification accepts these figures most readily. Newer, CSS techniques allow individual R, G and B parts to be specified in denary, however.

Anti-aliasing

90s web design was characterised by "the jaggies". The relatively large size of a pixel can be a problem when drawing lines that are neither horizontal nor vertical. Without some way of merging a diagonal line into the background, the line appears choppy and has an unprofessional, unclean appearance. Anti-aliasing to the rescue.

Anti-aliasing works by adding intermittant pixels with a colour somewhere between that of the foreground and background, such that the images merge in the eye of the viewer. The result is a straighter line without so many visible "steps" due to the grid-nature of raster graphics.

Dithering

Modern displays and graphics adaptors can display the full complement of 16,777,216 colours, to a greater or lesser degree of colour accuracy. But what happens if a user is viewing on less than 32-bit colours, let's say, 256 colours? A process known as dithering can occur - either at the time of image creation of by the graphics adaptor at display time - to trick the eye into seeing more colours than are actually capable of being displayed. For example:

What initially appears as a block of orange colour is actually alternating pixels of red and yellow. The success of dithering is varied and it is not used often in modern computing when the full compliment of colours is available. Nevertheless, some web browsers still do not support full alpha channels and so a dithered overlay of black and transparent pixels can produce the appearance of a darker shade over an image. For example, the following image obtained from SausageMania.com has a dithering effect applied above the poor girl's eyebrows.

Transparency

Raster graphics are rectangular. But there are ways to overlay graphics such that the background appears from behind the rectangle. There are two types of transparency. The former, supported by formats such as GIF, allows a pixel to be either transparent or opaque. The latter, supported by formats such as PNG, allows 256 levels of transparency ranging from fully transparent to fully opaque, and everything in between. This second complex level of transparency, full alpha channel support, allows for more complex visual effects to be presented to the viewer where "layers" of an image can be translucent. This is fine in graphic design, but on the web it can prove a little trickier.

Raster formats

There have been a number of formats developed over the years to store raster graphics. Some of the most popular formats are discussed below, each with their advantages and disadvantages.

BMP - Bitmap Graphics

• Easy to create with the built-in Windows Paint program.
  
• Long history, therefore good, universal support.
  
• No compression means the format is lossless.
  
• Creates huge files since no file compression is used.
  
• No transparency.
  

Avoid wherever possible.

GIF - Graphics Interchange Format

• Creates small files as good compression is used.
  
• Universally supported across platforms.
  
• Transparency supported.
  
• Animation supported.
  
• Palette of colours limited to 256 per image.
  
• Transparency is only 1-bit, therefore no translucency.
  

Good for the web, on images of less than 256 colours, for example simple geometric shapes e.g. bullets for lists.

JPG - Joint Photographic Expert Group

• Lossy compression format produces relatively small files.
  
• Universally supported across platforms.
  
• Artifacts visible at high compression rates.
  
• No transparency.
  

Good for the web, for images like photographs where colour depth is important but lossless formats produce large file sizes.

PNG - Portable Network Graphics

• Both lossy and lossless compression available.
  
• Both 1-bit and full alpha channel transparency available.
  
• Small file sizes produced.
  
• Poor support in some web browsers for full channel transparency.
  
• Compression not as great as lossy formats.
  

Great for the web, but be careful if using transparency. Good trade-off of quality and compression.

Where raster graphics are defined in terms of individual pixels, vector graphics are actually stored as mathematical rules - widths, heights, curves, proportions, ratios. Where raster graphics have a set height and width and look pixelated when stretched beyond these boundaries, vector graphics render themselves to the space given to them, such that they are resolution independent. Let's take a look at the Microsoft logo.

As you can see, the vector based logo is not based on pixels any longer. It is based on points set at proportional distances, joined with lines and curves, and filled with a solid black colour.

When drawing curves in vector graphics programs, a number of points are defined and dragged such that a smooth curve is plotted. This curve is independent of dimensions but is saved as in proportions and ratios such that it will scale to any resolution. An example:

Vector graphics formats

Again, a number of formats exist for storing vector graphics, each with their advantages. It is important to note that, by their very definition, vector graphics are SMALL in comparison to raster graphics when it comes to file size. Since they are not saving information on each and every pixel, but rather rules for rendering, file size is cut immensely. The universally accepted format for vector graphics, particularly when it comes to company logos and sending files to print, is EPS - Encapsulated PostScript. PostScript is a format developed by Adobe to describe pages to a printer, plotter, or screen. Rather than storing straight data it stores instructions for the makeup of the page. Fonts are stored as individual character vector objects, for example, so they can be printed at as high a resolution as the printer can print. Macromedia's Flash technology is an excellent example of vector graphics working at their finest - whatever the window size, vector elements of the Flash movie appear crisply anti-aliased, and individual frames can even be printed in high resolution due to the vector-based nature.

Popular raster graphics programs

• Adobe Photoshop
  
• Jasc Paint Shop Pro
  
• Macromedia Fireworks (tailored to web design)
  
• The GIMP
  

Popular vector graphics programs

• Adobe Illustrator
  
• CorelDraw
  
• Macromedia Freehand
  
• Macromedia Fireworks (tailored to web design)
  

Popular vector graphics animation programs

• Macromedia Flash
  

A good question. At first glance, vector graphics seem to overcome all the difficulties of raster graphics. They can be resized to any size without loss of quality, and pixelation just doesn't occur. File size is also greatly reduced. However, each format has an individual purpose. A photograph cannot be expressed as a vector graphic because it simply isn't vector data. A sunset cannot be defined mathematically, at the risk of starting a philosophical argument on the world around us. The real world is not vector-based. The table in front of you has an infinite pixel depth, infinite variations in colours, infinite variations in relief and texture. Vector graphics are reserved for images such as typefaces, lines, curves. Complex vector images can be created but they have been created specifically IN vectors. Photographs and complex raster effects like lens flares are defined with pixel-by-pixel lighting and colour effects, not with vectors.

Of course, this isn't to say that attempting to express real-world objects as vectors won't make excellent images artistically...

A good example to illustrate a collaboration between the two is in Pixar animated films. Let's take Sully.

The character of Sully is created as a 3D mesh in a 3D vector graphics application. It can be made to any size because of its vector nature. When it comes to rendering the final film, however, things like fur effects, scene lighting and other special effects are added as raster filters to the image. The collaboration of the two creates the blend between computer editability (vector) and realistic visuals (raster).

Logos for businesses should always be created as a vector. Why? For maximum usage. It's all very well creating a great raster logo with lens flares and bevels and gradients but what happens when it needs to be on a huge banner in a hall? Or, at the other extreme, printed on headed notepaper. Raster effects just are not practical when it comes to corporate identities. With vector-based logos, the image will scale to any size and any application; raster graphics would require re-rendering each time a new size was required, not to mention problems with transparency across print and computer platforms.

Edited December 1, 2005 by Rob

[Rob Veteran]

Any and all feedback is greatly appreciated, plus any topics you would like included in the revision.

[bucko]

Your a life saver rob, this is excellent!

[Techy_]

Nice guide, two thumbs up. (Y) (Y)

[emo]

wow, great job man!

[pto]

This is A+ work.

Great explanatory.

Edit: I nominate this for sticky :)

[exobot]

Someone come and make this all sticky, please.

A very good guide, I can see people pointing nubs at this for a while to come.

Excellent :).

Perhaps a program comparison might be an idea, (Macromedia Fireworks | Abode Photoshop 7/CS 2 | The GIMP | Paint Shop Pro 9, etc )?

[Rob Veteran]

Added some programs for reference :) Thanks for the feedback so far.

[Anthony T.]

Great tutorial, we need more like this.

[Code.Red]

WOW! Nice job, the one about pixels and smilies kind of confused me, the pic showing the grid on the pixels, each block isnt really a pixel?

This should be a sticky.

[H5N]

Wonderful guide! (Y)

[beekay_]

Excellent guide! (Y)

[SubZero123123]

wow...that seems too simple but it makes things so much clearer. Thank you so much!

[Favorable7404]

This is a really good guide for a rookie like me. Thanks a lot. :)

[ninjamunky]

I just skimmed the guide and it looks pretty good, pretty much says everything that needs saying :)

[GhostShell]

Awesome guide! (Y)

[Hankyone]

Nice guide, two thumbs up. (Y) (Y)

586316146[/snapback]

pfff i give 2 and a half (Y) (Y)

:p

nice guide

[ember]

awesome guide! I'd say sticky this too (Y)

[risadams]

I guess I will say that I like it too

I give you a cookie

[Rob Veteran]

Thanks very much for the feedback, hopefully this will be useful to lots of people.

[JMann Veteran]

(Y) Excellent Guide. Make sure you get this one Pinned, would be a help to so many people. :) Try PMing AgEnTsMiTh or Mr Magoo and see what they think about this thread and making it a sticky.

[Rob Veteran]

Aha OK then, I'll give it a shot :)

[BigCheese]

Very nice, well put together guide. Very comprehensive, you obviously spent a lot of time on it.

Maybe you should add that you can also make animations with gif files.

[Rob Veteran]

Very good point, will add that now.

[AgEnTsMiTh]

This is a very well done guide and deserves to be pinned. Thank you for providing this to the members and I look forward to seeing it put into use as well as growing with even more very useful information for new and old designers alike.

Well done (Y)

[openhost.us]

AWESOME GUIDE!!!

Thanks for it Rob,

I am new one here and this web design corner is a wonderful place.

Thanks again!

Edited August 3, 2005 by openhost.us