• 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

    • I'm fine with a little reasonable promotion of Edge, but the degree which they do it right now I consider extremely unreasonable. 
    • Microsoft AI boss no longer believes that AI will replace human workers by David Uzondu Mustafa Suleyman, the head of Microsoft AI, recently took back his statements concerning white-collar jobs that he gave to the Financial Times in an interview made back in February, where he claimed that AI would replace office workers within 12 to 18 months. On Monday's episode of The Verge's Decoder, Suleyman recast the technology as more like a helpmate than a tool designed to take over your job. He explained that smaller office duties will "increasingly become digitized, automated" as people generate more digital materials. During the discussion, Suleyman emphasized a "very important distinction" between "tasks" and "jobs" to clarify his previous claims. He argued that his earlier comments only referred to individual actions that people perform at their desks. Suleyman used to work for DeepMind, the research lab he co-founded in 2010 alongside Demis Hassabis and Shane Legg, before he left in 2022 to establish Inflection AI and build an empathetic digital assistant. Microsoft hired him in March 2024 to lead its newly formed "Microsoft AI" division, placing him in charge of consumer products like Copilot, Bing, and Edge. His February comments also detailed plans for Microsoft to achieve self-sufficiency with a $140 billion infrastructure budget to train frontier models, predicting that creating a customized AI will soon feel like creating a podcast or a new blog: The 41-year-old is not the only AI executive who's softened his "AI will replace you" stance. OpenAI's CEO, Sam Altman, last month used X to push back against employment panic by arguing that his startup builds tools to assist humans rather than build replacements. He had previously garnered backlash by suggesting that many modern office roles that AI might replace did not qualify as "real work" in the first place, at least when you compare desk jobs to physical, historical labor like farming.
    • Adobe Acrobat Reader DC 2026.001.21662 by Razvan Serea Adobe Acrobat Reader DC software is the free, trusted standard for viewing, printing, signing, and annotating PDFs. Its the only PDF viewer that can open and interact with all types of PDF content – including forms and multimedia. It’s connected to Adobe Document Cloud – so you can work with PDFs on computers and mobile devices. Adobe Document Cloud is a revolutionary, modern and efficient way to get work done with documents in the office, at home or on-the-go. At the heart of Document Cloud is the all-new Adobe Acrobat DC, which will take e-signatures mainstream by delivering free e-signing with every individual subscription. Document Cloud includes a set of integrated services that use a consistent online profile and personal document hub. With Adobe Document Cloud, people will be able to create, review, approve, sign and track documents whether on a desktop or mobile device. Businesses will be able to take advantage of Document Cloud for enterprise which provides enterprise-class document services that integrate into systems of record such as CRM, HCM, CLM, and CMS, adding speed, efficiency and transparency to getting business done with documents. Adobe Acrobat Reader DC new feature highlights: Work with PDFs from anywhere with the new, free Acrobat DC mobile app for Android or iOS. Select functionality is also available on Windows Phone. Use the new Fill & Sign tool in your desktop software to complete PDF forms fast with smart autofill. Download the free Adobe Fill & Sign mobile app to add the same option to your iPad or Android tablet device. Save money on ink and toner when printing from your Windows PC. Store and access files in Adobe Document Cloud with 5GB of free storage. Get instant access to recent files across desktop, web, and mobile devices with Mobile Link. Sync your Fill & Sign autofill collection across desktop, web, and iPad devices. Adobe PDF Pack premium features includes: Convert documents and images to PDF files. Use your mobile device camera to take a picture of a paper document or form and convert it to PDF. Turn PDFs into editable Microsoft Word, Excel, PowerPoint, or RTF files. Combine multiple files into a single PDF (web only). Get signatures from others with a complete e-signature service. Send, track, and confirm delivery of documents electronically instead of using fax or overnight services (tracking not available on mobile). Store and access files online with 20GB of storage. Download: Adobe Acrobat Reader DC 64-bit | 719.0 MB (Freeware) Link: Adobe Acrobat Reader DC Home Page | Release Notes | Screenshot Get alerted to all of our Software updates on Twitter at @NeowinSoftware
    • Meta will now use data from outside businesses to personalize AI responses by David Uzondu In an update that's rolling out globally (except in a handful of countries), Meta will use your data from outside businesses to personalize your AI responses and your primary feeds. Meta already utilizes your shopping activity to target ads, but the company now plans to expand this tracking to personalize other "parts of your experience" like feed algorithms and AI assistant chats. The company is replacing the two settings ("Your activity off Meta technologies" and "Activity from other businesses") that currently let you disconnect off-platform activity with a single, renamed setting called Activity from other businesses. If you don't want Meta to manipulate your feed and AI responses using your outside history, you can just turn the Activity from other businesses setting off in your account settings. This toggle resides within your Accounts Center, applying your choice to every connected profile. Turning this off will not stop companies from sending your data to Meta. The company will still collect your web interactions, but it only uses them to train products, while still accessing external accounts you connect. When The Verge spoke to Meta spokesperson, Emil Vazquez, the representative said that this update will exclude several locations at launch including the European region, the UK, Brazil, Thailand, South Africa, Turkey, South Korea, Ecuador, Nigeria, and Kenya. The new update comes at a time when the social media giant is recovering from a major PR disaster involving generative AI. Last week, there was a huge security issue on Instagram where attackers figured out a way to exploit a prompt injection vulnerability. Hackers managed to trick Meta AI into handing over account ownership (even if the victim had 2FA enabled). Some of the affected accounts include the dormant Obama White House profile, cosmetics brand Sephora, the Chief Master Sergeant of the Space Force, and security researcher Jane Manchun Wong. Internally, the company also had to scale back plans on its Model Capability Initiative (MCI), an employee-monitoring program designed to train corporate AI models by recording worker keystrokes and screen activity, after employees raised privacy concerns and complained about severe battery life drain.
    • JetBrains is working to cut false positives in RustRover 2026.2 by David Uzondu Recently, JetBrains released the fifth EAP build of its dedicated IDE, RustRover 2026.2, bringing improvements like a Run gutter icon for criterion_main! macro benchmarking and a feature that alerts you when there are unused traits in your current scope. Now, the company is out with a blog post addressing one of the "most common" complaints from users: false positives. In RustRover, a false positive occurs when the editor incorrectly highlights something as an error even though the project compiles and runs successfully. This mismatch flags a gap between the IDE's internal intelligence and the actual compiler. When the editor flashes red warnings over perfectly valid code, developers lose trust in the tool, which stalls momentum. Traditionally, RustRover runs cargo check to detect compiler errors and warnings, but it also relies on its own code analysis engine to power real-time features. To provide quick feedback, this engine parses your source code into a syntax tree while inferring types and resolving names as you type. Because this engine must work on broken, half-written code and react instantly, its logic sometimes diverges from the compiler's, producing false positives that do not exist in the compiler's eyes. JetBrains said that it has a "dedicated task force" focused specifically on identifying and fixing false positives by analyzing user reports and examining large-scale open-source projects. To speed up this process, the team built an internal system modeled after Crater, the famous Rust project that compiles and runs tests for every single crate published on crates.io. This automated pipeline compares the diagnostics from RustRover's analysis with actual compiler output to catch discrepancies before they reach users, ensuring smoother workflows. RustRover, for those who're unaware, is a dedicated IDE designed specifically for Rust developers. It's been around for a couple of years now, providing features like built-in debugging via LLDB, seamless cargo integration, advanced macro expansion, and HTML support. JetBrains distributes the app under two licensing models: a paid commercial subscription and a free option for non-commercial use.
  • Recent Achievements

    • 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
    • Week One Done
      ARaclen earned a badge
      Week One Done
  • Popular Contributors

    1. 1
      +primortal
      512
    2. 2
      PsYcHoKiLLa
      229
    3. 3
      Edouard
      134
    4. 4
      ATLien_0
      87
    5. 5
      Steven P.
      80
  • Tell a friend

    Love Neowin? Tell a friend!