Raster versus Vector

http://offsecnewbie.com/2018/06/01/silo-hackthebox-i-gave-up-wip/?share=facebook Quite often we’ll discuss the quality of an image with clients and point out the graphics are either Raster images or Vector images. Most times the conversation will move along as if everyone is on the same page, however it later comes to light not everyone was up to speed in the terminology. When filing Patent and Trademark drawings, it is very important to submit images comprised of clear, sharp, durable lines that can be easily reproduced for the means of archiving. In our experience we’ve noticed drawings using Vector images are superior to raster images… and here’s why.

Estelle Most people know every digital display is comprised of tiny points of light called pixels. In some displays each pixel is square or rectangular; other displays will have pixels made up of three dots of light (blue, green and red), the display will use a combination of any three of the color to produce the desired color for the image on screen. The more pixels you have in an area, the sharper and more vibrant looking the image will be. The number of pixels in a given area is called resolution or DPI (dots per inch). Think HDTV (2,073,600 pixels) versus the early  computer displays  (480,000 pixels), big difference!

Image files are very much like the example above. And we’re talking about digital images usually produced or traded online as JPEG (.jpg/.jpeg), Bitmap (.bmp), Portable Network Graphics (.png) and a myriad of other formats. Every image is made up of individual squares, called pixels and every image has a resolution or DPI.  Just like the display example, the higher the DPI, the better the image is going to look. These are Raster graphics. If you were to look very closely at a Raster image, you’ll notice shapes that appear round are actually a bunch of squares arranged like bricks to make the curved ends look round. The higher the resolution of the image, the more squares you can pack into an area and the smoother the curve looks. See the images below and we take a one-inch by one-inch circle and reduce it from 600 DPI to 4 DPI in 50% increments. (600 -> 300 -> 150 -> 72 -> 36 -> 18 -> 9 -> 4)  The circle has remained a real-world 1″ x 1″ dimension, we’ve only reduced the physical number of pixels within the 1″ area.

Raster images have one major draw back, the higher the resolution and the larger the physical size of the image; the bigger the total file size.  Some of these files can reach impractical sizes for trading digitally via email, or uploading-downloading on a website or FTP site. One solution is to reduce the image quality another is to create the images as Vector images.

Vector images are no different than drawing a sketch on paper. The quality and sharpness of the lines is limited by the physical display you’re using to view the media. The closer and closer you zoom in on a vector line in a viewing or editing program, the line will still appear to be a continuous  line and not a bunch of blocks or steps like in a Raster image. Take a look at the example below. The “Dakatec” on top was created using a vectored font, the bottom using a raster font.

 

The benefit is, one can have sharp clean lines that will print out in high quality with minimal file size. Depending on the amount of drawing content, a 600 DPI 8.5×11 size raster drawing could exceed 5MB or 6MB and up versus 10KB to 150KB as a vector drawing.

This information is also very useful when communicating or sending information to an illustrator. The higher the quality, or resolution, of an image; the more detail the illustrator can see to reproduce informal artwork into drawings accepted by a PTO.