How to select photos for your website

Perhaps the most important key to a good website is high-quality photography. Even with a really nice design, your website won’t look like much if it doesn’t have great photos to match. With that in mind, how do you select great pictures for your website? Here are a few tips to help.

Consider hiring a professional photographer for a photo shoot

Every year, Apple seeks photos taken on their phones to use in their advertising (and this year is no different), so there’s no question that smartphone photography has come a long way. But even though smartphone cameras are much better than they used to be, they’re still limited for professional-quality photography compared to a DSLR. It’s also important to remember that the difference between a professional and amateur photographer goes far beyond the equipment anyway. A professional will know how to frame a shot in a way that aesthetically pleasing and will have a good grasp of color and lighting. Even if you consider yourself to be an Instagram or Snapchat expert, the investment in professional photography is certainly worthwhile.

If your budget doesn’t permit a professional photo shoot, however, you can still create good graphics on your own. Make sure to use good lighting when you take pictures. Don’t use digital zoom as it’s guaranteed to make your pictures grainy. Don’t use Instagram or Snapchat filters or apply too much editing to your photos to keep them looking realistic.

The resolution paradox

Once you’ve got great photos, the next challenge is to determine what resolution to use on your site. The “right” answer isn’t as clear-cut as it may seem, though. High-resolution photos have more clarity and detail, but they also take longer to load. Low-resolution photos will load quickly but won’t look as good. So how do you meet in the middle and choose a resolution that will look good but won’t bog down your website load times?

First, consider what’s known as viewport size. High-DPI or “Retina” devices have made resolution decisions more complicated, but “viewport size” is a design term that seeks to simplify the discussion. The most common computer monitor resolution is 1920×1080, known as high-definition, HD, or 2K. However, high-DPI or Retina devices employ a technique called “pixel doubling,” which means they use double the horizontal and vertical pixels in the same size screen. So, for example, a 4K TV or computer monitor has twice the number of vertical and horizontal pixels as a HD/2K screen. However, the viewport size of these two screens is the same — because they display the same amount of content.

So when you’re choosing an image resolution, the first consideration is how much space it takes up in a screen’s viewport. If you’re using a full-screen image, the viewport size is 1920×1080. But sometimes smaller images only take up a small portion of the screen. For example, the viewport size of the image at the top of this page is 600×600, which means it would take up 600×600 pixels on an HD screen. Because Retina and High-DPI screens are so common, you’ll want to multiply the horizontal and vertical viewport size by two so that images will be clear on all types of screens. Of course, you should also consider the same thing on mobile, as Retina and High-DPI mobile screens are abundant. Following this logic, the image at the top of this page is 1200×1200, so it’s nice and clear on a Retina or high-DPI screen. You’d want to upload an image designed to cover the entire screen at 4K resolution, 3840×2160, and you can do the math on smaller images. If you receive images from a professional photographer at an extremely high resolution like 6000×4000, you’ll want to reduce those down so they don’t slow your site down.

Other guidelines to help you choose great pictures

Consider the following general guidelines to help you select good pictures:

  • Start with the best-quality picture possible. If you want to use a picture and you only have a printed copy, consider having a professional copy scan it or create a digital copy from a film negative if you have it. Avoid scanning printed pictures, as the quality is noticeably worse, even when a good scanner is used. Don’t take digital pictures of printed pictures either — a picture of a picture will result in even worse quality than a scanned picture.
  • Consider how a picture needs to be cropped to look good on all devices. If you’re using a full-screen hero image, does it need to be cropped differently on mobile because phones are tall and computer screens are wide? Use our guide to choose the perfect hero image, and if you’re unfamiliar with the hero image trend, read about it in our website design trends.
  • As mentioned above, a good general practice is to avoid using filters from apps like Instagram and Snapchat. You want your pictures to look realistic, not artificially doctored. When used correctly, Photoshop can help your pictures look a lot better, but when overdone or used incorrectly, it can make your pictures look fake.
  • Consult some of our other tips — 4 things that make your website look unprofessional and Is your website outdated? — to ensure your photos look professional and up to date.

Comments