Are you using the right file types for your media content?

With Apps like instagram shifting gears to become more of an entertainment app as opposed to a photo sharing app, everyday users are hence consuming huge amounts of digital media every day. This is not to say that photos are no longer the focus of  instagram (they still play a huge role in instagrams overall algorithm). With that in mind, it is also important to use the right file types for digital media.

Depending on what type of content you are producing you will want to make sure you are using the correct file type for the content you are creating. In this blog post we go over the different design file formats and when to use them.

Types of Design file formats and when to use them

Image color formats

1. Raster based

Programs like Photoshop are raster based programs. What exactly are raster based programs? Raster based programs use graphics that are made out of pixels. These graphics can only be printed at the size that they are created for (or sizes less than), and if you try to print them at a larger size you will degrade the quality of the document and lower the print resolution. If you are getting a logo made make sure that the final result of the logo file you get is not a raster based file, instead make sure the file is a vector based file.

2. Vector based

Vector based graphics are based on math and geometrical formulas. Programs like Illustrator are able to create artwork based on those math/geometrical formulas using points, lines, curves and shapes. You are able to print vector graphics to any size without reducing the quality. When getting a logo made you want the final output file to be in a vector based program (such as a SVG etc.) so that the logo is scalable for web viewing and prints.

Image color formats

1. RGB (for Displays and Visuals)

RGB color formats using Red, Green and Blue channels make up the colour for the image. To define any colour property RGB uses a scale from 0-255 (256 options in total) This scale is also seen as a gradient from Black (with a value of 0) to white (with a value of 255). The midpoint of the scale is 128 (midpoint gray).

There are two different versions of RGB formats, 8 bit (Which contains 16.8 million colours), and 16 bit (281 trillion colours).

2. CMYK (Print)

CMYK color formats use Cyan, Magenta, Yellow and Black. The number that represents the percentage(%) of each of the colours. THe highest value of C, M, Y or K will be 100. In turn CMYK: is white while CMYK: 100. 100. 100. 100. Would be a very saturaturated black.

3. HEX (for on screen, Web Design)

The hexadecimal color format is a derivative representation of RGB with variations that are used in Website Design and Development. This color format is often represented with a six digit combination of numbers, letters that represent RGB colors.

4. JPEG (Joint Photographic Experts Group)

This is the file format that most people are familiar with (though many might not know what the acronyms stand for). You have most likely used this file format to develop pictures and transfer images from your camera or phone.

JPEG files are raster based images that are composed of hundreds of pixels. JPEG images are known as lossy images because when they are taken, they are created to maintain a certain size and all other image information is destroyed (this is why professional photographers shoot in Camera Raw file types). This is why when you take a image and try to blow it up it can be blurry or pixelated.

JPEG images can be used both for print and web. For web images you want to optimize the image for the web with a lower resolution so that the image loads quickly and is not weighed down by the weight of the image (under 500KB (or 72 DPI) is ideal without making the image too blurry and pixelated). Print images require to be high resolution and obtain as much information as possible (300 DPI)

4. TIFF (Tagged Image File)

A Tiff file is a large raster based file that doesn’t lose quality, with all the original data intact ( no matter how many times you save, compress or copy the file). Tiff images are large in size that are used more commonly in commercial photography and large scale advertisements.

5. PNG (Portable Network Graphic)

A Portable Network Graphic (PNG) is a lossless raster based file that gives the file the ability to handle high contrast detail and information. PNG’s are best used for the web and are not ideal for printing. PNG’s allow a transparent background, which makes it the best option for logos over other visuals on the web, as well as other graphics.

6. GIF (Graphics Interchange Format)

A Graphics Interchange Format (GIF) is technically defined as a lossless format that supports static and animated images. Everyone one loves a good GIF as they definitely add to a conversation via texts or social media. 

GIF’s however are heavy in weight (about 2.4 times the weight of a JPEG depending on the quality saved). They should not be used on a website as they can slow down a web page and affect your website’s performance.

7. SVG (Scalable Vector Graphics)

An SVG is a vector based file for two dimensional graphics primarily used for the web and has support for animation.

SVG file types can be created and edited with any Text editor, be searched indexed, scalable, and can be printed at high quality at any resolution without losing out on quality when it is zoomed or resized.

8. PDF (Portable Document Folder)

Developed by Adobe in 1992, PDF’s are files containing a whole range of content like flat text, graphics (structuring elements, interactive elements like annotations, form-fields and layers).

This is the reason why many forms, and documents use PDF’s so they can be easily edited/filled in without changing the document format.

9. AI (Adobe Illustrator)

Adobe Illustrator is a product by Adobe developed in 1985 and is a vector graphics editor design program. Adobe Illustrator is an industry standard tool that many graphic designers use to create logos, typography, illustrations, icons, and drawings.

10. PSD (Photoshop Document)

Adobe Photoshop is another Adobe program (included in their Creative Cloud product lineup). Photoshop  is a raster based graphics editor developed by Adobe in 1988. Photoshop is the creative industry standard in all types of graphic and digital art.

11. INDD (InDesign Document)

InDesign is another Adobe program that is a desktop publishing tool used to make layouts, particularly for printing such as flyers, posters, brochures, magazines, books, ebooks, etc.  It allows for format information, character and paragraph styles, page content and link files with JPEG’s, PNG’s, PSD’s and AI.

11. Camera Raw

Chances are you may incorporate pictures with your graphics. If you’re using a professional camera (like a DSLR or mirrorless camera) you want to make sure you are shooting in Camera Raw. A camera raw file is an image file that is unaltered and has not had any post processing or editing applied. Camera Raw allows more control over processing than raw information that is captured by the camera’s sensor.

When you edit a camera raw file an .XMP file is created that stores the edited information for non destructive editing.

Each camera manufacturer has their own prosperity camera raw file format type:

Adobe also has created a raw file type of their own called Adobe Digital Negative (.DNG) which is an open standard for all camera raw files. These files do not create an .XMP file and store the information in the .DNG file itself.

Need help with the visual and overall branding of your website?
Learn more about our branding services.

Final thoughts

This blog post is a great starting point to learning all the different design file formats and the world of graphic design.

If you’re looking for help with your graphic design needs feel free check out the wide range of services we offer or contact us today!