Design Elements for Print and Web: A Newbie's Guide Part 2

Design Elements for Print and Web: A Newbie’s Guide Part 2

In part one, we explored the differences between CMYK and RGB along with what resolution and pixels are. In part two, we will delve a little bit deeper into design elements and unravel what file types you should be using for print and for web design. We hope you are enjoying the series.

Graphic File Types

Some file types are useful and beneficial for use on the web, while others are only suitable for print marketing. One part of a web designer’s job is to achieve a balance between image quality and a size for the image that’s suitable for web browsing. Images suitable for online use are jpeg, gif, and png. Although there’s quite a lot of variation between these three types.

Design Elements for Print and Web: A Newbie's Guide Part 2

Image Source

JPEG (Joint Photographic Experts Group)

A jpeg image format can use up to 16 million colours. It’s probably the best choice for web based images with lots of colour gradations (especially photographs). Jpeg is lossy, this means that each time that the image is changed, compressed or saved, some of the image information is lost and the quality is degraded. Jpeg images allow for various levels of compression. Low compression will mean higher image quality and a large file size. High compression will mean lower image quality and a small file size. This makes them great for manipulation on websites and for use in general on the web.

If you really must print a JPEG image then print it at 300ppi or smaller than 100% of image size. However a JPEG can’t be enlarged without losing sharpness. It’s not recommended for print.

Design Elements for Print and Web: A Newbie's Guide Part 2

Image Source

GIF (Graphic Information Format)

GIF is a lossless image format. This means that when the image is manipulated or compressed then the image quality isn’t degraded through compression. GIFs are also able to be animated and are commonly used for humorous internet memes. They are limited in that their colour palette only contains 256 colors. GIFs are a flexible choice if your website requires simple graphics without huge requirement for colour accuracy. A GIF can also allow for transparent backgrounds. This means that the background colour of the web page to show behind the graphic.

GIF files are great for saving graphics with large blocks of solid colour or incredibly small files on the web. If you intend on printing a GIF file, you would be wise to convert it to a 300ppi CMYK .tiff file for printing. Although beware that once this has been done it’s can’t be enlarged again or else it will lose sharpness. In general though, steer clear of printing a GIF file, they are designed specifically for the web. They will appear posterised and strange when printed and are rarely high enough resolution to be used in this way.

PNG (Progressive Network Graphics)

PNG is a terrific format for digital images. PNG files can use millions of colours and also can be used with a transparent background. They are a common choice with many web designers. A file type originally created by Microsoft for use in their Microsoft Office range, they are a great all purpose digital image file.

Although they are made for the web, they can be printed. However they generally won’t have an even and continuous colour tone in print, so use caution to get the best result. Convert the PNG file to CMYK .tiff format for printing.

Design Elements for Print and Web: A Newbie's Guide Part 2

Image Source

BMP (Bitmap)

This format is fantastic for photos. The photographic format breaks image up into little blocks of colour. The more pixels you have, the larger an image that can be created. The fewer pixels you have, the blurrier the image.


Vector format is great for use in logos or technical illustrations. This is because they can be enlarged and made smaller without any corruption of the image. Vectors can technically be enlarged ad infinitum. They can be a logo sitting on the side of a building, as the mathematical dimensions remain the same, it’s only the image that enlarges. In this way it’s a truly lossless format. Vector files can be printed to any size without losing sharpness. Unless they have photographic images embedded in them.

Native Files

These are graphics files that are in formats used in graphics editing software. They are saved without compression at their full resolution. Therefore they are larger than graphics files for the web. So for example the extension psd. is for Photoshop; .png is for Fireworks; and .ai for Adobe Illustrator.

Design Elements for Print and Web: A Newbie's Guide Part 2

Image Source


This format is great for photographic images and for professional printing. TIFF files can compress using the LZW compression algorithm without loss of colour or detail. As they are designed for print, a TIFF file can be printed at 300ppi at or smaller than 100% of image size at that resolution. However it cannot be enlarged without losing any sharpness.

We hope that you’ve enjoyed this extended foray into the craft and science of colour production for print and graphic design. It’s been quite a trip and you must now be starting to realise the amount of forethought and attention to detail that is required to get colour and formatting right in graphic images on both the web and in print.

Written by Athena Dennis for Total Graphic Design. We welcome your inquiries into our comprehensive graphic design services. Speak with us today!

Leave a Reply