Considerations when selecting imagery for your site

While selecting images that support your content and add visual dimension to your message is most important when choosing imagery for a website, there are a few additional considerations that ensure images will work well for a site. Web images today need to be able to scale in order to fit on both mobile and desktop screens, include enough resolution for 2x or 3x screens (i.e., retina screens), and, in some situations, handle overlaid text. As a designer I spend a lot of time sizing, cropping, and adjusting images for the web. Here are the main areas I find projects get hung up on and some tips to help the process go as smoothly as possible.

Image Size

Providing images to your designer at the highest resolution available is preferred. As a rule of thumb, find out what pixel dimensions the images will be displayed at and provide images that are at least double that resolution. This gives the designer creative elbow room to crop and adjust the images to best fit your site as well as have enough resolution to keep your images sharp on 2x screens.

Image Orientation

It is important when choosing images to look at the wireframes to get a sense of how the images will be cropped and whether they will be presented horizontally, vertically, or squarely. For example if an image will be oriented horizontally you’ll want to find a horizontal image or at least one that can be cropped horizontally. If you’re sourcing stock photography, many sites have an orientation filter to help refine your search.

Full width images can be a little tricker depending on how they scale. If the image scales proportionally the image will be cropped the same on all screen sizes. If there is text over the image the height will sometimes be fixed (to prevent squeezing the text) which will result in cropping the top and/or bottom of the image. In this case you’ll need an image that still works when very short and very wide.

Text Overlay

Overlaying text on an image is visually compelling but does require extra attention to balance the legibility of the text and visibility of the image. This approach often calls for the image to be either lightened or darkened to contrast with the text. This means the image may not be able to be presented in full brightness. Finding an image with some blur or less detail in an area is favorable for this type of image block. This open space will help prevent the image from competing with the copy.

Sourcing Images

If you already have imagery, be sure to let the design team know at the beginning of project so they can start working on creative uses for your imagery. If you don’t, here are a few different ways to acquire imagery:

Hire a Photographer

We recently collaborated with Bravium Wines and Pittman & Brooks to shoot custom photography for their sites. If the budget allows we highly recommend this approach because it ensures the imagery you include on the website is unique to your business and specifically created for your website’s precise needs. Additionally, you (or your designer) will avoid spending a lot of time searching stock photography libraries for the right “non-stock” looking images.

Paid Stock Photography

This is a high quality and affordable option. There are many extensive stock libraries to choose from with a variety of plans and pricing structures. A few of the stock sites we’ve had success with are: iStock, Shutterstock, and Getty Images. Most of the sites these days have excellent search filtering options to help speed up the sometimes lengthy search process.

Free Stock Photography

For projects with tight budgets there are many great free stock sites available. One site I’ve enjoyed using is called Unsplash. It, as well as many others, have excellent imagery but due to the affordability it’s not uncommon to come across free stock imagery throughout the web. You are also likely to spend a lot more time searching for the right image because the quality control and filtering options aren’t as refined as paid stock photography sites.

There are many considerations to take into account when selecting imagery and this will continue to change. When in doubt check with your designer or design team and good luck on your next project.