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

[Computer Guru]

Great guide Rob. A++

I personally use both Fireworks and Photoshop on the same project. Fireworks isn't high and almighty about saving as layered PSDs, so if anything isn't in Fireworks, just do it in PS.

[HipHopaholic]

Good Stuff :cool:

[Xtreme $niper]

Awsome. I learned quite a bit through this, thanks!

[tiagosilva29]

Excellent guide!

I'm looking forward to see a section about CYMK, since I don't know much about it.

Inkscape is a Popular vector graphics program! :whistle:

[tacoman]

First i want to complement you on your guide: good job! :lol:

I also want to second the thing about inkscape. In many ways, it's actually better than illustrator (although it is worse in some ways). For one thing, it's a heluva lot better in tracing raster graphics.

You might also want to put in a comparison of vector graphics formats like SVG, EPS, AI, and WMF.

You also might want to include a link to http://www.formatguide.com/. It's a great resource.

Can't think of anything else for now.

Cheers,

TacoMan

Edited December 17, 2005 by tacoman

[Rob Veteran]

First i want to complement you on your guide: good job! :lol:

I also want to second the thing about inkscape. In many ways, it's actually better than illustrator (although it is worse in some ways). For one thing, it's a heluva lot better in tracing raster graphics.

You might also want to put in a comparison of vector graphics formats like SVG, EPS, AI, and WMF.

You also might want to include a link to http://www.formatguide.com/. It's a great resource.

Can't think of anything else for now.

Cheers,

TacoMan

Much appreciated, I'll try to update the guide tonight with the stuff on CMYK and with your suggestions.

[Dessimat0r]

This guide rocks.

[SamNeeds]

Lovely first post. Very informative! Will bookmark!

[Winston]

Excellent guide.

You should also slip in a little about interlacing. Also for the JPEG features, you should also mention another disadvantage with jpeg is that when a jpeg file is re-saved again into a jpeg format, the jpeg compression algorithm is re-applied to the image again, causing even more loss in quality.

Keep up the good work, and thanks for your time writing it all up.

[+Nik Louch Subscriber²]

VERY useful guide for noobs. Worth including what "resolution" means?

[Rob Veteran]

Excellent guide.

Also for the JPEG features, you should also mention another disadvantage with jpeg is that when a jpeg file is re-saved again into a jpeg format, the jpeg compression algorithm is re-applied to the image again, causing even more loss in quality.

Great - I'll put that in as a revision sometime soon along with CMYK details.

Worth including what "resolution" means?

Could be worth touching on it, sure - I'll put that in too. Thanks for all the kind comments.

[spaceusb]

Good job on the guide.

[illicit]

Good job on the guide.

Indeed... this is a very useful guide.

[adpixel]

Very good article!

Can you show other work?

I can work with Adobe Ilustrator. I don't like Corel. It is very complicated for me.

which has more colours, RGB or CMYK?

CMYK

The difference between is RGB and CMYK is :

RGB - Red, Blue, Green - There are 3 colours

CMYK - cyan, magenta, yellow, key (black). - There are 4 colours

[myNando]

Very good article!

Can you show other work?

I can work with Adobe Ilustrator. I don't like Corel. It is very complicated for me.

which has more colours, RGB or CMYK?

CMYK

The difference between is RGB and CMYK is :

RGB - Red, Blue, Green - There are 3 colours

CMYK - cyan, magenta, yellow, key (black). - There are 4 colours

RGB has more colors since it's based on light. Therefore, you can have brighter/lighter and more saturated colors than CMYK.

[Alladaskill17]

Very nice guide. :yes:

[Cosmin]

very interesting website too :yes:

Cosmin

[+Nik Louch Subscriber²]

which has more colours, RGB or CMYK?

CMYK

The difference between is RGB and CMYK is :

RGB - Red, Blue, Green - There are 3 colours

CMYK - cyan, magenta, yellow, key (black). - There are 4 colours

Wow, you really have no idea what you're talking about!

[Cosmin]

:D

[PL_ Veteran]

Very cool! You just cleared up my understanding of vector, which was limited to the poster in my IT classroom.

I have a question. Have you seen the trailer on Xbox Live for "A Scanner Darkly"? Would that be using the Pixar effect you described?

[t0lerence]

Great article there mate,looks like Iwill have to install and learn Freehand, need to vectorise my logo now...

[Guest]

The monster from monsters inc isn't vector... in the 3D application it was created, it is true that there are vector coordinates in 3D space images are rendered to a bitmap format.

(unless its fanart or something done in illustrator... thats some crazy skill in that case!)

[Not Cool]

He said that Sully is created as a vector but in the movie rendered with raster effects such as fur.

[primexx]

A note on the raster formats & web support.

BMP - yea it's probably best to avoid whenever possible. Convert to lossless PNG.

JPG - only good for pictures. avoid for web (due to lossy)

GIF - used to be good, but now outdated and replaced by PNG. DO NOT USE! It's technologically inferior to PNG, limited with a license, and file size is larger than the equivalent coloured PNG 8.

PNG 8 - good for anything with 256 colours or less and no alpha blend. If you're THAT concerned about file size, then use this when possible.

PNG 24/32 - true lossless format with alpha blend. Use this for anything that you're not using PNG 8 for. Good for storage of offline pictures as well as web graphics. Be sure that you optimise the images to be used for web first, otherwise you'll have a lot of extra file size that you dont need.

Lossless PNG (and PNG 8 where quality is not lost) is the bare minimum for web graphics right now, and the next step is to use all vector graphics (svg looks promising) in the near future.

[r4q2]

That is a great guide mate!

As a Graphic Artist I get asked to explain this daily. :huh: