What’s the word, nerds? This week, we thought we’d tackle a subject that’s important to us. Image Types. Now, we’ll be clear. This post isn’t going to change the world, but maybe it will help a few of you use images in the way they were intended. Not clear on our meaning? Let us explain.
Have you ever seen a picture whether it’s on a website, a presentation, or even an invitation that’s distorted? By distorted we mean grainy, blurry, and essentially poor quality. Maybe the image has been resized so that it’s narrower than normal or it’s been stretched too wide and the clarity has faded. That’s distortion and it occurs all the time.
Before we talk about how this happens, it’s important to understand there are different kinds of images.
Raster Images
Raster images are how we, in the design world, refer to a photo. That picture you took last month on your camera of the Monkey Sock Party? A raster image. Your treasured photo of Aunt Mildred’s 90th Open Mic Night? A raster image.
Raster images are constructed with tiny squares called pixels. Not sure what these tiny squares look like? Take a look at our featured images for today. The background contains oversized pixels. If you enlarge any photograph you’ve taken by zooming in, you’ll spot them.
Every image has a set about of pixels allotted to it, you can easily identify the pixels in an image by looking at its size. For example, let’s say we take a pic on our camera. When we look at the photo properties, the size of the image is 3264px X 2448px. This tells us how many pixels are in the image—in other words, the resolution.
You can decrease an image’s size below the original resolution. You can’t, however, resize it above those dimensions. Why? Because there are so many pixels allotted to an image. If you resize an image beyond its original resolution, you’ll create gaps between the pixels and cause the image to distort. They are resolution dependent. They only display correctly if shown in continuous order, with no gaps, to a maximum specific resolution.
Vector Images
Vector images are resolution independent images. They are basically calculated from a mathematical equation. Sounds crazy, right? It’s true. Vectors are created from a series of lines and curves known as paths. These lines and curves converge to create an object. This means, that unlike raster images, vectors can be resized to any size necessary. I can make it a small or as large as I want without distorting it because it’s not dependent on pixels for display.
Unlike Rasters, which are photographs, Vectors are typically artwork. Remember those lines and we mentioned? They’re basically redrawn or recalculated every time a vector image is resized. That doesn’t work well with images and their set pixel requirements. Images can be taken, however, and, in many cases, traced to create a vector version of the original.
[wpfilebase tag=file id=40 /]
Raster vs. Vector
That’s the skinny on these two versions. Raster images typically have the file formats .jpg, jpeg, png, and bmp. There are others, but those are the ones you’re most likely to come across. The most common Vector extensions are .svg, .pdf, .ai, and .eps.
Check out our vid below for a short demo on each!
Recent Comments