Impress Guide To: File Types
You: “Do you have everything to get the project started?”
Agency: “If you could send all of the image or design files, that would be great.”
You: “I thought I did.”
Agency: “No. All the images were low res and for the logo we need vector files.”
You: “Um….. yeah, makes perfect sense...”
If you’ve ever experienced this conversation before, don’t worry, it’s very common. There are a lot of fancy words thrown around from time to time that no one has ever explained very well. So rest assured, we are here to help you wade through the swamp-tank of creative jargon and make it a whole lot easier. It might also explain why we seem so pedantic from time-to-time!
Who gives a f*le type?
Like selecting a biscuit to dunk in a cup of tea, there are lots of types out there and each one has a unique set of properties. Pixels on a screen can be arranged and saved in a variety of ways. The method you choose will have implications for the overall quality of your image. And, by understanding the key differences between, say, a JPEG and a PNG, you can make the design process smoother and ensure that your final design is perfectly suited to your intended usage.
Which file type should you use? The answer generally depends on how you plan to use the end product.
Resolution is about usage
The most important thing to check when supplying images is the resolution. Does it match the usage requirement? The same image could be good enough to use in a report for web, but not for its print counterpart. In addition, one photo may make the grade for a cover image but just won’t look great as a billboard. Any images for printing should be a higher resolution, while website graphics may need to be of a lower resolution to improve page load times. You can read more about image resolution below.
Use vector files for logos, icons and any designed artwork
Vector files (also called design or source files)are those with endings such as .eps, .svg, and .ai.Identifying a vector file is quite easy. If you’re not a designer and you can’t seem to open it, it’s likely to be a vector file. They retain all the mathematical information contained in an image, rather than just the coloured dots that make up a photograph. There’s never any loss in quality and the colours remain exactly the same. When you send your designer a logo or another image to work with, you should always use a vector file when possible.
Identify file size restrictions
When designers create a website or an online document, they aim to balance the quality of the image on the screen with file size. Large files can slow the loading time of a site down significantly, frustrating users. When briefing your design studio, you should tell them whether your priority is load-speed, quality, or a mixture of both.
Watch for colour shifting
It may sound unbelievable, but we still aren’t living in a world where the same colour on a screen, is the same colour on a piece of paper, no matter how much you pay. Computer and TV screens work off a different colour spectrum to printed materials, and some colours look quite different across these mediums. Designers can change the file format and colour format where required, but it is particularly important to be aware of this when you need images to adhere to brand guidelines. Beware of that amazing Fluro-green if you think you’ll need to print it a lot!
Provide an outline at the beginning
If possible, during the preparation stage, provide your designer with all the images you want to include in the design. This will allow file corrections to be included in the quote upfront and will save you a lot of back-and-forths. There is also nothing more frustrating than creating a campaign concept, only to find out you can’t locate a higher resolution version of the image everyone has spent weeks signing-off. [KD2]
Image resolution: How do you supply clean images and logos?
What is image resolution?
An image is made up of millions of individual dots (pixels) that create the recognisable colours and shapes of an image. The more dots packed into the image, the cleaner edges and the higher the quality of the image produced. The image resolution is a measure of how much detail an image holds at its original size, and how well it can retain the same quality at various sizes. The unit of measure is Dots Per Inch (DPI), indicating the number of pixels placed within a single square inch. The higher the number, the ‘crisper’ the image will be. A low DPI can result in messy pixelation, depending on the size the image is displayed.
To maintain high-quality visuals, we advise using the following guidelines:
When deciding on an image resolution, you should consider what it is being used for. Lo-res logos can’t be used effectively on a billboard, and it may even look messy and pixelated on a printed brochure. On the other hand, a hi-res graphic can result in large file size and slower load times, which can sometimes be a problem if people need to view it online.
For print files, 300dpi is recommended. Images can still be used for printing if they’re less than 300dpi, but your designer will need to reduce their physical size in order to recover the resolution quality. For example, a 72dpi image could only be used in print effectively at 20% of its original dimensions.
It is common to receive questions about whether an image is a high enough resolution before we have placed it into its final position. This is difficult to predict. As we explained above. An image that is 300dpi at an A5 photo size, is a very good quality if it remains that size in the layout or print asset. If you need to make this image twice the size, this will half the resolution to 150dpi (as the dots will stretch with the increased size of the image). So the same image can be useful in certain situations, but not in others.
“This doesn’t really help me collect the right images for you” I hear you say. Well, it can. Whilst you are always best to leave it to the studio to look through the images provided, there are some quick-fire checks you can complete to tell you if you are on the right track.
Open the image at 100% or view it at ‘Actual Size’:
- Is it the size of a postage stamp, or does it fill the screen? Like Texas, the bigger the better! Especially if the image is one you hope to use as a large hero image (either on the cover or perhaps a double-page spread)
- Do the edges of the colours look crisp, or do they blur into each other?
- When you resize the image to either be bigger or smaller than its original size, does it lose/gain quality?
File Types: How do you choose the right one?
Most of us are familiar with JPEGs, PNGs and maybe even EPS files, but very few people are aware of how they differ, and what they should be used for. Understanding this will help you supply the right files to your designer and organise your brand’s assets in a way that ultimately makes everything easier in the long run.
File types are split into two groups: Raster and Vector. These are detailed below.
This might surprise you, but Raster files are not types that enjoy laid back music and enjoy the occasional herbal cigarette. Raster files are in fact made from lots of little dots (pixels). Your traditional photo is a raster-based image. If you try to increase their size or manipulate them, these little dots will protest. When you stretch them too much, the image will become grainy. If you don’t have design software, the image files you would normally see are indeed Raster files, as they have been exported and flattened into a file that the everyday user can view.
- Often used for photographs – such as product shots, headshots, and landscapes that need to load quickly online
- The small file size of a JPEG is an advantage when you need to add visuals to your website or emails
- If a photo needs to be edited before use, it will often be saved as a TIFF file by your designer. The file size of a TIFF is larger (which isn’t great), but it retains its overall quality even after fairly heavy photo editing
- Doesn’t support transparency i.e. the ability to see through an image and see the background behind it
Where to use: Product shots, portrait shots/headshots, landscapes, and other images.
- Supports transparency
- Small file size which makes them great for websites
- Sometimes results in cleaner images than JPEG for illustrations, screenshots, and images that contain text
Where to use: Drawings, graphs, icon graphics.
- For use in Adobe Photoshop
- Contains layers, allowing for easy editing compared to JPEGs
- PSDs allow designers to carefully sculpt each individual element of a design and arrange them in different ways
- Needs to be saved as another file type for use outside of the Photoshop software
These files are made from fancy maths equations that produce smooth lines. These file types retain all the image information and are most likely to be needed by a designer, particularly for work that is to be printed.
AI, EPS, SVG
- Can be scaled to any size without a reduction in quality.
- Ideal for corporate assets like logos which need to be used at a range of sizes – on a billboard, a merchandise or even on the side of a monster truck
- Support transparency
- Can be edited in Adobe Illustrator
Where to use: For printing – especially large-scale prints such as banners and posters.
- Ideal for downloadable brochures that combine text and graphics
- In some cases, vector elements such as logos and illustrations can be extracted from PDF files, if no other vector file is available. But this can result in inaccurate colour conversions
Where to use: online assets and attachments, downloadable brochures and forms
Colour formats explained: CMYK vs RGB
The two key terms you need to know when talking about colour are CMYK and RGB.
CMYK is used for print, and RGB is used for digital screens. This is because your computer screen handles light and colour differently to how it appears on a printed page. While RGB looks great on a computer screen, it doesn’t work so well for a brochure – and vice versa.
Generally, a design should be created and saved in the more versatile and consistent CMYK format initially, and then, when necessary, converted to RGB for online use. Your designer will be able to advise you on this; the important thing is to be very clear from the outset about how you plan to use the design.
If you ever see a change in how a colour looks on the screen vs in physical form, check the file type it has been published from. You may have a file saved in the wrong format.
Alternatively, it may be one of those pesky colours that doesn’t transition well across mediums, like greens and oranges. So be careful creating a brand with a colour that you love on the screen in RGB, only to be disappointed when you see it published in CMYK!
Now it’s over to you
Remember the clearer your communication with your agency about file types, the smoother the process of collaboration and the better the results.