What Image File Type Do I Need For My Project?

by Kelly Thake on 19th April 2022

There are so many different file extensions available when working with graphics, whether that’s logos, icons or images. We’ve written a guide to help break them down and explain which is best for which purpose.

The first thing to understand is the difference between vector and raster. Most image types (JPEG, PNG, GIF) are raster images. This means that they are made up of lots of pixels that form an image and can become pixelated when scaled up. Vector image files (EPS, AI, PDF) work very differently. Instead of pixels, these images work by using proportional formulas, meaning that they can scale up to any size without pixelating. You can read more about this here in our earlier blog “What is a vector file?



JPEG (Joint Photographic Experts Group) is probably the most common image type. JPEGs have what’s called “lossy” compression – Which means that the quality of the image decreases as the file size decreases. This is great for ensuring images are a small file size for use on the web, but requires that the images are saved with the right quality settings according to their purpose. You couldn’t blow up the JPEG logo from your website to print on a T-Shirt for example, because it would be really pixelated. JPEGs are a bit of an all-rounder as they can be saved as a CMYK or RGB files – Meaning they can be suitable for digital or print use (you can learn more about the different colour profiles in our earlier blog).

Fun fact before we move on to the next image type; there is no difference between .jpeg and .jpg files. The ‘e’ was dropped due to the three-character limit in earlier versions of Windows. That requirement no longer exists today, but both .jpeg and .jpg are still in common use, either is valid and perform the same function.



PNG (Portable Network Graphics) files are always RGB which means they’re perfect for web and digital use but not the right file type for print. The biggest difference between JPEGs and PNGs is that while JPEGs always have a solid white background in empty space, PNGs can be saved with a transparent background. This is really useful for images that are going on a solid background colour. For example, a white version of a logo on a black navigation bar on a website, will near enough always be a PNG.



GIF (Graphics Interchange Format) files can be static or animated but are most popular in their animated form. As animation can only be viewed digitally, GIF files are always RGB. Animated GIFs are essentially several image frames joined together really quickly to make it look as though it’s moving. As they are short, snappy files with limited image data, they tend to be a small file size which makes them perfect for loading quickly on a website as opposed to embedding a large video file (such as an mp4) for a short clip.



WebP is a modern image format that was designed by Google with superior compression in mind which makes it ideal for images on the web. Support for the file type can be found across all major modern browsers which makes it an ideal format to replace your current jpg and png images on your website. These images tend to be automatically created from their JPEG and PNG equivalents, rather than being saved in this format in the first place.



AVIF is a relatively new image format that was initially released in 2019 and is designed to reduce image file sizes without sacrificing image quality. AVIF can produce the same quality image at half the size of a regular jpg. This makes it ideal for use on the web however browser support can still be patchy with Apple’s Safari and Microsoft’s Edge lacking support. It is open source and royalty free which makes it easy for people to adopt and use in their own projects. This will be one to keep your eye on in the future as support for this format increases. Learn more about AVIF.



AI (Adobe Illustrator) files are created in… you guessed it… Adobe Illustrator. This means that they’re probably a designer’s favourite file type, because we can go straight in and edit them as required. We can also save them out as any other required file type from there as Adobe Illustrator files are in their raw vector format so we can scale them up/down as required without any loss in quality.



EPS (Encapsulated Postscript) files are a close second for a designer’s favourite file type as they are also vector files that we can easily edit. As a more universal file type, they can be opened in Adobe Illustrator, but also in most design editors, not just the common Adobe products. Due to this, EPS files are the best file type to send to printers when sending high-resolution graphics for print.



SVG (Scalable Vector Graphic) files, as per their name, are vector files like AI and EPS files. But the big difference is that they’re web-friendly. If you’re not sure if your JPEG or PNG is a large enough file size for where it’s being used on your website, it’s safer to use an SVG as this will scale up or down accordingly without losing quality and also have the benefit of the final file size being smaller.



PDF (Portable Document Format) files are most commonly used for text documents but can also be used for graphics. They were invented by Adobe with the intention of creating a universal file type that can be exported from almost any application for easy review without specialist software. For example, we can save a vector logo that we create in Adobe Illustrator in PDF format – This means that others can view it without any access to Adobe Illustrator.



PSD (Photoshop Document) files are, as the name suggests, documents that have been created in Adobe Photoshop. Photoshop files contain “layers” that make image modification much easier. But they work in raster format rather than vector, so are not the best file type beyond the editing of raw images. However, from Photoshop you can export the file as other raster image types such as JPEG and PNG.



TIFF (Tagged Image File) files can also be opened in Photoshop and store a lot of image data. TIFF files use “lossless compression” which means that the original image data is retained, no matter how many times the image has been copied, re-saved, or compressed. However, this does mean that their file sizes are huge. So again, like Photoshop, these aren’t the best file types beyond the image modification stage.



INDD (Adobe InDesign Document) files are created in Adobe InDesign and can combine Adobe Illustrator and Adobe Photoshop files in one place. These files tend to be used for the final design output – For example a brochure that makes use of photos edited in Adobe Photoshop and icons created in Adobe Illustrator. As Adobe InDesign documents tend to combine lots of different elements, you will often hear designers asking for the “packaged version of your files”. This is a folder that you can create from InDesign that puts all of the various file links in one place. This means that when you pass this folder on, everyone can access and edit anything that they need to within the document.



Last but not least, RAW image files are the direct result when you take a photo on a camera. There are several different file extensions for RAW images as each brand of camera manufacturer has created its own. CR2 and CRW are Canon extensions, NEF is a Nikon extension and PEF is a Pentax extension. Most people don’t come into contact with these image types, as they tend to be produced by professional cameras, and photographers complete post-production and export them as more common image types before passing them on to the end-user. RAW images are useful for photographers as they capture every detail in a photo without loosing any image information during processing. This makes them perfect for image post-production. But the amount of information they store means they have huge file sizes and they don’t offer much use beyond post-production.

We hope this helps to explain the different file types and what each one is useful for. If you need help with your creative outputs, be that design & photography or video, get in touch at hello@capsulemarketing.co.uk.

Related Posts