Digital Basics: Formatting Your Web Graphics

Picture this: you’re editing an image on a program like Adobe Photoshop or GIMP. You’ve finally reached the point where you’re satisfied with your editing, and you’re ready to show off your work to the rest of the world.

And then you save your image at 72 dpi, at less than 300 pixels on either side, and send it off to your local print shop.

You probably received a frustrated email, text message, or even a phone call from your local print shop attendant, saying that they can’t print your image because of “poor resolution” or “low-res images”. Or maybe you didn’t, and the print shop proceeded with your order, and you were confused about the poor quality of your prints. The images look fine on your computer!

The answer to this question lies in a number of factors, which we’re tackling in today’s article. While this information may seem basic, any digital marketing veteran can always do with a refresher for their graphic design endeavors.

Let’s get to it!

IMAGE COMPRESSION

What is image compression?

Without getting too technical about it, image compression is about how much data an image loses when it’s sized up or down. For example, some images can be resized without losing sharpness or details, while some images lose clarity and detail when the same is done with them.

This is because of compression – some images are formatted in a way where they retain a lot of information, such as color depth, while others are formatted in a way that loses some information in order to make the file size smaller.

Essentially, image compression is how much image-related data is “compressed” into a file; the bigger the file, the more information it contains. A low-compression image will be considerably bigger than a high-compression image, because the former has more stacked information compared to the latter.

IMAGE RESOLUTION

The textbook definition of image resolution is that it refers to the number of pixels in an image. There are two ways of expressing an image’s resolution: the total number of pixels in the image, or its height and width.

Let’s use a camera’s output as an example. Say you’re looking at two cameras which are identical in every way except for their image resolution: one camera shoots at 3.1 megapixels, while the other shoots at 5.1 megapixels. An easy call, right?

Not exactly. While some cameras may be shooting at a lower resolution, they may also be shooting at a higher compression, while some cameras could be shooting at a higher resolution but lower compression. This is because an image’s resolution and compression both take up memory; a low-resolution image with low compression could take up as much memory as a high-resolution image with high compression.

This may also sound familiar to anyone who’s shopped for a new computer monitor or laptop. The resolution of a screen affects how many pixels it can display at any given time.

For example, a screen with an 800×600 pixel resolution can only display a total of 480,000 pixels at any given time. If you have an image with more pixels than that, the image won’t display properly on the 800×600 screen; parts of it will be cut off and you’ll have to scroll on your image viewer to see the cut-off parts. Meanwhile, if your screen has a 1920×1080 pixel resolution, it’ll display a total of 2,073,600 pixels, which means it can properly display larger images with ease.

DOTS PER INCH / PIXELS PER INCH

In this section, both compression and resolution come into play. If compression is the amount of data available for an image, and resolution is the amount of pixels available for an image, dots per inch or pixels per inch is the amount of information your printer has access to when publishing an image into hard copy.

Dots per inch (dpi) or pixels per inch (ppi) tells your printer how much information is available per printable inch. The rule of thumb is that the higher the dpi or ppi for an image, the better the print quality. But this is a double-edged sword – while a higher dpi assures quality output, it also means that your image will cost a lot of memory. This can affect your computer’s performance if it doesn’t have a lot of memory to spare from the start.

IN SUMMARY

You have to take into consideration what you want to use your image for. If you intend to send an image to a few friends over email and have no intention of printing hard copies of it, a low-resolution high-compression image will do just fine. If you intend to publish your image in hard copy as a postcard or a poster, a high-resolution low-compression image is what you need.

Take heed of this information the next time you send over your files to your local print shop!