Image types: Vectors vs Rasters

 

Vectors?? Rasters??? 

What kind of image do I need and what the heck is the difference?

Let’s try to simplify it. 

Vectors: 

An image or graphic file created in software that uses paths - these graphics can can be resized freely without losing quality. 

This type of file is created with a drawing program using connected points and lines based in math and coordinates. This type of file can be resized on the fly on a computer that can open the art file. If you enlarge a vector file you get the same sharp crisp image in a larger size because the math used to create those paths calculates the enlargement.

Vector files are created in programs like Adobe Illustrator – specially created to render vector illustrations and graphics.

Vector File Types: .ai (Native Adobe Illustrator files), and .eps (Encapsulated Postscript), some .pdf files, .dxf (AutoCAD file)

Why use them: A vector file allows a designer to scale a graphic (such as your logo) to any size without losing quality. This is how your logo can look sharp on your business card and also on your sign out front.

When will your designer create and/ or need them:

When designing a logo*. When creating artwork for signage. When creating artwork such as illustration that needs to be scaled to variety of sizes. 3D renderings. Packaging Mockups. And many other uses.

Rasters:

An image or graphic that is made out of pixels (tiny squares of color) in various colors to create a continuous tone image – like a photograph.

This type of image is created in a specific size and can not be enlarged without losing image quality.  If you enlarge a raster based image – you are enlarging the pixels at the same time... This is why photos get “fuzzier” the bigger you try to enlarge them.

Raster files are created in programs like Adobe Photoshop and photos taken with your camera or phone are also raster files.

Raster File Types: .psd (Native Adobe Photoshop files), .jpg, .gif, .png, .tiff etc.

Why use them: Because you  want a beautiful continuous tone image - such as a beautiful photograph.

When will your designer create and/ or need them: Files out of a camera are raster images. Photoshop rendered art are raster images (usually). Anytime you need to touch up a photograph, create photos for magazines, ads, websites - all will be raster based images.

SIDE NOTE:  Despite having a “Save As” feature in many desktop publishing programs, you can not directly convert a raster to a vector simply by saving a file in a different file format. Saving a .png to an eps file format does not “convert” it into a scalable image. There are ways to do so, but there is a process, and you really need a vector based drawing program to do it properly.  

Examples:  

Because you are viewing this on the internet, these are all .png files – however they have each been rendered differently.

Some have been rendered and enlarged using the original vector file. The others were enlarged from the .png (a raster file)

Original image created as an Illustrator file and saved as a png in this exact size.

 Resized using the original VECTOR file.  (No loss of quality)

Resized using the RASTER file.  (fuzzy)

Resized using the RASTER file.  (fuzzy)

 Resized using the original VECTOR file.  (No loss of quality)

See why having a graphic as a vector makes sense? 

 --------------------

* If you are working with a designer that insists on using photoshop to create your logo, this is a red flag that you are working with an inexperienced designer who may not understand the need to create a fully scaleable file. Ask MANY questions before you engage in a project that means so much to your business.