Image Quality & Graphic Design

image quality and graphic design / basic graphic design / graphic design for business owners

I recently wrote a post about raster versus vector graphics. In this post I want to talk a bit more about image quality and some easy “dos” and “don’ts” when it comes to creating images for your print and digital designs.

Resolution and PPI

Let’s start with the basics. Image resolution is the amount of detail an image holds. An image saved at 72 dpi will hold fewer details and less information than an image saved at 300 dpi. Below are examples of an image saved at 3, 6, 12, 25, 50, 72 and 300 ppi (pixels per inch).

It will be difficult for you to distinguish a big difference between the 72 and 300 ppi images because 72 ppi is the optimal resolution for images saved on the web. Its difficult to see a big improvement with an image saved at a higher resolution than 72 ppi, so you’re just wasting file size.

What I mean by that is the same image saved at 300 ppi will be a larger file size than an image saved at 72 ppi. Publishing an image meant for print onto a webpage will just make the load time for that webpage slower, with no real gains in the quality of the image.

As you can see if you click on each photo below, an image saved at 3 ppi literally has larger pixels per inch. There are 3 pixels per inch in a 3 ppi image. There are 72 pixels per inch in a 72 ppi image. There are 300 pixels per inch in a 300 ppi image. The more pixels per inch, the more detail, the more colors the more INFORMATION that image is capable of holding. Thus that image will tend to be sharper, less fuzzy, less pixellated and of higher quality.

Consequently, an image saved for the web at 72 pixels per  inch (ppi) should never be used in a print design. The quality of that image will fuzzy and pixellated.

Because the optimal resolution for the web is 72 ppi, an image saved for the web at 300 ppi has more information and more detail than is necessary for web viewing. Consequently, an image saved for print ideally should not be used for the web.

If you know you need to create a graphic, photograph or design for both print and web use, always create the graphic at the larger ppi (300 ppi). Export the image for print. Then change the resolution of the graphic or photo for web use to 72 ppi and export that image again. That way you’ll have the optimal image saved for both web and print publication.

If you think there is any chance you’ll use the design again in the future, make certain you save the raw file at the larger file size. You can always scale an image smaller. But trying to scale an image saved for the web at 72 ppi for a print image at 300 ppi will result in less than stellar results.


Aspect Ratio and Squished Photos

Okay, I’m going to show you what pretty much is my #1 pet peeve. Squished photos. Every time I see one of these on the web or in a print design I gasp.

No matter how  awe-inspiring your message, how amazing your content, or the depth and breadth of your knowledge and experience, silly mistakes like this make you look like an unprofessional careless amateur. Do. Not. Do. It!!

I get it. Sometimes I a photo isn’t the right size or aspect ratio of the space you need. So you’ve got 2 easy option: resize the photo or crop it.

How to Work with Groups of Images

When displaying groups of images the easiest way to make sure the grouping looks uniform and consistent is to create them all the same size. But sometimes that’s not possible. When displaying them as a group horizontally make certain they at least are the same height. That way the group will look more uniform and consistent. Don’t forget about alignment and consistency in spacing.

When displaying a group of photos vertically, at minimum make certain they are the same width to create a more uniform and consistent group. Again, don’t forget about alignment and spacing.

As you can see above, randomly sized and shaped photos look odd and unprofessional when placed in a group. This is a quick and easy way to make certain a design looks great.

Using the principle of contrast, you can make one  image larger than the rest. But if you do this, you need to make it MUCH larger, not just a little bit larger.

Don’t forget that the featured image you create for your blog might only be one image, but it will be seen as a group of images on the blog index page. The obvious solution is to create every featured image for your blog the exact same size and aspect ratio. It makes for a clean, uniform look instead of a disjointed, jangled mess.

Share this:

Leave a Comment