Raster vs. Vector
Luckily for designers, although programs bring along new formats they also help you to easily deliver your product in multiple formats with simple export functions. Letʼs take a step back and begin with understanding the two core image types; raster and vector.
Letʼs start with raster images. The term raster has become synonymous with a few different terms with the most popular being bitmap. Raster images have many descriptions but the most basic to understand the difference between raster and itʼs counterpart vector is raster images are resolution dependent which means itʼs also nonscalable.
Although there are many explanations as to what raster images are I think you can simply say that raster images are made up of single pixels that make up the image as a whole. A great example of a raster image is pixel art which when created at a great scale can illustrate exactly how raster images are created. If you look at a work of pixel art think about it as a very magnified version of your raster graphic. Another way to experiment with this concept is magnifying your canvas in an image editing program and work draw using a 1 pixel sized brush or pencil. My method of doing this is simply zooming into 1600% or greater in Adobe Photoshop and taking my pencil, setting the brush size to 1 pixel and drawing out random things. You can take this further by experimenting with colors and such to see how you can create that smooth rasterized effect. Magnifying a pre-existing image and seeing the different pixels and colors used to create it is also a great exercise.
Unlike raster images vector based images are scalable and not resolution dependent. This is due to vector being based on mathematical calculations. A vector image is basically a bunch of points that are connected with lines that are created by mathematical calculations.
To create vector images I use Adobe Illustrator. To explore how vector images you can use Adobe Illustrator or your preferred vector program to view a vector image and look at the outlines. The more complex the image the better youʼll be able to see how the image is created. There are many free downloads around the internet if youʼre not a vector artist yourself. In Adobe Illustrator you can view outlines by going into the View menu and selecting Outline (you can also use the shortcut CTRL + Y or APPLE + Y on a mac), this is a toggle between Outline and Preview. Outline will basically show you the different paths that are created to make up your final image. This is extremely cool to look at when you see photo realistic vectors in outline form. Youʼll see how different shapes are created to create the realistic coloring. If you donʼt have access to a vector imaging program many vector artists that export the outlines of there work for public viewing on the web.
Now that we took a look into what the different classifications of digital images and how we can explore them, we can now look at when we want to use either type. Pictures taken from a digital camera are raster. The size of this image is dependent on the camera. Along these lines, raster images are used for photo realistic images. Going back to their resolution dependent factor, they are better for products that need static sized images which make them great for many elements in web design. There is one aspect that may be misunderstood when interchanging non-scalable and resolution dependence. This does not mean physical size rather resolution size. A good example is a television set. A 24 inch HDTV has the same resolution as a 60 inch HDTV which allows them to show the same image but at different sizes. The difference between high definition and standard definition is the size of the image that is being delivered which is what the whole 1080 and 720 and 480 things are all about. Opposite of raster vectors are great for images that need to be resized for different products. A prime example is a logo. For me I like to create the basic logo shape in vector format. I can then export this for whatever I need whether on a website or maybe stylized for a video sequence. On a side note, 3D images produced from a 3D program such as Alias Maya or Maxon Cinema 4D are vector images while working in the program but can be exported to raster just like a normal vector can be from Adobe Illustrator.
We have looked at the differences between raster and vector. We have gone a little further as to how we can explore these types of digital images and have also looked at some of the common uses for each format.