Our resident blogging queen Anna Robertson recently posted a great blog about the differences between image types and how to save for the web (here). In that post it made reference to terms such as raster and vector, in the spirit of keeping post under control, we can’t write novels, so for this blog I am going to lay out the differences in those terms.
==============================================================
Raster: are Pixel-based images and graphics that will lose quality as scaled up.
==============================================================
JPEG, PNGs and GIFs are the main raster-based file types and generally what you will find as graphical elements on the web. Each of these files are comprised of small colored dots when put together will make an image. You can make raster images larger by using photo manipulation software like Photoshop, but in the end there is little you can do to enlarge them without degrading quality. Pixels can not be created (without great manual lengths of reconstruction) if you resize a photo from small to large the software is simply faking those pixels into place based on the surrounding pixel information. Just like the old days, as you made copies of copies of a cassette tape or VHS, that same basic principle can be applied to resizing raster images. By resampling the image too much it starts to create halos around contrasting elements limiting your ablity to go any larger.
Above you can see the degradation you could expect from zooming in or blowing up a raster image to larger than its original size.
Above is zoomed in much more, showing how that picture is made up of the dots or pixels. As the size goes up the larger those pixel become, making it look worse and worse. This can be avoided somewhat by controlling the distance someone can view the image at. But when you’re saving for the web people are inches away from the image, not feet or miles. So, quality play a huge role into it.
==============================================================
Vector: are mathematical relationships to individual points in a path that can scale to
any size without loss of quality.
==============================================================
AI, EPS, are all generally vectored artwork but can contain raster elements, so beware. While raster images cannot be scaled without losing quality, vector art have the unique ability to look nice and clean on a business card or up close on a billboard. I would recommend vector for ALL graphics that do not include a photo. Using photoshop to create a logo or text graphic with or without text will ultimately box you into a corner and as your large scale needs increase you’ll find yourself either
1. redoing your logo or design (which could hurt your brand recognition) or…
2. living with a poor-looking graphic that reflects badly on the company.
Above, I’ve taken the exact same image and instead of zooming or blowing up using photoshop I used Adobe Illustrator and scaled it. This kept all the quality and didn’t create any pixelation. However, as I write this I want to remind you that the image you see had to be saved as a rasterized PNG to display in this post so there is some pixelation between that converstion and the difference between the screen and what is truly there.
Like above with the raster examples I continued to scale it up even more. This really show the difference, and this could be scaled infinitely and still look just as clean.
==============================================================
Summary
==============================================================
- Raster = Images (difficult to scale)
- Vector = text, graphics, text (scale to any size without losing quality)
- Use vector-based files for all graphics and text
- Use Photoshop for just that: photos! Then import into a vector program to manipulate the vector elements. Photoshop is not a design program but a tool to assist in the design process.
- Comment below to ask me questions, as all I do is work in these programs.
