Every graphic we see online or in print is an image at the end of the day. In this article we will cover the common graphic file formats that a designer should know in order to create the graphics and to deliver them appropriately as per the required use case. Knowing the different graphic file formats will also help when working with cross functional teams like printers or when handing over graphics to fellow designers as part of the workflow when working on a project as a team.
Based on whether the graphic is being created for print or digital use the document colour mode should be set to CMYK or RGB respectively. If you are interested in knowing more about the CMYK and RGB colour modes you can check out the blog post on colour theory by clicking here.
While all graphics at the end are handed over as an image, there are two types of graphics namely raster and vector.
In short raster graphics are pixel based and resolution dependent. Vector graphics are derived from mathematical vector relationships and are resolution independent.
Raster images are made up of pixels to form an image. Pixels have a defined proportion based on their resolution, and when the pixels are stretched to fill space they are not intended to fill, they produce distorted and blurry images. In order to retain pixel quality, it is suggested not to resize raster images and to save the raster files at the exact dimensions as required by the use case.
Vector images are more flexible when compared to raster images. Given they are formed using mathematical relationships they can be resized as small or as large as per the requirement without loss in quality.
In the following sections we will cover the file formats that fall under raster and vector graphic images and file formats used to create these graphic images.
Joint Photographic Experts Group is one of the most widely used graphic file formats online. JPEG images have a sliding scale of compression that decreases file size tremendously, but it comes at the cost of increased pixelation and loss of information. They also pixelate when scaled small or large from their original size. JPEGs do not have a transparency channel and always have a solid colour background. There is no difference between the .jpg and .jpeg filename extensions. Both extensions represent the same file format and will behave the same way.
Graphics Interchange Format is also a widely used online image format, commonly found in web animation like banner ads, website illustrations, email infographics and social media memes and stickers. They are animated images with a small file size as the compression techniques in the GIF format allow image files to shrink tremendously and they have a limit of 256 colours. GIF images have an alpha channel that can be transparent, so you can place your image on any coloured background.
Portable Network Graphics are optimised for online screens and are a web standard. They have built-in transparency, and can display higher colour depths, which translates into millions of colours producing a much sharper and clearer web-quality image. This leads to a slightly larger file size when compared to JPG. While designing your website or when using the image on the web you can opt for JPG over PNG in cases where a transparent image is not required considering the load time.
Tagged Image File Format is a file format that is of superior quality. When we scan a document or take a photo with a professional digital camera we will come across TIFF files. While many web browsers support it, TIFF files are optimised for print. Given there is no loss in quality how much you compress the file you end up having a large file size. Hence avoid using TIFFs on the web as you’ll end up with long load times.
A raw image format contains the unprocessed data captured by a digital camera or scanner’s sensor. The unprocessed and processed data are stored in two separate files, so you’re left with the highest quality image possible that you can edit non-destructively with a photo editing application like Photoshop and in turn convert to a suitable file format.
Bitmap is another type of raster file mostly found on Windows operating systems. They aren’t as common as they used to be. A reason for not being used regularly nowadays is their large file size.
Photoshop Document are the original design files created in Photoshop that are fully editable with multiple layers and image adjustments. PSDs are primarily used to create and edit raster images, but this format also accommodates vector layers, making it a go to choice for various design and illustration projects as it combines the best of both worlds. A PSD can be exported into any of the graphic file formats discussed in this article.
Portable Document Format was developed by Adobe as a device, operating system and web browser independent tool for documents. At its core, PDF files have a powerful vector graphics foundation, but can also display everything from raster graphics to form fields to spreadsheets. PDF files are the file format requested by printers.
Interactive PDFs lets you input information and this has taken the use case of PDFs from a format that lets you to only view the design to a format that lets you view and get information through your design.
Encapsulated PostScript is primarily a vector format that includes both vector and raster graphics data. However it is primarily used for vector graphics and for printing purposes. EPS files can be opened in any design editor and not just Adobe creative cloud apps.
Scalable Vector Graphics is a vector based file used to display graphics online. It can be searched, indexed, scaled and compressed and still result in smaller file sizes than other file formats, making it ideal for web. SVG files can be edited in graphic editing programs as well as text editors.
Adobe Illustrator files are primarily a vector based file format composed of paths connected by points to create graphics. They can also handle raster images and can be exported to any of the graphic file formats mentioned in the article. Their ability to edit typography along with handling vector graphics makes them an ideal choice for designers especially for visual identity designers.
InDesign Document refers to an Indesign file which is the primary choice for publication design both print and digital publication. Visual elements created in other Adobe applications like photoshop and illustrator can be seamlessly integrated within an Indesign file to create complex layouts combining imagery and typography.
Adobe Photoshop Brushes file lets you add brushes to Photoshop. Each abr file will consist of a collection of brushes that can be accessed using the Photoshop Brush tool.
I hope this guide has been of value to you in better understanding the standard graphic file formats used by designers on a regular basis. Thank you and have a great day.
