SCAD Teaching Demo – Raster Images vs Vector Images

A Breakdown in video and print.

What is a raster image? (Think photographs like you take with your phone, camera, or scanner)

Pointillism in Art

Raster images, also known as bitmaps, are comprised of individual pixels of color. Each color pixel contributes to the overall image.

Raster images might be compared to paintings done in pointillism style, which are composed with a series of individually-colored dots of paint. Each paint dot could represent a single pixel in a raster image. When viewed as an individual dot, it’s just a color; but when viewed as a whole, the colored dots blend together to create a complete image. The pixels in a raster image work the same way to allow the designer/image editor to alter the image at the pixel level.

Notice the BitMap when zoomed

Raster images are capable of rendering complex, multi-colored visuals, including soft color gradients. Digital cameras create raster images, and all the photographs you see in print and online are raster images. Typically, the images you see on the web are saved at a small DPI size and are not suitable for print but are perfect for viewing on all of your digital devices.

There are different types of raster files: JPEG, GIF, and PNG are examples, and each file type has its own nuances and compression formats.

Raster images are ideal for photo editing and creating digital paintings in programs such as Photoshop and GIMP, and they can be compressed for storage and web optimized images.

Quality of the raster image is often dictated by how many pixels are contained in an inch, expressed as pixels-per-inch or PPI; as well as the overall dimensions of the image, also expressed as pixels (for example, 5,000 pixels wide by 2,500 pixels high).

[Side note] The greater the PPI and dimensional measurements, the higher the quality. Most printing projects require images to be at least 300 PPI, for example. Be careful not to confuse PPI and DPI. DPI is short for Dots Per Inch and it actually refers to printer dots per inch. These days, when used in photo software, it means PPI, which are pixels per inch. DPI and PPI are two different things, yet often DPI is used when PPI is meant, so read its usage in context. PPI is a measure of how an image is printed to a medium such as paper. Many software programs call PPI a measure of “resolution” which leads to more confusion since it is the resolution of the printed output, not the “resolution” of the digital image.

Raster images do not scale well. Work with Vector images when you need to scale up.

Though raster images can’t be scaled up, they can be scaled down; which is typically the case for web images, often saved in smaller sizes and at resolutions of either 72ppi or 96ppi. When you downscale a raster image you actually remove pixels, so if you then try to make the image larger, the remaining pixels spread out to fill the new space causing your image to be jagged or blurry.

What is a vector image?

Unlike pixel-based raster images, vector graphics are based on mathematical formulas that define geometric primitives such as polygons, lines, curves, circles and rectangles. Because vector graphics are composed of true geometric primitives, they are best used to represent more structured images, like line art graphics with flat, uniform colors. Most created images (as opposed to natural images) meet these specifications, including logos, letterhead, and fonts.

Inherently, vector-based graphics are more malleable than raster images — thus, they are much more versatile, flexible and easy to use. The most obvious advantage of vector images over raster graphics is that vector images are quickly and perfectly scalable. There is no upper or lower limit for sizing vector images. Just as the rules of mathematics apply identically to computations involving two-digit numbers or two-hundred-digit numbers, the formulas that govern the rendering of vector images apply identically to graphics of any size.

Scaling a Vector image up or down still maintains crisp lines and shapes

Further, unlike raster graphics, vector images are not resolution-dependent. Vector images have no fixed intrinsic resolution, rather they display at the resolution capability of whatever output device (monitor, printer) is rendering them. Also, because vector graphics need not memorize the contents of millions of tiny pixels, these files tend to be considerably smaller than their raster counterparts. Overall, vector graphics are more efficient and versatile. Common vector formats include AI, EPS, SVG, and sometimes PDF.

There is much, much more information available on the web if you would like to learn more about vector or raster images. A quick web-search brings up hundreds of links with information like I gathered above to share with you. When choosing which type of image you are going to use, you must consider the final product you wish to produce. Digital projectors project what you see on a computer monitor – the limiting factors are the resolution of the devices (i.e. the projector itself, and the computer ultimately). So, the size of the computer monitor (measured in pixels) is the size your image needs to be. The DPI/PPI setting is irrelevant.  If it is a FullHD (1920x1080px), make your file FullHD.  If it is only HD (1,280x720px) make your image HD.  It does not matter if the image projected is 1 ft or 20, or the distance to the wall. It does not change the fact that your projector can only project at its native resolution.

There are many technology innovations that make use of image projection. How do you think you would create images for each of the following:

Video Mapping

Video mapping turns any surface, no matter how irregular or uneven it is, into a projectable platform. You can project the image on buildings, internal décor elements, architectural elements, sculptures, and other such installations. This projecting system has special spatial mapping software that ensures the projection mimics the shape of the surface, which adds an extra dimension to the images. This is one of the most creative and customizable options available.

Ultra-Wide Projection

Videos and images have a much bigger impact if they encompass a wider field of vision. Regular projection is limited in width and doesn’t always encompass the entire field of vision, which is why many event organizers choose ultra-wide projection. This technique combines two or more projectors to create a bigger scene that has a better visual impact. The projection is seamless so there’s one flowing image on the surface. This is more affordable than projection walls but requires more rigging up front or or space for rear projection.

LED Walls

LED walls are some of the most popular devices for creating bright, visually intricate, and entrancing scenery at events. It is very popular in large-scale corporate events because the wall transfers information clearly. LEDs are available in different sizes and configurations so you can find something that suits your event’s purpose perfectly. The walls can be rigged or be free standing so you can create a layout that works well with the location.

Return to the main page of this Teaching Demo by clicking here: SCAD Teaching Demo 5/14/2020

Visit the vocabulary page for this lesson by clicking here: SCAD Teaching Demo – Vocabulary