Raster vs vector

1. Raster vs vector Instructor: Bill Sweeney

2. Overview • A raster graphic is an image made of thousands or millions of tiny squares of color information, referred to as pixels. • Pixels refer to the color squares viewed on an electronic monitor, these squares are the computer equivalent of the dots of ink on a printed piece. • The most common type of raster graphic? • A photograph. The designer’s preferred program for creating and editing these raster files is Adobe Photoshop. • Popular raster file format extensions include: jpg/jpeg, psd, png, tiff, bmp and gif.

3. The pros of raster graphics • What does the term “dpi” stands for? It means “dots per inch”, the measurement of color detail information contained within a raster image. • Say you’ve got a 1” x 1” square image, at 300 dpi that’s 300 individual squares of color vertically and horizontally that provide the shading and detail in the image. • The more dpi your image contains, the more subtle the image details is going to be. • Precise Editing: All of the individual pixels of color information can be modified, one by one.

4. Cons of Raster images • Blurry When Enlarged: The biggest downfall to raster images is that they become pixelated (grainy) when they are overly enlarged. • Why is this? There is a finite number of pixels in all raster images at any given size. • When you enlarge a photo, the computer must guess as to what colors should fill in the space. This form of interpolation will cause the image to appear blurry, the computer has no way of knowing the exact shade of colors that should be inserted. • Large File Size: An image at 300 dpi will have 300 individual points of color information per inch for the computer to display?

5. Raster vs vector • Both raster and vector graphics are exported in one of the aforementioned file formats for usage in a production environment. • For the web PNG and JPEG are predominantly used. • For print you primarily use PDF, EPS, or TIFF. • And the correct image file format, size and resolution is essential in order to obtain the correct final result.

6. Images size vs Resolution • If you hang around a graphic designer you are bound to hear terms such as image size, dpi, ppi, megapixels, jpeg, tiff and image resolution. • When we talk about image resolution you need to know there are two separate resolution factors to consider. • Those two resolution factors are image size and image resolution.

7. Dpi, pixels and ppi PIXELS: • The pixel is the smallest measurement of a digital image. • Each pixel contains information that helps to reconstruct the digital image. • The greater number of pixels that get used – the more clarity the picture will have.

8. Dpi, pixels and ppi PPI: • This stands for “pixels per inch” and generally coincides with dpi (dots per inch). • While this doesn’t signify the number of dots in printing it does signify the number of photo information elements “squares” used in a print or display.

9. Dpi, pixels and ppi DPI: • DPI – This stands for “dots per inch” or how detailed your picture will be. • If your print starts at 600 dpi you will have a very clear print, with a large number of pixel elements and a BIG file. • By reducing the dpi to 300 you still produce a clear print but with roughly half the number of pixel elements. • If you reduce the dpi to 150, 100 or even 90, you will add to the overall loss in quality and limit the ability to print to high end output printers. • A resolution of 72 dpi is found in most online photos and makes them nearly impossible to use for any print application.

10. Image resolution / print quality • The lower the image resolution, the less pixel information is saved about that image. • A 72 dpi image as normally fine for the internet, it has enough information to display a good quality image on your computer screen but far too little to produce a good quality print. • To produce a printed image we use a minimum print resolution of 200 to 300 dpi or ppi.

11. Common image file formats • Once an image has been prepared, it can be saved in various formats. • Some are as follows: • JPEG (.jpg): This file format is a very common photo image format. • You can shrink the size and crop the photo to meet your demands. However, because it compresses the photo, you also lose information that will make the jpg file blurrier and it may eve become pixilated.

12. Common image file formats • Tiff (.tiff) – This is a lossless file format used in print. • What that means is, you can do virtually everything you do to a jpg as far as editing, but it does not lose information the same way as the jpg will. • The resulting file size is much larger which makes tiff files impossible to display online. • Tiff files are exclusively for print.

13. Common image file formats • PDF (.pdf) – The “portable document file format” (developed by Adobe) can be used to save an image or a project. • Some users save a photo layout with text using programs that can export the final completed document to a pdf file for print or to display on screen. • PDF image files are more complex and may not always produce good quality results if the settings are incorrect.

14. Common image file formats • PNG (.png) – The PNG is a raster graphics file format that supports lossless data compression. • PNG was created as an improved, non-patented replacement for Graphics Interchange Format (GIF), and is the most used lossless image compression format on the Internet. • Png also supports background transparence that jpg does not.

15. Common image file formats • SVG (.svg) – The SVG is an HTML based graphics file format that supports resolution independence. • SVG was created as an improved, scalable solution for display on websites with flexible layouts.