.pngs and .pdfs – Why those two file types are all you need.

If you have a graphic or a logo designed, you will be likely to receive 6, 7, 8 or more file types for the same image. In reality you need only 2 – .png and .pdf. All other file types can be converted/saved from these!

What image file type are you most comfortable with? Chances are, you like .jpg [jay-peg] or .bmp [bitmap]. That’s because your pictures are (usually) saved as .jpg, or because you use Microsoft Paint which automatically saves as .bmp.

Am I right?

I’d like to explain more about image files, in particular RASTER files and why my favourite two file types are .png and .pdf. First, heres a quick summary of what you need to know when you commission, or receive graphics:

Image files come in two types: RASTER and VECTOR.

 

RASTER files are made up of lots of tiny dots. If you zoom in the dots get bigger and your image looks ‘pixellated’, however these are the best files for photos, images with lots of detail, ‘effects’ and realism. (.jpg, .png, .gif, .tif, .psd)

Raster graphic - Showing Pixels

‘Pixels’ make up RASTER Graphics

VECTOR files are made up of shapes. Each shape has vertices, lines and curved lines which make up it’s edge. The shape itself has a colour, and the edge of the shape has a colour and a thickness. With enough shapes you can get a pretty detailed overall image. The best thing about vector images are that you can zoom in and out an infinite amount and the image will always be clear and in proportion. The problem is that high levels of detail is almost impossible to achieve. (.pdf, .svg, .eps, .ai)

Vector Graphic Example

Vector Graphic Example

Roughly speaking, RASTER files are used online or onscreen, VECTOR files are used for anything printed in real life.

 

The best RASTER in my opinion is .png – it supports different levels of transparency and yet retains good detail. It is perfect for online work.

 

The best VECTOR in my opinion is .pdf – lots of people can receive and view .pdf and it is easily imported into the programs that designers and printers use.

 

So heres some more tech info about why I believe that .png and .pdf is all you ever need. I’ll start with explaining about some different file types.

.jpg [jay-peg]

Photos are large files. .jpg files compress photos into smaller files by kind of blurring individual pixels together so that the file has to remember fewer colours. If you’ve ever saved a crisp image as a .jpg, you see this when you next open the file (especially if you save it multiple times). The image becomes ‘dirty’ and pixellated – have a look at the ‘before’ of this logo redraw we did:

Before and After: The Battery Guy

Before and After: The Battery Guy

.jpg does not support transparency – your image will always be square, or rectangular so any logos saved as .jpg will have a white background ‘block’ behind them. Images that are purely photo should be saved as .jpg – that is what .jpgs were designed for!

.gif [jif] or [ghif]

These file types are designed for images with large, defined blocks of colour. The gif compresses images by remembering which pixels are the same colour. To reduce a very detailed image (like a photograph), it will decide that some colours are similar enough to each other to be saved as the same – leading to some very ugly looking photos if saved this way!

Incorrectly saving an image as a .gif file

Incorrectly saving an image as a .gif file

Gifs DO support transparency, but only ‘hard’ transparency in one colour – one colour is selected as ‘the transparent colour’ and that colour will show as 100% transparent.

GIF Transparency Example

.gifs also support ANIMATION! All those blinking memes and a lot of adverts are made with .gifs – each frame is just a separate .gif image file. You can make your own .gif animated images with .gif generators free online.

GIF Animation Example

GIF Animation Example*

*Wait! This animated gif is photorealistic, but it says above that .gifs aren’t good for photos! Response: Yes, but black, white and grey colours are greatly reduced in comparison to a normal photo, and you can still save the file as high quality, it will just result in a much larger file.

.png [ping]

.png stands for Portable Network Graphic. It was designed for, you guessed it, use over the Internet. When web design first started out .pngs weren’t used much because the old Internet Explorer browser didn’t display them properly. Now however, they are hands down perfect for MOST images for your website. They do not trade quality for compression, they display blocky graphics crisply AND photo-based graphics accurately AND they support multi-leveled transparency:

PNG transparency example

 

