How to get the best quality results when saving images for print and web

Sharp images across all devices

Here at Popdot we get a lot of questions from clients asking how to save images for print and web. You may not know what each term stands for, or more importantly, why you should care. By taking advantage of the online image resources and information we have provided you in our previous blogs, it is possible to create and achieve dynamic and engaging projects that’ll make a lasting impression on your audience. It’s crucial however, to have an understanding of the different ways of dealing with these images to ensure that you get the best quality results from the files you are working with.

Image compression

Image files can store data in an uncompressed, compressed or vector format. Compression uses an algorithm that stores the original image in a smaller number of bytes. There are two types of image file compression algorithms: lossy and lossless. Lossy compression algorithms preserve a representation of the original uncompressed image that may appear to be a perfect copy, but are in fact not a perfect copy. This type of compression achieves smaller file sizes. Lossless compression algorithms reduce file size while preserving a perfect copy of the original uncompressed image. It generally results in larger files than lossy compression. In vast contrast, vector images are fully independent of file size and can be made as small or as large as possible without it affecting the quality of the image in any way.

Graphic file formats

When using images for print and web, there are many different possible file formats that can be used. The most common formats are as follows:

  • JPG/JPEG (Joint Photographic Experts Group). JPEGs are the most widely used image file formats that use lossy compression. They allow small files to be created, which is especially handy when publishing online and adding images to websites. Before downsizing images as JPEGs, it is worth saving a version of the original at full-size first. If you were to resize the original image and save over it — particularly if you were to make it smaller — it would be impossible to reverse this resizing back to its original size if needed. In this instance, the image would become pixelated — something that you want to avoid at all. Every time a JPEG is edited and resaved, more quality is lost (generational degradation) so don’t overdo it when working with these particular files.
     
  • GIF (Graphic Interchange Format). GIFs can be much smaller than JPEGs and have palette limitations that make them a format less suitable for reproducing colour photographs. They tend to be more suitable for simpler images such as graphics or logos made up of solid areas of colour. They also support animations that are used largely with social media.
     
  • PNG (Portable Network Graphic): This format was created as a free, open-source alternative to a GIF, which maintains excellent lossless compression and offers transparency for 24 bit RGB images. PNGs are most frequently used for web and can replace GIFs today.
     
  • TIFF (Tagged Image File Format): TIFFs allow for a wide range of different compression schemes and colour space specifications and can be used to create images that consist of multiple layers within a single file. TIFF files make it possible for almost any information to accompany an image. The flexible quality of the TIFF format makes it ideal for photographers and publishing industries that use desktop publishing and imaging applications, such as Adobe Photoshop.
     
  • EPS (Encapsulated PostScript vector): This is a file extension for a graphics file format used in vector-based images in Adobe Creative Suite. An EPS file internally contains a description of such an object or layout using the PostScript page description language. As mentioned before, the quality of the image is not at all affected by its size — this makes vectors a wonderful image option when wanting to create design work on a large scale. An EPS file can contain text as well as graphics.
     
  • RAW image files contain minimally processed data from the image sensor of a digital camera — consider them to be like unprocessed film, hence the name digital negatives, a term often used to describe RAW files. They are not yet processed and therefore are not ready to be printed or edited. Shooting in RAW allows you to process the image exactly how you’d like it.

Understanding DPI and resolution — print vs web

As well as saving your images in the best formats, it is important to understand DPI, PPI and the correct resolution your images must be saved in for best results.

DPI stands for dots per inch and is used when referring to images for print. In a nutshell, it relates to the number of dots per inch in the image. The more dots, the higher the quality of the image and the sharper the print will appear. When saving images for print, the number of dots per inch has a direct impact on the size and quality of the image. For this reason, it is important to save images at print quality resolution that affects the size of the image when it is printed. 300dpi is the recommended resolution for print, with 150dpi being the smallest resolution we’d recommend. If the image is made any smaller than this, it might be large in size but the quality will have been reduced.

Image resolution affects print size but not screen size so DPI doesn’t apply to images for web layouts. PPI stands for pixels per inch and it relates to the pixel density of a screen, e.g., a computer or mobile screen. Images for the web are measured in pixels. The size at which an image appears on the screen and the quality displayed depends on the pixel dimensions of the image and the display resolution of your screen. In the past, 72ppi was believed to be the ideal resolution for web images because past computer screens included a built-in 9 inch display with a screen resolution of 72 pixels per inch. With advances in technology nowadays, all computers have a screen resolution higher than 72ppi so we’d recommend web images should be saved at a minimum of 96ppi to maximize the quality of appearance on the higher-resolution screens that we use today.

