Top 11 Image Files Extensions and Where to Use Them

There are many different types of image file extensions, and each one is optimized for a certain use, whether that be digitally through a screen or printed through a t-shirt. So if you’re feeling lost when it comes to choosing between a JPG or a PNG, don’t worry because file extensions can feel a little overwhelming. To help you out, we’ve created this article where we’re going to talk about different image formats and show you their appropriate use. Let’s start by categorizing them:

Raster Images:

  • JPG
  • PNG
  • GIF
  • TIFF
  • RAW
  • PSD

Vector Images:

  • SVG
  • AI
  • EPS
  • PDF
  • INDD

Difference between Raster and Vector Files:

Raster Images vs Vector Images - File Extensions and Color Models

Image 1. Raster Images vs Vector Images & Color Models

When talking about image file extensions, it’s important to start by explaining the two major categories where they generally fit: they can be Raster or Vector Images. But what does this mean?

Raster images are formed by a group of pixels which end up forming an image. They’re resolution dependent, meaning they only look perfect in their original size. If you try to resize them you will end up stretching the pixels, which will result in a distorted image. Every picture you find online is usually in this category, mainly because Raster Images are the most common to use in photography, digital artwork and web graphics.

In this category, images can be in one of the following color models: RGB or CMYK. While this may not seem that important to many, every designer knows that choosing the right color model is crucial to the final format of your project. With that said, if you're designing for the web, RGB is a light-based color model that is optimized for it, while if your project is going to be printed, you should go for CMYK, a four-color printing process that is optimized for physical printing.

On the other hand, we have Vector images. These ones are much more flexible because they’re resolution independent, meaning that when you try to resize them they don’t get any pixelation.They are perfect for creating graphic work such as logos, which should always be created as vectors so they don’t lose any quality and can fit any format. So remember, when buying a logo for your company, always ask for your master files, which should be in AI or even in a EPS format.

_______________

Raster File Extensions:

JPEG or JPG

This format is one of the most used worldwide and stands for Joint Photographic Experts Group. JPGs are very common on the web and are typically used for photos and web images like ad banners. They are known for their type of compression, which decreases the quality of the image when the size of the file also decreases, meaning the pixelation gets bigger when you compress them.

JPG: Non Compressed vs Compressed

Image 2. JPG Image Detail with no Compression vs with High Compression via Unsplash

Use them when:

  • Your work is going to be printed: Being a high resolution file extension with low compression, JPG is the best format for editing and then printing.
  • You want to send a preview image to a client: This format can easily be reduced to different sizes, which makes it perfect for emailing.

Don’t use them when:

  • You want a transparent background: JPGs always have a solid color background;
  • You need an editable layered image: This file extension is saved into a one image layer that cannot be undone.

PNG

This image file extension is quickly becoming one of the most searched on the Internet, being known for its high quality color depths and transparencies. It’s especially used online for interactive documents like web pages.

Logobot logo

Image 3. LogoBot Logo in a PNG Format

Use them when:

  • You want transparent web graphics: PNGs have a ton of transparency degrees which makes them more suitable for web content;
  • You want small files: This format can be resized very easily without compromising its quality, especially if it has simple shapes and colors.
  • You want to illustrate with a small number of colors: Although any format will be up to this job, PNG is definitely the most suitable for small color palettes.

Don’t use them when:

  • You want to print your image: This format is especially optimized for the screen, which makes it unsuitable for printing.
  • You’re working with Photography: Thanks to its lossless web format, PNGs tend to get very large, so if you’re dealing with photo content for the web, you should go for a JPG.

GIF

GIFs are most common to see in their animated form through banner ads or even social media memes. They can be exported in many different settings that reduce image information drastically, which ends up reducing the file size.

GIF - Get us out of 2020

Image 4. GIF via Giphy

Use them when:

  • You want a smaller file: GIFs can be tremendously small due to their compression techniques. So, for very basic web graphics this format is the best;
  • You want to design a web animation: This format keeps all the frames in one single file, which is great for short animations.

Don’t use them when:

  • You want high-quality photography: GIFs have a limit of 256 colors, while photos have thousands of them. If you convert them to this format they are going to look less bold and vibrant;
  • You want to print your work: Due to its lack of color diversity, GIFs will most likely look dull when printed.

TIFF

This is a very large file format that is mostly used in photography and desktop publishing. Although TIFFs are also used as JPG “containers”, you are most likely to find them when using a professional digital camera.

TIFF Image

Image 5. TIFF Image via FileSamples

Use them when:

  • You want a high-quality scan: Using this file extension when scanning will ensure you the best high-resolution file to work with;
  • You need high-quality printed graphics: TIFF is one of the most high-quality graphic formats available, especially in printed large sizes.

Don’t use them when:

  • You’re creating content for the web: Although it is supported by many browsers, this file extension is optimized for printed projects, which makes it less suitable for online content.

