• 0

Vector vs Raster


Question

post-32224-1133451181.gif

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.

post-32224-1133451194.gif

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:

post-32224-1133451207.gif

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.

post-32224-1133451142.gif

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:

post-32224-1133451165.gif

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.

post-32224-1133451201.gif

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.

arrowright6tq.gif 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.

arrowright6tq.gif 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.

arrowright6tq.gif 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.

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

post-32224-1133451226.gif

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.

post-32224-1133451188.gif

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:

post-32224-1133451159.gif

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.

post-32224-1133451151.gif

Popular raster graphics programs

Popular vector graphics programs

Popular vector graphics animation programs

post-32224-1133451173.gif

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...

post-32224-1133451232.gif

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

post-32224-1133451215.gif

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 by Rob
Link to comment
https://www.neowin.net/forum/topic/353159-vector-vs-raster/
Share on other sites

Recommended Posts

  • 0

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)

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Posts

    • PDF-XChange Editor 11.0.1.0 by Razvan Serea PDF-XChange Editor is a comprehensive PDF editor that allows you to create, view, edit, annotate, and digitally sign PDF documents with ease. With advanced features like OCR, document security, and PDF optimization, PDF-XChange Editor is a powerful tool for both personal and professional use. Whether you need to edit text, images, or links, or add comments, stamps, or watermarks, PDF-XChange Editor provides all the necessary tools to make your PDFs look perfect. Additionally, it supports a wide range of file formats, including PDF, XPS, and DOCX, making it easy to convert and share your documents. PDF-XChange Editor key features: Edit text and images in PDF documents Add and remove pages from PDF files Annotate and markup PDFs with comments, highlights, and stamps Use OCR to convert scanned documents into searchable text Create and fill out PDF forms Sign and certify PDF documents digitally Add and edit hyperlinks within PDFs Extract text and images from PDF files Batch process multiple PDF files at once Customize the interface to your preferences Work with multiple documents in tabs Convert PDFs to other formats such as Word, Excel, and HTML Use advanced redaction tools to permanently remove sensitive information Add customizable headers and footers to PDFs Merge multiple PDF documents into a single file Split PDF documents into multiple files Add watermarks to PDF documents Use the measurement tools to calculate distances and areas in PDFs ....and much more PDF-XChange Editor 11.0.1.0 changelog: Fixed a crash in the new Open/Save dialog box when creating a new folder in an unavailable network path. (49552) Fixed a rare/infrequent crash on some dynamic XFA forms after changing their field values. [installer] Fixed an issue where shortcuts were lost during an upgrade from the previous version. [installer] Fixed an issue preventing migration of serial keys during updates from version 10. Fixed the issues with the shell context menu after installation of version 11. Fixed the issue with filtering comments. (49478) Fixed the issue that caused "Error [IO subsystem]: Invalid access mode." when converting PDFs to MS Office formats. Fixed an issue with the context menu position on some multi-monitor systems. (48467) Fixed an issue with handling complex custom file filters, displayed by JS, in the new Open/Save Files dialog box. (49486) Fixed several issues with the new 'Select Folder' dialog box. (49505) Fixed an issue with the new custom 'Open File' dialog box when using double-click to open it. (49498) Fixed an 'infinite' loop/proliferation in the 'Open Files' and 'Manage Places' dialog boxes. (49526) Fixed an issue with handling the mouse wheel inside the document "Find" box. (49539) Fixed an incorrect behaviour in the 'Go back (Alt+Left)' button in the new Open/Save Files dialog box. (49510) Fixed an issue with the shortcut keys (Alt+Left/Right) after navigating via breadcrumb paths in the new Open/Save Files dialog box. (49554) [installer] Fixed an issue with redrawing the progress text in the EXE installers. Fixed the issue where a mouse click outside of the polyline/polygon context menu during annotation creation would cancel the annotation. (49475) We switched back to using the system Open/Save/SelectFolder dialog box by default, instead of using the new one, because some popular features such as the QuickAccess/Recent items are missing in the new version. These will be added in a future release. Replaced the 'Extension' column in the new Open/Save File dialog box with a more user-friendly 'Type' column. Also fixed some issues when handling the 'Show file extension' option. (49497) Added the ability to authenticate local network shares in the new Open/Save Files dialog box. (49557) Improved the handling of dates after 01.01.2030 in XFA files - now such dates are stored properly when set via the dropdown widget. Flags NoZoom and NoRotate are now respected for only a limited subset of annotations. Download: PDF-XChange Editor (64-bit) | Portable ~300.0 MB (Shareware) Download: PDF-XChange Editor (32-bit) | Portable ~200.0 MB Download: PDF-XChange ARM64 | 276.0 MB Download: PDF-XChange Portable @PortableApps.com | 97.0 MB View: PDF-XChange Editor Website | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Still 3x what it should cost. So, it seems the trick is to increase price by 6x so that a reduction in price back to 4x looks like a steal. "You savvy shoppers win again!" I'm glad I'm not in a desperate spot to actually even need this overpriced crap. Hopefully, it comes back down by the time for when (or if) I ever do.
    • Although AI is great and has it's use cases they likely have massively overhyped it and it has not delivered as per their expectations. I fully expect them to start saying the same things again when it does get to a certain level of intelligence!
    • Microsoft wants to end printer driver headaches with Windows Ready Print by Usama Jawad A few days ago, Microsoft released Windows 11 Experimental build 26300.8553, bringing a ton of enhancements such as Start menu customization, search improvements, Taskbar polish, and other minor UI tweaks. Another relatively major enhancement snuck deep within the change log was related to upgrades to the Windows printing experience. Now, Microsoft has shared more details about these benefits. For starters, Microsoft has renamed its Modern Print Platform to Windows Ready Print. The company believes that this name highlights its shift in strategy, which now focuses on modernizing, securing, and streamlining the printing experience for Windows devices. Some of the upgrades present in Windows Ready Print have already been seeded to customers and partners. This includes ending support for third-party printer drivers via Windows Update and transitioning towards the Internet Printing Protocol (IPP) and the native Windows IPP printer driver. In line with these changes, new printer installations will default to Windows Ready Print on eligible devices starting from July 2026. However, Microsoft recognizes that not all environments will be able to migrate to this platform immediately, so it will allow users to choose between installing the printer via Windows Ready Print or the traditional OEM process. Users will be able to toggle this configuration through Settings > Bluetooth & Devices > Printers & Scanners > Printer preferences. This control applies only to new printer installations, and its functionality can also be modified via Group Policy as follows: Launch Group Policy Editor Navigate to Local Computer Policy -> Administrative Templates -> Printers Find and select 'Configure Windows Ready Print driver ranking' -> double click to open it Select 'Enabled' (if you wish to enable Windows Ready Print driver selection) or 'Disabled' (if you wish to explicitly disable Windows Ready Print driver selection). Select Apply Select OK Similarly, if you set up Windows protected print mode through the same setting in Windows 11, it will also default to using Windows Ready Print exclusively. Microsoft hopes that these improvements will help eradicate dependency on OEM-specific driver installation processes and simplify printer installations. We'll likely find out more about other tangible benefits in the coming months.
  • Recent Achievements

    • One Month Later
      johnjacobb40 earned a badge
      One Month Later
    • One Year In
      Primer1st earned a badge
      One Year In
    • Experienced
      JayZJay went up a rank
      Experienced
    • Reacting Well
      Sir_Timbit earned a badge
      Reacting Well
    • Week One Done
      rubentuben8 earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      513
    2. 2
      PsYcHoKiLLa
      231
    3. 3
      +Edouard
      138
    4. 4
      ATLien_0
      87
    5. 5
      Steven P.
      81
  • Tell a friend

    Love Neowin? Tell a friend!