What file format works best for print?

When preparing images for print, the highest quality images are desired. The ideal file format choices for print are TIFFs and EPSs, followed by PNGs (when wanting to create images with transparent backgrounds that can act as an overlay on top of another image).

What file format works best for web?

When creating images for web, it is important to keep the file size low. To achieve this, format and compression levels must be taken into consideration. The formats most commonly used for web images are GIF and JPG. These formats offer low file sizes and moderate to very high quality. GIFs are commonly used for simple illustrations, while JPEGs are more commonly used for photographs.

Design colour jargon in a nutshell

A colour space is a specific organisation of colours. Digital photography works by turning colours into numbers. Different colour modes are used depending on how and where the image will be used — RGB, CMYK, PMS, Bitmap, Hex and Lab models or systems.  The colour systems you are most likely to use are CMYK, RGB and Hex.

Print colour modes

CMYK (Cyan, Magenta, Yellow, Key Black) is the most common colour model used for print made up of four colours — cyan, magenta, yellow, black. Black is the key colour in this colour mode, hence the ‘K’ in the abbreviation. Inks absorb coloured light, which is why the model is called a subtractive one.

PMS (Pantone Matching System) colours are largely used for print and are created with pre-mixed ink. The system is a colour reproduction system that standardises colours, enabling artists and designers to refer to them when colour matching their work. By checking all colours before the image/artwork is produced, it achieves the most consistent colours possible. It is recommended to use PMS spot printing to colour correct the limitations of CMYK printing. Because pantone is a proprietary colour system, it costs more than CMYK. PMS is also used to ensure accurate brand colouring in design elements such as logos.  Famous branded colours include coca Cola Red (pantone 484), McDonald’s yellow (pantone 123) and Reflex blue (pantone 072).

Web colour modes

RGB (Red, Blue, Green) is the predominant colour model used for web applications that uses the three primary additive colours — red, green and blue. When mixed together, these make up all of the other colours.

Hex (hexadecimal/hex triplet) colours are a series of 6 numbers and similar to RGB colours, are only used for web applications. Always starting with a ‘#’, the colour values are broken into three sets of two numbers e.g.: #ffffff.

Bitmap mode uses one of two colour values — black or white — that represent the pixels in an image.

Lab (L*a*b*) colour mode is used to describe all of the colours that are seen with normal vision. This colour system is used for web-based images.

Most screens — computers, smart phones, televisions, etc — are RGB, which means the pixels have little subpixels that just show red, green or blue. Most printers print in CMYK and PMS. It is important to keep in mind that you can't display the exact same colours in RGB and CMYK — if you're only working with digital designs, use RGB colour modes and similarly, if you’re designing something for print, always use CMYK or PMS.

Resolution and image resampling

When changing the size of an image you can either resize it or resample it. It is never recommended to resize an image larger than the original because quality is lost. It is possible to resample images using imaging applications such as Photoshop but it is recommended not to make this common practice as images are never in comparison to larger originals. Making an image smaller — ensuring proportions are not constrained so the image doesn’t become distorted in any way — is great when needing small file sizes. Changing the image size in this way doesn’t change the number of pixels in the image. Resampling an image by constraining proportions and independently changing the size of the image regardless of how it affects the resolution should only be done as a last resort measure as resampling changes the number of pixels in the image. Resampling images a little may not affect the image too much but if the image is made a lot larger than the original, the image loses significant quality and definition. It is always a good idea to source higher resolution images or liaise with the person/client/company who sourced the images initially to see if they have better quality versions of the image for you to use instead.

If you are having difficulties determining which file format to use for your work and how best to use colour modes, don’t hesitate to get in touch and we will be more than happy to guide you through the process of optimising your designs for print and web.

Enjoyed reading this blog? Subscribe to our blog for frequent articles such as this one — covering all aspects of business, design, branding, marketing and publishing. Any comments or questions? Please don’t hesitate to contact us, we’d love to hear from you!

This article was written by Sara Bosch, freelance writer and blogger for Popdot Media.

Contact Nic for more info on getting your images right: n.sidoti@popdotmedia.com or call 0478 115 243.