Thoughts & Articles
Photos Matter: 7 Tips for Sharper Website Images and Design
Marketers spend a lot of time talking about content as a kind of end result — meaning the whole of the story that's being told, the message that a brand delivers. Within that end product, however, in every example of compelling content, there are key components. And one of those components is the photo.
The images we use to illustrate, enhance and even generate the core ideas of our websites demand at least as much attention as the writing and calls to action that can drive conversions. Miss out on the chance to make your online visual landscape the best that it can be, and you're missing opportunities to engage your audience.
Luckily, getting to a better-looking site is a task with which designers and site owners are engaging all the time. Reaching out to them, we've culled seven steps toward sharp image-based design. Read on, and start thinking about your own approaches to photos and layout.
- Size for the user's reality. File size can be paramount, especially when everyone's point-and-shoot is able to take 3,000-by-2,000-px, 3–5MB photos and an increasing amount of website traffic is mobile. "Most of the time your viewers don't want or need to view a photo that large," said Raymond Selzer, co-owner of Interslice Designs, a firm that helps develop brands. "The average computer user has a monitor around 1,400-px wide, larger monitors average around 1,920-px. With this in mind you can save a lot of file size by resizing your photos to a maximum 1,900–2,000-px wide." If you still insist on offering the full resolution image, provide an extra download link, so at least the high resolution image doesn't load automatically for every user.
- Strike the balance between quality and file size. "Often photos are saved at their original resolution and quality which is unnecessary," said Gerald D. Vinci, owner and author at Vinci Designs. "Using a photo-editing program you can usually set the quality to around 70% of the original 100%. This will still give you a clear and crisp photo but will greatly reduce [load times]. Photoshop for example, in the save-for-web settings, allows you to play with the quality and see the file-size results right in the save window."
- Never 'size up'! As a newspaper designer once told your humble blogger — you can't add information to the image. A .jpg file (and a .png, for that matter) is rasterized, meaning that it has only so many pixels of information per inch. Enlarging it will create a fuzzy effect: pixelation sets in. Bottom line is, you can size and image down but not up.
- Arrange images with equilibrium in mind. "Image placement within websites should be about balance and equilibrium," said Leon Roy, graphic designer at Bring Digital, a marketing agency. For example, try three images in a row with equal spacing between them. "Or just two," Roy suggested, "again with equal spacing and the equivalent amount of text in the third position, where the photo would be."
- Your photos and text can create interactive context. If you want to draw attention to something on your website, use visual cues by having the subjects in your images positioned so that they’re looking or pointing towards the most important detail on the page. "Humans naturally follow sight lines of others, even in images," noted Kim Herrington, founder of Bear & Beagle Creative, "and this can help direct viewers’ attention to where you want it to go."
- Keep stock photos to a minimum. "I know it's easy, you can just buy them on the fly and they look great, but they also look incredibly fake," said Gael Breton, co-founder of Authority Hacker (a consultancy helping owners to build expert-level content on their websites). And, he adds: "Nobody thinks people in your company are that good looking."
- Approach visuals differently, desktop to mobile. Finally, remember that the mobile experience can be more sensitive to load times than that of the desktop. Don't burden your potential customer's device with too many images — it can lead to a slowdown, which leads to a bounce, and that's an anti-conversion kind of event.
And so, go forth and bone-up on your photo work and layouts, getting your pages into fantastic visual shape. When you think you've got your site just right, send us some examples. We'll include the best submissions in a future best-of article — showcasing stellar designs, images, and content that your site interweaves.
Managing your business is hard enough. Managing your website should be easy. Slab offers high quality, custom designed, easy to edit websites. Talk to us about building your site, one that you can update yourself with ease. E-mail email@example.com, or call us at 617.566.3433.