If you’re running a business and haven’t got a graphics team, you’ve probably had to send some artwork, logos or image files yourself.
Here’s a basic guide to help you send the right files to the right place.
The first point to consider is where your files are going. Online and print have very different requirements. Online files are described in light and need to be small so that web pages load quickly. Files for print are described in ink colours and need to be high quality (hi-resolution) to achieve a crisp, quality print.
The short version, if you're in a hurry:
ONLINE includes everything seen on a screen - computers, laptops, tablets, phones, presentations and tv.
- Online files should be RGB colour mode
- For images, save your file as a .jpg at 72dpi*
- For graphics and shapes (or cutouts with a transparent background), save your file as a .png
- Keep the file size down to help pages load quickly
- You can drag any jpg or png into your browser to check the quality online
PRINT is scarier than online because it can’t be changed. Once it’s printed, if you’re not happy, your only option is a reprint (or an ugly patch) so check your content carefully.
- Files for print should be CMYK colour mode.
- For images, save your file as a .tif at 300dpi
- For graphics and shapes, save your files as an .eps
- For design files, save your artwork as a print quality pdf
- If there is time, get a colour proof (actual print not online). Many print colours won't match the colours you see on screen.
The detailed version if you've got nothing better to do:
The colour mode for all online files should be RGB (Red Green Blue). These are light values used to create the right colours on screens and monitors.
- All screens vary slightly in colour and tone so we can’t have total control but we can be in the right ball park.
- Colours are described either with values of light (RGB - like R255 G153 B0) or as a 6 digit reference ‘Hex value’ (eg; #FF9900).
- There are 256 websafe colours (or indexed colours) that should display consistently across most screens and devices. Most modern devices can cope with millions of colours so it’s not relevant for photographic images but this palette can keep file sizes down for graphics and logos.
- More colours make better photographic images but make bigger file sizes. A simple logo doesn’t need the same range of colours. You want to find the best compromise between image quality and file size. If possible, preview your image at 100% and experiment with the saving options.
- This ONLINE section is for files being used on the web and on screens. If you’re uploading files to be printed, see the FOR PRINT section below.
There are 2 main file types you’ll use online. Jpegs and PNGs
Jpegs (or .jpg) are best for images and complex logos.
- A jpeg is an image file made of pixels.
- A jpeg compresses the image and only keeps the minimum information it needs to display an image at a given size. Every pixel is accounted for.
- Because every pixel is accounted for, you can’t enlarge a jpeg without losing image quality. The jpeg only saves enough information for the specified number of pixels. If you then ask it to fill a bigger space, it guesses what colour the extra pixels should be. The greater the enlargement, the lumpier the image (see example below).
- You need to know what the image dimensions are each time you save a jpeg so you can provide the right number of pixels. As new screen devices often have higher resolutions (Apple products have had high quality Retina Displays for a few years now), we recommend doubling up. For a space that’s 300x250 pixels, save your jpeg at 600x500 pixels.
- Each time you save a jpeg, some data is lost in the compression process (this is known as lossy). Don’t keep resizing and saving the same jpeg. Keep an original file and make a copy from it each time. This way, the jpeg only has one round of compressions and your original file is kept safe for future copies.
- Save jpegs for online use at 72dpi/ppi*.
PNGs are best for simpler images and for transparent backgrounds.
- A PNG file is an image file made of pixels but unlike a jpeg, you can have a transparent background. This makes it ideal for cut out shapes.
- A PNG file is best for simpler images - for logos, icons and simple graphics with shading. For flat colour shapes, see also .svg below.
- A PNG compresses differently to jpeg. PNGs are non lossy but that means more complex images make bigger file sizes.
- PNG8 uses indexed colours so will be a smaller file size and might be a better option for simple logos and graphics.
- PNG24 uses more colours so will produce a better image (especially for gradations and shading) but will make a bigger file size. If you have a preview option when you save, see which is best.
Below, the logo on the left is a jpeg. The default background of a jpeg is white. It can’t be transparent. The logo on the right is a PNG and has a transparent background so we can see the image behind it.
If you have Photoshop, experiment with the saving options and look at the preview at 100% to see which file size/image quality settings give the best results for your image. When you’re happy with how it looks at 100%, that’s how it should look on screen. If you don’t have Photoshop and your alternative programme saves your jpegs automatically without a preview, it’s probably giving you a standard 72dpi save which should be fine. If you have been given an image or file but don’t have any image editing software, there are many online tools and programmes that will convert your files for you (I searched ‘resize my jpeg’). Remember though, if the original image is small, there isn’t much to be done with it because the information just isn’t there. When sourcing images, always go for the biggest size available.
Don’t worry about .gif files unless you’re animating. A static gif is pretty much the same as a png.
SVGs are good for shapes, logos and icons online but not all programmes accept them.
If your logo or image is made of flat colours and is a vector file (not made of pixels), try saving your file as an SVG.
- SVG = scalable vector graphics. A vector is made up of points, lines and fills and is infinitely scalable (as opposed to raster files which are made of pixels and cant be enlarged without losing quality).
- You can only save a vector file as an SVG. You can’t save a rasterised (pixel based) image as an SVG.
- SVG files can have transparent backgrounds.
- There are some compatibility issues with SVG files but if they are accepted, make much smaller file sizes for logos and icons. See my icon file size test below.
All files for print should be CMYK - Cyan Magenta Yellow and Black. These are the colours of ink used for most full colour printing.
- If you convert an image from RGB to CMYK on your computer, the CMYK image will look dull on screen compared with RGB (particularly oranges and greens). You can’t accurately match ink colours with light so trust that your software has done the best conversion for you.
- If you want your print to match a specific colour and there is time, ask your printer for a proof. Not an online proof - that won’t help you. You need a physical copy. Ask if it’s included in the price.
- If your design touches the edges of your document (if it has a background image or colour), you will need to add bleed (usually an extra 3mm bigger than your document trim size). This is because the printers have to allow for a little movement when trimming your print so they need the extra background so you don’t get a white edge. By the same token, keep any important content (like words) at least 5mm inside the edge of your document. If you’re putting a border on your design, keep it at least 8mm from the edge (trim size).
- Print artwork can’t be changed as easily as an online file. Once it’s been printed, if something’s not right, your only option is a reprint. If you would like help setting up your artwork or would like someone to check it for you, use our contact form and we’ll be happy to help you.
EPS files are for shapes.
- EPS files are vector files - they’re made up of points, lines and fills, not pixels. This makes them ideal for most logos.
- A vector file can be enlarged to the size of a building and still look good.
- You should have a CMYK .eps file of your logo if you’re ever going to print anything.
- If you’re an Adobe user, an Adobe Illustrator .ai file will work just as well across other Adobe programmes.
TIFF (or .tif) for images
- Tiff files are often large in file size but are best for printing high quality images.
- Tiff files can have layers, like photoshop files
- If you’re an Adobe user, saving as a .psd file will do the same job.
- If setting up or saving your tiff in Photoshop for print, when you’ve finished editing, check your colour mode is CMYK.
- Your file should be the right image size or larger and at 300dpi*.
PDFs make good artwork
If your design is made up of words and images, a ‘print quality’ pdf is usually a good option and widely accepted format for printers.
The high quality images needed to produce good print make large file sizes so your artwork might be too large to email or upload online. We recommend WeTransfer.com for sending large files. Speaking of which, lets just clarify that image size and file size aren’t the same thing.
Image size is the size/dimensions of an image - the width (w) and height (h).
- Online dimensions are usually in pixels and the width is often given first.
- Print dimensions are usually in millimetres/centimetres/inches and the height is often given first
- Always check which is the width or height if not specified.
File size is the size of the file.
- Large images usually make bigger files because the file holds more information.
- The file type (or format) will also affect the file size as different formats store and compress the information in different ways. Remember, Jpeg, PNG and SVG files are best for online. Pdf, tiff and eps files are best for print.
- The resolution of the image will also make a difference. Lo-res images (72 dpi*) make smaller files and are standard for online. Remember, small files help webpages load quickly. Hi-res images (300 dpi) are needed to produce good quality print.
A tip for sourcing images
When sourcing images, always go for the largest possible file size and keep it as your base copy. Maybe make an ‘Originals’ folder to keep them in. When you need to use/supply the image, make a copy of the base file and resize the copy, leaving the base file safe at its maximum quality for future use.
Remember to check the colour mode of your duplicate image. RGB is for online. CMYK is for print. Also check the resolution.
- DPI/PPI DPI = dots per inch. PPI = pixels per inch.
- DPI is most commonly used, even online where you’d expect to see PPI.
- The higher the number, the denser the resolution and the higher quality the image.
- 72ppi/dpi is as much information as most monitors need and keeps the file size down.
- 300dpi is standard for most print.
This is a simple summary of the basic file types you might need. We haven’t listed all the acronyms as we don’t think they help and we were trying to keep it short (if you made it this far, well done!). We hope you find this article useful. If you have any questions about your artwork or an upload you need help with, please just ask.