.tif or .tiff [tiff]

.tiff stands for Tagged Image File Format. These files are similar to .pngs in that they support transparency and don’t compromise quality for suppression. They are actually a ‘container’ file in that they can store data that is actually a vector image, or actually a .jpg image etc. The file is then ‘tagged’ with information (in what is called a ‘header’) so that the receiving computer can decide how to use it. Because of this header, they are larger files, so generally it is best to choose which file type is ‘right’ for the image you are saving in the first place.

 

.psf  (photoshop file)

This file type is for Adobe Photoshop and retains the individual ‘layers’ that make up an image. For example a simple logo may have a ‘writing’ layer which overlaps a ‘circle’ layer which overlaps a ‘background’ layer. Without a proper layer-based image manipulation program you won’t be able to use these files.

 

.bmp [bitmap]

This file is nice and simple in that it saves each pixel’s colour separately. It can be quite a large file, and the native program for these files is Microsoft Paint. No layers are saved, no transparency is available, it is a simple basic file. It is not appropriate for the Internet as there are better file types out there, but most modern browsers will still display them properly!

 

Summary of RASTER file formats:

For purely photographic images, save as .jpg

For very simple block-colour images, with up to ONE transparent colour, save as .gif

For simple animations, save as .gif (for larger files use movie files)

For all else, use .png

 

All vector fomats:

If you are not a designer or a printer, there is really no need for you to understand the different file formats. The reason I like .pdf files so much is that you do not have to have a specialist program to properly VIEW the image. .pdf files are viewable to anyone since everyone can download an adobe .pdf viewer. .pdf files are also designed to be printed at a particular size, so if you design the image for A4, it can still be zoomed in without pixellation on the computer, but if you hit ‘print’ it will come out of the printer at the size you designed it.  Many ebooks and documents are .pdf format since they are universally viewable and because of this printing advantage.

 

If you have a graphic or a logo designed, you will be likely to receive 6, 7, 8 or more file types for the same image. In reality you need only 2 – .png and .pdf. All other file types can be converted/saved from these!

Some recent Fiverr.com jobs

A lot of Kestrel’s day to day jobs are through fiverr.com where we do quick changes to logos – more often than not cleaning them up or making a small change here or there. There are a surprising amount of successful companies out there who had their logo designed a long time ago and have scanned it into the computer or lost all but one version. Here are a few recent examples of the tidy-ups:

Logo Design Logo DesignLogo DesignLogo Design

All designers MUST love weddings

Helping to co-ordinate all the design elements of a wedding is the most fun a designer can possibly have! Close friends have asked us to design their wedding – from the decor to the stationary. The fantastic venue (The ‘Explosion!’ Naval Museum) has shaped the entire theme – lots of black, brick and fairy lights (with a touch of the brides favourite colour of Raspberry)! Heres a snippet of the invite idea – strong, simple and very ‘them’. Names, dates and times have been changed for privacy.

Wedding Invite Design

All printable designs are sized correctly for the print resolution needed (often a file which is a lot larger than you’d think), with correct bleed margins as supplied by your printer.

Logo and Identity Pack

Marsha Cooper Photography doesn’t yet have a website (she’s pretty busy without one)! But as of now she has a logo, business cards, custom invoice and letterhead!

Marsha Cooper Photography Logo Design

A snippet of the invoice – the file is a photoshop file with layers so it is easily edited by a pro-photographer! The fonts were provided and tie-in with the brand identity for a very unique and branded document.

Invoice Identity Design

Copperspire Website

Copperspire is a company who do electrical work and fire safety consulting. They are family run and very friendly, professional, efficient and hard working. We admire their work ethic and wanted to make sure their website was corporate and professional but good looking too. They previously had a website that had been created for free by a friend – coming to us was the next step to show the world their true colours. You can click on the picture below to see the website in different sized formats, or check out the site itself –

copperspire.co.uk

Copperspire Website Design

We mocked up a quick logo since they hadn’t yet emailed theirs and they ended up changing their logo to our new one too!