Make an Online Photo Engaging: Tools and Rules to Help Edit Images
According to eye-tracking research, people actually look at online photos only 42 percent of the time, and the images they look at only hold their attention for less than a second. After extensive eye-tracking research, Jakob Nielsen and Kara Pernice concluded that there were clear factors that attract and repel online readers.
“There are some very creative, captivating images … graphics that evoke emotion, graphics that relay a message far better and faster than words, and graphics that illustrate a process or instructions. People look at and respond positively to these graphics. But generic and pointless images are about as compelling as a garden slug.”
When creating blog posts or web pages, images are a critical factor for both reader engagement and search engine optimization (think ethical ALT attributes and optimized file names). Readers love images. Photos draw them in and make them want to read the content. Pick up any magazine or newspaper and notice that every article and ad speaks to this. Photos can work to inspire a feeling or clarify a concept, and they can be useful in making a page more interesting just by breaking up the text.
There are hundreds of thousands of artwork options available online — but not all photos are created equally. If you want your images to have maximum impact, then consider these five factors when making your selection.
5 Factors to Consider When Choosing a Photo
Quality matters. One quick fix approach to improved aesthetic quality is increased contrast. According to eye-tracking research, people gravitate towards crisp images with high contrast.
You may have noticed when editing your own photos that dialing up the contrast nob using a simple image editor can improve the visual impact. Those images can be in color or black and white, so long as the contrast is stark.
“This is no reason to avoid black and white. Although a punch of color can attract the eye, a sharp black-and-white image can get a lot of attention as well. But shades of gray tend to have weaker contrast and attract the eye less,” wrote Nielsen and Pernice.
Also Consider File Types
Another important aspect of image quality is file type. Different types of images necessitate different types of files. Johnny Lin, web design manager at Bruce Clay, Inc., explains the use of .gif, .jpg or .png, depending on the image.
- Save your online image as a .gif when the image has details and more solid colors, as is the case with clip art and most logos
- Save as a .jpg extension when using a standard photograph
- Save as a .png when the image has transparent shadows or multiple layers
Any pixelation is too much pixelation. Make sure the photo you’re using is large enough for the space. That being said, you also have to be mindful that the photo is not too large. Because file size affects page load time, it’s important to keep file sizes as minimal as possible without sacrificing quality, i.e. if you have a file that is 4 MB, you can safely shrink it. Even if you’re using it for a banner image, it’s unlikely that the photo would ever need to exceed 100 KB.
You can reduce an image’s size in any photo editing software — or even Microsoft Paint. In Microsoft Paint, for example, choose the “Resize” option at on the toolbar (which also comes up when you hit Control-W). From there, you can reduce the photo by percentage or pixel. Make sure to select “Maintain aspect ratio” or you will skew the photo.
Also Consider DPI
When it comes to dots per inch (DPI), Lin recommends always keeping your DPI between 72 and 96 for online photos.
Eye-tracking research indicates that people prefer to look at images that are easy to understand. If the photo is too busy, then readers don’t really look at it. Select pictures that have a clear focal point.
You can use photo editing software to create your a focal point if you’ve found (or snapped for yourself) an image with a background that’s too busy. In addition to professional software like Photoshop, you can also create focal points and adjust depth of field with free online software like Pixlr Express (using the Focal tool).
4. The Subject
The actual content of a photo matters — not all subjects are created equally. Action shots are better than posed photos; when possible, get a photo that shows people mid-action. When you use a photo that captures the moment, you capture your audience.
People as subjects are also a strong choice. In “Content Marketing Strategies for Professionals,” Bruce Clay and Murray Newlands state that “the best subjects are faces smiling, or (as in the above factor) people or things in action that capture a sense of the moment … People are more likely to have a positive impression of a (brand) if there is a person alongside it.”
Are you taking photos at events and gatherings? When your team gets together for a birthday or happy hour, is someone on camera duty? Not everyone likes to be be a photographer, but there’s a good chance there’s an amateur photographer or two among you, people who actually like capturing special moments. If your boss is making a presentation, then reach out to someone you know in the audience to see if they could take a few photos and send them to you. Think of every public outing as a photo opportunity and grow your image library of people in your organization from which you can pull pictures when you need them.
The image should complement the content, not detract from it. Nielsen and Pernice found that “many images that appear on pages are simply not related to the main ideas the page is trying to convey, and users ignore or barely look at them. People look at unrelated or somewhat related images just 14 percent of the time … Users look at images that are related to content about twice as often — 29 percent of the time.”
A photo should exhibit all of the above characteristics (action, people, quality, focus, and clarity), but if it’s not relevant to the content it supports, then it doesn’t belong.
Sometimes you have to get creative when it comes to relevance. Paula Allen recently wrote an article on “The State of SEO in Europe.” “SEO in Europe” is not exactly something you can just search for on a stock image site and get a result. At times like these, you need to think outside the box to find a photo that works. Allen chose this photo of a train station in Milan and used a text overlay to create relevance. The text she added makes the photo not just about Europe, but about SEO in Europe.
Another option when you’re stumped for finding a photo is creating a grid. In an article promoting Bruce Clay’s latest book, “Content Marketing Strategies for Professionals,” special attention was paid to each of the twelve expert contributors. We didn’t, however, have a photo of all twelve of them together — so we created this collage, and voila: relevant image.
What tricks and tips do you have when it comes to making an online photo engaging? Share them with us in the comments!
9 Replies to “Make an Online Photo Engaging: Tools and Rules to Help Edit Images”
I want to find a tool to help me convert ordinary photos into pixel art.
Here are a few tools you might want to try:
Really very useful article because before i read your article, i wasn’t able to edit images, but after reading your article i got full picture of it and i will apply what you have said.
Thanks for this article! I especially appreciate the 100kb file size. I’ve been working on a fashion blog and finding the right mix between speed and quality for images across different screen sizes, devices and social platforms has been tricky. Still looking for the perfect medium, but your article helped. Thanks!
Kristi, good article! Are there any cool web tools besides the one you mention (Pixlr Express) that can help with finding and quickly editing images? I recently ran into Canva, but you or your team might know and use others. Please share! Thanks for the article!
I’m a big fan of Haiku Deck for adding text overlays. Another option besides Pixlr is GIMP, which is a free, downloadable alternative to Photoshop. Happy editing! :)
Mac Retina display changed 72 / 96 DPI rule.
I created a Web gallery using Make WordPress theme yesterday, using images with 256 DPI. That’s what Make used on their demo. Looked great on my Mac.
Yes — Apple devices with Retina displays are able to present images at resolutions higher than 72 DPI, but most other displays still use 72 DPI, hence our recommendation.