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

[JMann Veteran]

Welcome to Neowin OpenHost, glad this got Pinned. It deserves it.

[bucko]

yay it's pinned

[Rob Veteran]

Many thanks for all the kind comments, and for AgEnTsMiTh for realising its potential - now it's the job of you guys to give some suggestions on improvements, any graphic-related issues that need explaining with a couple of choice screenshots. Had to edit out some of the pretty smileys I used when writing it due to the limit of images per post, I wonder if that's removable if I end up reaching it with additions?

[openhost.us]

Thanks for the warm welcome :D :D

Rob may I ask you what kind of software you are using for vector drawing?

I have some experience with CorelDRAW, what do you think of it?

[AgEnTsMiTh]

If that does indeed become a problem Rob, just let me know and we will see what can be done to fix it (Y)

[Rob Veteran]

Thanks for the warm welcome :D  :D

Rob may I ask you what kind of software you are using for vector drawing?

I have some experience with CorelDRAW, what do you think of it?

586320855[/snapback]

I used CorelDRAW from version 2 way back in... whenever that was released. Great program, I highly recommend it personally, but professionals generally use Adobe Illustrator or Macromedia Freehand for vector graphics.

Me, I'm a web designer as opposed to a designer in the traditional sense and as such I use Macromedia Fireworks. There's very few features that I've needed that it hasn't had and I've had to resort to Photoshop.

[exobot]

There's very few features that I've needed that it hasn't had and I've had to resort to Photoshop.

Finally! Another Fireworks nut, it's all I've used for a long time - when doing web design, it's so much easier than using PS. The 'live effects' are a life saver :yes:

[Rob Veteran]

Finally! Another Fireworks nut, it's all I've used for a long time - when doing web design, it's so much easier than using PS. The 'live effects' are a life saver  :yes:

586324956[/snapback]

Too true - Fireworks is a superb program, I find it easier to use than PS without much loss in functionality (taking into consideration the differing intentions of the program anyway). And live effects... love 'em!

[Danellis]

Excellent guide Rob (Y). I'm very pleased this got pinned, it's also inspired me to perhaps write a tutorial of my own!

[Laptop]

Very nice guide there (Y) well done.

[Rob Veteran]

Thanks very much guys - I really would like input on sections to add to make its pinning truly worthwhile, such that other posts can link to it in the future. Any ideas?

[Glorious]

Very detailed, easy to read, makes it easy to understand.

10/10 Rob (Y)

[Al Mehairi]

AWESOME topic buddy!

I have question. I had an exam like month ago and we had a question which was saying "which has more colours, RGB or CMYK?" so what do u think would be the right answer? :p anyone know

Thanks

[bucko]

I would say CMYK but I'm probebly wrong, I think CMYK is used for printing and has colours like Magneta and stuff. I bet I'm wrong though.

[Rob Veteran]

There's a bit of confusion about RGB versus CMYK, I'll update the guide tonight with a section on it.

[heathrowe]

well contructed guide, Rob.

h

[Opelman]

thanx...it's very helpful :D

Cheers

[Chillbo]

Great Guide! I'm looking forward to CMYK vs RGB...

Chillbo

[odious_m]

....and don't forget indexed colors, as well.

BTW, awesome guide!

[hifive]

Superb.

[Rob Veteran]

OK, so to confirm, we want a little bit on CMYK and on indexed colours, correct?

[phate]

Yea, I have no clue about them. Great guide by the way!!! loved it =)

[bucko]

OK, so to confirm, we want a little bit on CMYK and on indexed colours, correct?

ya plz :happy:

[Coffeee]

Brilliant Guide Rob, this will really help everyone at neowin :)

[Rob Veteran]

Brilliant Guide Rob, this will really help everyone at neowin :)

586608186[/snapback]

Thanks guys, sorry I've taken so long to do the CMYK section, starting university has eaten up all my time. I'm hoping to get it done today.