RAW

RAW it’s usually the first format of a picture when you snap it, being able to capture all the elements of a photo without losing its details. When it’s time to transfer the images of the camera to a new device, they usually stop being RAW files and are converted (or compressed) into another file extension (TIFF or JPG). RAW files can also be edited in applications like Photoshop and Lightroom, and their most common formats are CRW (Canon), NEF (Nikon), and DNG (Adobe).

Editing a RAW in Photoshop

Image 6. Editing RAW File Extension. Raw file via SignatureEdits

Use RAW when:

  • You want to make a photoshoot: Making sure your camera is set to RAW is key for a more detailed photography.

Don’t use when:

  • You want to upload them to the web: RAW files are only for snapping and editing. If you want to build web content you should convert your raw file to a JPG;
  • You want to print your photos: Most printers are not compatible with RAW, so make sure you convert your file to a TIFF or even a JPEG.

PSD

This file extension is essentially a layered image created in Photoshop. It’s mainly used to develop and edit raster files but it can also work with vector images, which makes it a really complete file extension that can suit different types of projects. A PSD file can export different types of image formats, including all the raster images that we talked about above.

PSD File Open

Image 7. Editing a PSD image. PSD File via Mockupworld

Use it when:

  • You want to retouch your photos: If you want to correct your colors and shadows, PSD files are the answer;
  • You want to develop images for the web: When creating social media assets, using Photoshop will guarantee they are optimized for online content;
  • You need to create mockups: Layers make everything easier when it comes to moving elements around;

Don’t use it when:

  • You want to post your photos: Make sure you export your PSD file before posting it online (so your public can see it properly);
  • You need to print your files: PSD is not compatible with many printers, so you should always export your PSD files to a JPEG or a TIFF format.

Vector File Extensions:

SVG

SVG is a file extension developed for two dimensional graphics. It’s ideal for the web because it can easily be resized, being able to support very small sizes. You can use them through graphic editing programs as well as text editors.

SVG File Extension

Image 8. SVG File Extension Example

Use it when:

  • You are designing graphic content: SVG files are perfect for the web;

Don’t use it when:

  • You want to print your project: Being optimized for the screen makes SVG files less suitable for print content.

AI

This format stands for Adobe Illustrator and was built for developing vector graphics. Although it’s main job it’s to work with vector files, AI can also support embedded raster images easily.

Adobe Illustrator File

Image 9. Editing an Illustrator File

Use it when:

  • You need to edit a Vector: this format allows you to work on every tiny element of your design;
  • You want to develop a brand-identity: Every shape created with illustrator can allow you to design your brand logo or icon;
  • You want to create flyers and business cards: You can develop this print pieces easily with AI, even if you want to combine raster elements with vector graphics;
  • You want to transform the typography of your logo: Illustrator’s features allow any text to be manipulated in every imaginable way.

Don’t use it when:

  • You need to edit an image: AI has a limited number of editing tools. If you want to manipulate an image, you should go for a PSD file extension.

EPS

Like AI files, EPS file extensions can combine vector elements with raster images very easily. They are mainly used for vector graphics and they normally include single design elements that can be added to bigger pieces.

EPS

Image 10. EPS File Extension Example via Free Vectors

Use them when:

  • You want to send a logo to a client: With this format you don’t have to worry with the placement of the logo when you send it because it will always appear correctly.

Don’t use it when:

  • You want to edit your photos: Although it supports raster images, EPS is not optimized for photography.

PDF

This format was built to display any graphics correctly, no matter the device or web browser that is used. PDF format is globally known, and it’s usually the file extension requested by printers to print your work. AI and PSD can easily export any design to a PDF extension.

PDF File Extension

Image 10. PDF File Extension Example

Use it when:

  • You are ready to print your design: Most printers prefer PDFs as their primary delivery format.
  • You want to send documents on the web: Using PDF will guarantee your design is easy to view and download.

Don’t use it when:

  • You want to make changes to your design: If you want to edit any of your files, you should go for more suitable formats like AI or PSD.

INDD

This last file format is used for building the layout of printed materials like newspapers, magazines, books and brochures. The name INDD is an acronym for an Indesign document, a software that also allows you to export a document to many formats, including PDF.

Use it when:

  • You want to build a more complex printed material: Because of its easy grids and layouts, INDD files are the most suitable to design magazines and books.

Don’t use it when:

  • You want to build web content: Indesign files are optimized for printing, which makes them unsuitable for the web.

 

Conclusion

Now that we came to an end, we can see that image formats are a lot more tricky than you’d think at first glance. But with this article, you now have the tools for a better understanding of the file extensions that suit your project the most.

If you still need a more detailed guide on Digital and Printed Projects you should definitely read the article “PPI vs DPI: A Guide to Digital and Print”.

Did you like this post? Share with you friends:

Let's create your new logo?

How awesome would be to have a logo designed by a bot? Try for free!