Photo credit:
Photo by DESIGNECOLOGIST on Unsplash
One of the first things a business owner needs to know to present their brand in the best light possible is the difference between image file types. It might seem frivolous, but in reality, knowing the difference between vector, .jpg files, .svg files, .png files and more can not only ensure your business assets (such as your logo!) are presented in its highest quality, but it can also make working with printers, product designers, and graphics much easier.
The first thing to highlight is the difference between vector files and raster files.
Vector vs. Raster
These are the two main image types - the .jpg and other file extensions will usually be categorized into one of these main two.
Vector images allow the greatest versatility in terms of image scaling (growing or shrinking an image, such as on a website) and thus, using vector images in different mediums such as through print and digital won’t affect the quality of the image. This is because vector images are created through the computer using mathematical formulas, so in a sense it will be “generated” exactly as it’s supposed to appear in any size.
Useful for: Source files, such as for your logo, brand assets, icons, etc.
File extensions: .ai, .eps, .pdf, .svg
Note: You can create any of the above file types through Adobe Illustrator, but .pdf doesn’t always mean a source file is actually vector. Our recommended format to save any vector files in is .ai, .eps, or .svg.
If saved correctly, files in this format can be converted into any other format you need, but the same can’t be said for raster images.
Raster images use pixels (tiny boxes on your computer screen) to “build” a complete image. When you zoom in on a pixel image, you can even see the boxes. This is how some artists create pixel art, as shown below.
Useful for: Working files, images, one-time use graphics
File extensions: .jpg, .jpeg, .png, .gif
Because raster images are made through these “building blocks,” resizing them will change their resolution. For example, if you take a raster image (such as a .jpeg, .png, or .gif) and stretch it beyond its original size, the image will distort and appear “blurry.” To make matters worse, it will remain distorted even if you shrink it back to its original size or smaller. The more you resize a raster image, the more you process the image and thus decrease its visual quality without being able to restore it. See the below for an example.
In addition, different monitors display different resolutions. So this is yet another factor that may affect how your raster images are viewed on different displays. The best way to ensure consistent high quality resolution across different mediums and displays is with vector graphics.
File Type Cheatsheet:
Here’s a useful table below of the best uses for each file extension.
Raster File Types (Pixel) | Best For. . . | Best Program(s) |
JPEG (.jpg, .jpeg) | Photographs, Images of things in reality (i.e. not clipart) | Adobe Photoshop is optimized to export .jpgs in different resolutions |
PNG (.png) | Graphics and transparent images (images without a background) - JPEGs cannot be transparent. (such as an image version of your transparent logo) | Adobe Photoshop, Adobe Illustrator |
GIF (.gif) | Moving images or small “clips” with no sound. Use only with a simple image because the more colors involved, the higher the file size. | Adobe Photoshop, Adobe Premiere Pro |
Vector File Types | Best For. . . | Best Programs(s) |
AI (.ai) | Logo files, source design files of any type. Note: Can only be used with Adobe Illustrator | Adobe Illustrator (this is the native file type for this program) |
SVG (.svg) | Same as above, especially for website assets. Recommended as next best after .ai for modern or web uses. | Adobe Illustrator |
EPS (.eps) | Same as above, but is dying off and reserved for old vector graphics; it is considered a legacy file format for print workflow. | Adobe Illustrator |
Conclusion
After learning the differences in file types, are you able to locate the important files for your business? If you’ve found that you don’t have a vector file format for your logo, we can actually rebuild your logo in vector format.
If you have a larger project or have any questions, feel free to reach out to us at sarah@cloud6studios.com !
Opmerkingen