How to choose the right image for print or web

March 12, 2015

A quick guide to choosing the right image/photo for print or web

Some tips to help you decide

Following on from our last post about file formats we thought it would be useful to give you some basic information about the quality and resolution of photos for the web and in print. Firstly you’ll need to find a striking image. You might commission some photography, or you can find some really great images in any number of online directories such as iStockphoto, Getty Images, or Shutterstock. Whatever you’re using it for, the right image can make the difference between connecting with your target audience or not. If you’re buying a library image remember to check the small print; make sure you can use the image for your needs before you buy it. Don’t be tempted to use pics from a Google image search as the resolution will probably be really poor and you’ll probably be infringing copyright.

Once you’ve chosen your image, here are a few tips to get you started from a print perspective:

Select the right resolution for your use Two basic facts to bear in mind when thinking about resolution: a) Most printing uses a series of dots to create images. b) Digital photos are made up of pixels – the more pixels, the higher the resolution. The trick when selecting an image for print is to make sure that once the printer’s dot screen has been applied to the image you can’t see the pixels. Technically, the number of pixels per inch in a photo should be twice the screen ruling of the printed item, but generally speaking all you need to know is that the resolution of a high res photo for print should be 300 pixels per inch (sometimes referred to dots per inch or dpi). Remember that this 300ppi resolution must be at the size the image will be printed, so your designer might ask for a 300ppi image at, for example, 10cm x 5cm – if you take an image of this size and blow it, all you get are bigger pixels.

Once your image is the right resolution don’t be tempted to blow it up or you’ll start to see the pixels. Choose the image file type based on your desired use Use a .tif or .jpg file, but make sure that, in the case of a .jpg, the compression is set for maximum quality rather than smallest file size (less compression = higher quality). Make sure that the image is set to CMYK Most printing processes use CMYK (cyan, magenta, yellow and black) inks, so your images should also be set to CMYK. As always there are exceptions, but your designer or printer will be able to advise you.

Make sure your image is set to CMYK

Here are a few tips to get your started from a web perspective:

Select the right resolution The resolution of images for the web is 72ppi and their size is measured in pixels rather than cm or mm. Modern websites are often responsive – meaning that they will scale themselves to fit different types of hardware such as tablets or smartphones, so if you’re providing an image for use on the web it’s worth bearing in mind that it will need to be the size of the largest viewing platform (it might seem odd, but some devices with retina screens need larger images, even though the actual screen size is smaller).

Both of the images above have the same number of pixels, but on a tablet with a retina screen, the image will appear smaller. Choose the image file type based on your desired use Go for a .jpg and balance quality against file size to give good download speeds. If you’re preparing a logo for web use and you need the background of the logo to be transparent go for a .png. If your logo is really simple with only one or two colours, you could try a .gif if you really want to keep the file size to a minimum (but generally .png will give better quality). If you want some more help on choosing which of these types will work best for your needs take a look at our artwork format blog piece Make sure the image is RGB Computer monitors use red, green and blue pixels to display your website, so be sure to save your images as RGB rather than CMYK. By following these simple steps choosing the right format, resolution and file type for your needs will be much easier – leaving you with the tricky bit – choosing the image that best fits your message and target audience. It might be tricky but it’s fun getting creative with imagery. If you need some help, we’re only a click away!

What’s the best artwork format to use?

March 5, 2015

Choosing the right file format for the job.

So you’ve taken a new product photo or you’ve got a brilliant new logo and you want to use it in a brochure or on your website – all your hard work can be wasted if you choose to supply the wrong file format for the job. Whoever is in charge of producing the finished article (whether in print or online) will be able to advise you, but here are a few general guidelines that will help you to avoid common mistakes

Before choosing the format of your artwork think about how it might be used. Is it for a website or will it be professionally printed? If it’s a logo, should it always have a fixed colour background or will it be applied to different backgrounds (you might want to take a look at our Brand Guidelines post for more information on specifying logo usage). When you’ve decided how you want the artwork to be used, you are ready to think about the format.

What are the formats you might come across?

Here are the most common:

.jpg
.gif
.png
.eps
.pdf
.tif

Every time a graphic file is created and saved the program you’re using saves the artwork with a specific file format. Some of these formats are best for high resolution (high-res) applications – great for printing; and some are best for low resolution uses (low-res) – better for the web.

Saving your artwork in the wrong format can cause problems, particularly if a printer rejects it, costing you more time and potentially money.

Here’s a quick run down of what those common artwork formats are and how they can be used:

.jpg – good for use on the web, email and print

A .jpg (or JPEG) is a compressed file format that can squeeze even high resolution files down to manageable sizes that you can use on the web, giving fast download speeds. It’s a pixel-based format, so you’ll need to know the final size and resolution needed for the finished article (we’ll be covering this subject in the next blog post). You can usually select the amount of compression, but be careful not to get carried away as using too much compression will result in loss of quality of even high resolution files. JPEG files have no transparency settings, so they will always include the background colour in the file. You can use jpeg files for photos in print and on the web, but ideally, only use for logos on the web as .eps is a much better format for printing logos.

The images above are jpegs with the same resolution but different compression settings – more compression results in the ‘blocking’ effect on the right

.gif – good for use on the web and email

.gifs are also good for compressing images for quick download. They can be used with a transparent background and therefore can be placed on any background colour but they can appear with a border so watch out. They don’t compress files in the same way that jpegs do, but they save space by reducing the number of colours included in the file, so they are best used only for logos that have a limited number of colours and never for photos unless you really have no other choice. Not suitable for print.

The image on the right shows the effect of saving in gif format on the number of colours in the image.

.png – great for the web in cases when your artwork needs to have a transparent background

.Pngs are often larger file sizes than .jpg or .gif files and therefore will take longer to download, but for transparent backgrounds the quality is generally better than .gif files. Not suitable for print.

.eps – best for logos that are to be printed professionally

If your logo has been produced in a vector-based drawing package (such as Adobe Illustrator), an .eps file will produce the best results in print. An .eps file will encode the vector information from your logo or illustration, which means that you don’t need to worry about size or resolution. Pixel-based images such as photos can also be saved as .eps files, but the file sizes are large and you get none of the scaling advantages that vector illustrations have.

.tif – great for professional printing

Professional printers may ask that your photo-based artwork files are saved as .tif files. These are generally considered to produce better high res results than jpegs, though the lack of options for compressing .tif files means that file sizes are much larger. Only use for high quality print files and never for logos.

.pdf – great for use on the web, emailing and professional printing

The formats listed above are ones you’ll use for saving logos or photos, but what if you’ve combined your images and text to produce a brochure or leaflet?

Most page layout software (such as Adobe InDesign or Quark Xpress) will allow you to save your finished artwork into a high resolution pdf file, and most professional printers will prefer this format. If you have the Acrobat Professional software you can save your artwork into a format ready for printers, create interactive pdf forms and include artwork on your website. As most people will have the Adobe Reader free software installed on their machines, it also makes sharing files easy.

You may also see artwork formats with a .psd (Photoshop) or .ai (Illustrator) file extension both of these format types are native editable files for this software.

Choosing the right format depends what you want to use that artwork for and the above is just a basic guide. It can seem tricky but with the right help, it can be really simple. If you would like to find out more about any of the above formats or what type of file to supply for a particular use, why not give us a call – we’d be glad to help out.