Imagery Design Techniques and Guidelines for the Web

Imagery is the face a website. Just as we look for emotional and physical cues in faces, the imagery of a website denotes a particular mood and feel to its audience. Neglecting the choice of quality image is a common pitfall that often spoils the investment made in a website. Lets explore a few guidelines and resources for ensuring your website has quality images.

Start with Clear, High Resolution Images

At the very least the images for a website should have a clear focus and adequate resolution. Photos that are out of focus denote a lack of professionalism to visitors leading them to think that the website was thrown together in a hurry without much attention to detail. Low resolution images have a similar effect on a website audience. Low resolution images that are stretched to fit a layout look as bad as out of focus photos.

The ideal source of imagery for your site would be a local photographer who can put objects, people, and locations in context with an overarching look and feel. Additionaly, repositories such as Unsplash and Flickr are excellent resources for bootstrapping or supplementing an image library.

imagery context example of woman looking to and away from text

Choose Images that Fit the Content

Stock photography has its merits though many stock photos have an unrealistic polish and perfection that often ends up feeling disingenuous to visitors. For most situations, go for images that recreat real world experiences rather than carefully crafted, sterile situations.

iStock and ShutterStock are popular libraries though Creative Market and PixEden are my favorites.

Directional context is also another important part of imagery. Select images that lead your visitor’s eyes to the content. Notice how the woman is looking away from the text in the first photo. Visitors eyes will also flow away rather towards content making information much harder to absorb. In the lower photo, the image has been flipped and now the woman’s eyes are pointed toward the text which creates a better experience for visitors and makes the content more attractive.

Optimize and Resize for Improved Performance

High resolution photos are often much too large for an acceptable loading time on the average internet connection. For image heavy websites that contain multiple photo galleries and full-page image backgrounds, the lack of optimization puts a cumulative drag on website performance. Investing in image optimization is a boon for mobile users who often have slower a internet connection or may be frugal with cellular data usage. Here are a few guidelines to go by:

  • Images without transparent backgrounds can be saved in the JPG format at a compression rate of 80% – 90%.
  • Images with transparency must be saved in the PNG format. PNG images have no compression rate settings but can be reduced to a desired height and width dimensions to reduce file size.

Also, make sure to resize all images to appropriate dimensions. If your website layout is only 960 pixels wide don’t use 3000 pixel images for a blog post. Chop the image down to 960 pixels or less. Similarly, if you only care about monitor resolutions of 1920 by 1080 and below, then you don’t need an image more than 1920 pixels wide. Note: Retina displays may require a different approach which is beyond the scope of this article.

As a finishing touch, apply a bulk image optimization service such as WP Smush or Kraken. These services often improve load time and search engine ranking by netting an additional 10 to 30 percent image compression.

imagery filters animated gif

Polish Imagery with Consistent Effects and Filters

Image filters and effects are a popular method to enhance images of all kinds. Subtle effects such as a light leak or vintage filter can add a touch of realism to your images. Moreover, if you have images from different sources that use various types of lenses and color balances, then applying the same effect to all of them stabilizes the mood of your site with a more consistent look. Along with Photoshop, many native image editors include ways to add effects to images My favorite image editing tools are Photos and Preview on OS X and Pixelmator.

That’s all for now. Thanks for reading and I hope you found this post helpful. Please share!

Leave a Reply

Your email address will not be published. Required fields are marked *