file format

Raster vs. Vector Graphics

Raster Graphics

Raster graphics are rendered as bitmaps, which are grids of hundreds of tiny pixels that collectively form an image. They display rich color detail and will be your best choice when working with photographs.

Raster graphics cannot be enlarged without losing quality and appearing blurry. This is because each is defined and displayed at a specific resolution, or DPI (you can learn more about this on our blog post here).

You can use Adobe Photoshop to create and edit raster files, which will typically have the extensions .jpeg, .psd, .png, .tiff, .bmp, or .gif.

Vector Graphics

Vector graphics are made up of geometric shapes such as points, lines, and curves. Mathematical formulas are used to fill in color along these paths. They’re best used for fonts and logo designs.

Because they’re not dependent on resolution, vector graphics can be scaled up or down without losing quality. They’ll also create smaller file sizes. Some possible downsides are that they display limited color details and cannot handle effects such as blurring, drop shadows, etc.

Vector graphics are created and edited in Adobe Photoshop and will produce files with the extensions .eps, .ai, and .pdf.

to summarize ...

Raster

Good for: photographs
Software: Adobe Photoshop
Files: .jpeg, .psd, .png, .tiff, .bmp, .gif
Pros: rich color detail
Cons: blurry when enlarged; large file sizes

Vector

Good for: fonts, logos
Software: Adobe Illustrator
Files: .eps, .ai, .pdf
Pros: can be scaled up or down without losing quality; smaller file sizes; editable
Cons: limited color detail; limited effects

What File Format Should You Use?

Ever wondered what’s the best file format to use when saving an image? The answer will be different depending on what your image is used for. Before we explain some common file types, here are some general file types and terms:

  • If the images are for the web, you’ll typically want to use JPEG, PNG, or GIF.
  • TIFF files create high-quality images that can be used for print.
  • If you want to keep an editable version, use your software’s native format — .psd for Photoshop, .ai for Illustrator, etc. It’s helpful to have this to send to your designer or printer.

COMPRESSION: Lossless compression does not lose visual information. The quality of the image will remain the same no matter how many times the file is decompressed and recompressed. 

Lossy compression loses visual information. The quality is reduced every time a file is decompressed and recompressed. The advantage of lossy compression techniques is that files can be made much smaller, which his helpful for sending files via email or posting them online.

File Types

JPEG — .jpg

JPEG may be the most commonly used and widely accepted image format, and it’s considered the standard for posting images online. It uses a lossy compression technique, resulting in small file sizes and fast load times. These files offer a good middle ground between quality and size.

GIF — .gif

GIF is another popular format used on the web. It uses lossless compression, and creates relatively small file sizes. However, it uses the 8-bit palette with only 256 colors (making JPEG the more popular choice). Unlike JPEGs, GIFs can use animation effects and support transparency.

PNG — .png

PNG was designed specifically for the web, and was intended as a replacement for the GIF. It uses a lossless compression technique, and saves color more efficiently than GIFs. While PNGs create larger file sizes than JPEGs, they support transparent (unlike GIFs). Because it uses RGB color rather than CMYK, it’s not the best choice for print.

TIFF — .tif

TIFF is a popular file type used in photo and page layout softwares (such as Photoshop, InDesign, and Quark). It creates very large file sizes and contains a lot of image data, with flexible color support for grayscale, CMYK, and RGB. It can be either lossless or lossy compression.

PDF

PDF is a universal file format developed by Adobe that can be opened by anyone with the free Adobe Reader software. PDFs can be saved as editable files, and they preserve all the fonts, layout, and both vector (lossless) and bitmap (lossy) graphics. They’re great for both digital and print. While the images aren’t embedded directly on websites, they can be offered as downloadable files.

Adobe Photoshop and Illustrator files – .PSD, .AI

A PSD is the native file format of Adobe Photoshop, and an AI file is the native format of Adobe Illustrator. They’re what you’ll use any time you’re working on an ongoing project in either program, and you should use these formats if you want to keep editable file versions. They use lossless compression.