To simplify it, raster graphics or bitmaps are composed of pixels while vector graphics are composed of paths. Raster graphics are arrays of pixels of various colors that form an image when together. A raster graphic can either be something like a JPEG, a PNG, or a GIF. Vector graphics are composed of paths or lines that are either straight or curved. A vector graphic can either be something like an EPS, a PDF, or Adobe Illustrator file. Data files for vector graphics contain points of where the paths will start and end, how much the paths will curve, and the colors that will either border or fill the paths.
Vector graphics can allow images to be scaled very large without losing the quality of the image. Raster graphics will cause images to become “blocky” and lose the quality of the image because each pixel will increase in size as the image is made larger. The lower the resolution or pixels-per-inch of an image is, the smaller the image must be to maintain the quality. Though, raster graphics can be scaled down. Because of this, most designs including logos will be made in vector formatting so that the quality will look the same whether its on a business card or a billboard. Images designed for the web should be made in the raster format since they can be compressed for storage and images optimized for the web. Raster images are ideal for photo editing and creating digital paintings or work in programs such as Photoshop as they can be compressed for storage and web optimized images. Digital cameras will create raster images, and photographs in print and online are raster images. Vector graphics are ideal for photo editing or work in programs such as Illustrator and the program will do the math of scaling the image up automatically.
Raster images are capable of rendering complex, multi-colored visuals, including soft color gradients which makes them work best when doing pixel by pixel editing to create a vivid and detailed painting. Vector images are capable of designing line art or wireframes that use simple and solid colors comprised of shapes with their own colors. It is important to note that vector images cannot achieve the color gradients, shadows, and shading that raster images have unless part of the vector image is rasterized. The difference between vector images and raster images is easy to see when you zoom on in a raster compared to a vector. When you do this, you can see the individual pixels in the raster file, but the vector is still smooth. With vectors, the resolution of an image is not a concern.
Source 1 and Source 2 Photo by Mikaela Shannon on Unsplash