Subscribe to receive my FREE email course to help you improve your blog design and grow your audience with actionable exercises that do not require a designer or developer!
File formats (or file types) is the specific structure or arrangement of data code stored in a computer file; they instruct the computer how to display, print, process, and save data. Understanding what file format to use and when ensures that your website graphics are bright, crisp, and load quickly.
What are the different file formats?
There are hundreds of different file formats, but the eight most common extensions used with images include the following:
- Joint Photographic Experts Group – JPG (or JPEG),
- Portable Network Graphics – PNG,
- Graphics Interchange Format – GIF,
- Adobe Photoshop Program File – PSD,
- Encapsulated Postscript File – EPS,
- Portable Document Format – PDF,
- Tagged Image File – TIFF, and
- Adobe Illustrator Program File – AI.
How do you know what file format an image uses?
When you save a file on your computer, you will see an extension at the end of the document name, such as .jpg, .png, or .pdf. When your designer releases final logos to you, they should give you a combination of raster and vector file formats.
What is the difference between raster and vector?
Raster vector graphics are composed of pixels, while vector graphics are composed of paths. A raster image, such as a .jpg file format, is an array of pixels that form an image. Meanwhile, a vector graphic, such as a .eps file format, is composed of paths and lines. Raster file formats are ideal for the pictures you use in your blog posts; vector file formats are perfect for your logo and print collateral.
What are raster file types?
Raster file formats are the most common type of image files. Comprised of a grid of pixels, each pixel represents an individual color within the image. Common raster graphics include web and digital photographs. For bloggers, JPGs are the most common type of raster file formats used.
Raster files can easily lose quality, so you typically find these files in their final versions. They are not scalable. If you enlarge the graphic, the image quality will suffer.
Common raster file formats include the following:
- Joint Photographic Experts Group (JPG) often referred to as the default “file type.” It’s used best for high-quality photography (low file size) and low-resolution images. Use this file format for your blog photographs. It doesn’t support transparency, i.e., no transparent backgrounds.
- Portable Network Graphics (PNG) best used for high-quality text and graphics. PNGs have a high image size, so they will take longer to load on your website. PNGs can have transparent backgrounds.
- Graphics Interchange Format (GIF) used solely online (doesn’t translate to print). GIFs can be animated, but can only support 256 colors (lower file size and quality).
- Adobe Photoshop (PSD) is the file generated from Photoshop. It’s used for creating graphics and editing photos. You would never upload a .psd photo to the web.
What are vector file types?
Vector file formats are made up of paths rather than pixels. The paths can represent lines and shapes within the image, and most vector images can include colors, gradients, and image effects. Since vector images store data in paths, they are scalable without losing quality. Vector file types are ideal for logos and print pieces.
Common vector file types include the following:
- Encapsulated PostScript File (EPS) use for files that need to be resized, i.e., logos. EPS files scale to any size without losing quality and support transparency. They work best for large format printing.
- Portable Document Format (PDF) used for sharing documents without losing the design quality. They are generally used for sharing and can be compressed if necessary. If you are making a content upgrade or e-book, you can do these in Adobe In-Design, Microsoft Word, or Apple Pages, and export the file as a PDF. PDFs work best as downloadable files.
- Tagged Image File Format (TIFF) is print-ready file formats. Unfortunately, they have a huge file size to be used for web, but quality remains consistent regardless of size.
- Adobe Illustrator (AI) is the file generated from Illustrator. Illustrator files scale, so they ensure the best print quality. I use Illustrator files for logos, patterns, icons, and stationery.
What are Next-Gen Formats?
If you have run a recent Google Pagespeed test, you will see that one of the recommendations is to use Next-Gen formats to serve images. This new format (JPEG 2000, JPEG XR, and WebP) are additional image formats with superior compression and quality characteristics compared to older JPEGs and PNGs. Using these formats ensures that your image files will load faster and consume less cellular data, which is particularly vital if most of your readers are on mobile devices.
Unfortunately, not all browsers support Next-Gen image formats. It’s still in very early development. Even if you are getting this recommendation from Google Pagespeed, it’s likely something that you don’t want to apply to your site yet.
Other Image Saving Tips
Saving images in the correct format is the first step to optimizing them for your website, you also want to consider best practices for speed and search engine optimization. You can optimize your images easily by using either Lightroom or Photoshop properly.