Using Visuals & Imagery to Improve Content Engagement
Learn about how thoughtful visual elements throughout your content can keep readers around longer—and make them convert
Using Visuals & Imagery to Improve Content Engagement
Learn about how thoughtful visual elements throughout your content can keep readers around longer—and make them convert
A lot of people still make the mistake of thinking of imagery last, even though it’s the first thing a reader sees
Director of Content at Intercom
We’re all about designing an exceptional reading experience at Setka, so that your blogs, posts, and pages can communicate effectively with users, be a powerful champion of your brand, and improve business KPIs. Our framework for great content design is based on 750+ PAGES of research and insights from the best in the industry and features step-by-step instructions for creating well-designed written work. In this step, we dig deep into using visuals and imagery on your pages to improve engagement and drive more people to convert—with help from some industry-leading experts along the way. Check out the full framework for insights that will help make your content easier to read, more engaging, and a better representation of your brand.
(with tons of design inspiration)
(with expert insights)
4.1. Start with a splash
Why Great Visuals Matter for Content
Great visual assets in your content do so much to help the reader have an enjoyable and informative experience.
For starters, most people point to how strong imagery can improve comprehension of the information at hand. Yes, visuals in your content—including photos, charts, illustrations, icons, animation, videos, and even simple elements like sidebars and pull quotes—can help explain a concept more quickly than text might. After all, our brains process images 60,000 times faster than text.
Plus, having visuals can improve how much of the information a reader will remember. According to John Medina, molecular biologist and author of Brain Rules, “When people hear information, they’re likely to remember only 10% of that information three days later. However, if a relevant image is paired with that same information, people retained 65% of the information three days later.”
Articles with images get an average of 94% more views than articles without
Conversion rates for companies using custom visual content are 7x higher
Stories with an image every 75-100 words get twice as many shares across social
But visuals go beyond supporting mere understanding and also improve enjoyment. Eye-catching images break up blocks of text, give the user an extra incentive to keep scrolling, and just generally make the reading experience more fun. All that adds up to higher engagement—for the reader, and for your publication.
“Strong visuals help show that you care and that time was spent to elevate your content, ” says Jennifer Newman, Senior Photo Editor at Hearst Digital Media. “You should have a visual asset every two paragraphs, which translates to a visual every swipe up on mobile; you’ll lose your audience otherwise. People just won’t read those long pieces if you don’t keep things interesting, and relevant imagery is also a value-add for professional publications because it boosts a brand’s visual identity as well.”
That’s right—your content imagery can also help give readers more exposure to your brand. By carefully crafting your visual style and keeping it consistent across your work, you can start to create more brand recognition across your work, and build positive associations when your content is helpful or interesting.
According to Lucidpress, presenting a brand consistently across platforms can increase revenue by up to 23%—and the visuals in your content is another opportunity to do that.
So how can you find the right visuals to support your content, your brand, and your readers? It’s all got to start with your story. There should always be an interesting and considered dialogue going on between your text and visuals, since readers tend to skip over images that are just there to fill up space. Think of what you could add that would improve the reader’s experience or make the piece more enjoyable to look at, rather than just stuffing a bunch of random stock images in to hit this quota.
And remember: “It’s not just about the subject, it’s about the experience, ” says Newman. Illustration or not, images should do just that—illustrate a story—in order to ultimately communicate a deeper message and evoke real emotion.
In our digital world, there’s virtually no limit to what an image can consist of and communicate. Artists across media and disciplines are creating more visuals than ever before, and with the tech and tools available today, plenty of options—as well as custom creations—are ever more accessible.
So, the next question is, how to best use them?
The Basics of Effective Visuals
There are various kinds of imagery online publishers can incorporate into their content efforts. Take a look at what they are and learn how to make them better—no matter what kind of media you’re working with.
Play around with digital collage and using photos as backgrounds when you need a visual element but don’t need to focus to be entirely on the picture. This can be an engaging way to integrate photography that isn’t completely necessary to the story at hand, so you can keep things visually interesting without distracting with random images.
With today’s abundance of quality, free stock photography, the medium is a favorite for content creators across industries. Large brands with bigger budgets may create original imagery and organize shoots, but no matter the source, powerful photos are a must when it comes to engaging audiences across the board.
Creative editors and designers will find that while standard photographs are rectangular in shape, it’s possible to crop or cut out figures and apply them to various backgrounds or frames, juxtaposed with headlines and other copy—or keep things simple. Stock photos can be edited to your heart’s content, from effective basics like cropping, flipping, rotating, as well as brightness and tint alterations to help make it feel more unique and on-brand.
Setka Editor paid plans include an integration with Unsplash, allowing you to browse over 850,000 free-to-use, high-quality, and authentic-looking modern stock photos right from the editor. Paired with built-in image editing and automatic mobile optimization, you’ll be able to find the right image and make it look perfect for your page, all from one place.
Branded artwork offers an eye-catching alternative to standard photography that helps weave a specific narrative for all kinds of readers and subject matter. Illustration also works to clarify complex ideas through the power of abstraction, while providing a more figurative approach to a topic or issue. Depending on the content at hand, a custom image can make a story more expressive, influence the way a reader interprets a piece, and even strengthen its overall message.
Like curated photography, it can make content feel fresh and modern, sleek and elegant, trustworthy and reliable, or any other sensation—simply based on style and selection. But “effective graphics and illustrations don’t just catch the eye, they help tell a story, ” according to NewsCred Insights. “Tech brands and beyond are experimenting, keen on the differentiation, clarification, and engagement digital illustration affords.”
“Bespoke imagery will always win over template-based imagery because it’s unique and closely tied to a brand’s visual tone of voice.”
Senior Art Director at NewsCred
Use icons to draw the eye to specific bits of text throughout the page. For instance, you have an icon that accompanies a specific type of sidebar throughout the page, such as one that designates tips or definitions. Or, you could use icons in place of bullet points on lists to add extra visual interest there.
Long before humans had written language, iconography and imagery were used to communicate. Today, these symbols can still be used to cultivate universal understanding and create cross-cultural meaning through metaphor—or literal pictorial representations. Today, icons can enhance a piece of content in a variety of ways, from organizing information and providing immediate, easy visual communication to simply adding a bit of decoration.
When a story deals with many figures, viewpoints, or other sprawling topics, icons can help keep facts straight and ideas clear for a reader—as long as you make sure that they’re on brand. When designing or ideating your own set of company icons, be sure to draw on any available brand assets, styles, or existing design elements like color palettes and typography. A standout font, for instance, can lend unique weights and proportions for icons that make sense to specific stories as well as for your overall brand identity.
The Noun Project—available via Setka Editor’s Style Manager—provides thousands of free, downloadable, and completely customizable icons that online publishers can use to enhance any kind of content. Between this integration and the ability to easily place them exactly where you want using the grid system, Setka Editor makes it easy to design micro-visuals to keep readers engaged.
Video and the use of GIFs and moving images have taken the world by storm since the rise of social media. According to Forbes Insight, 59% of senior executives prefer to watch video instead of reading text when both are available on the same page. A video, GIF, or moving image provides an eye-catching focal point, immediately drawing an audience in and directing them toward valuable content or CTAs. Tools like Setka Editor make it possible to embed all kinds of media, so take advantage, as research also shows that users spend 88% more time on websites that feature video.
“GIFs are a great way to immediately glue a reader’s attention, but keep them under 2MB—otherwise people won’t stick around waiting for the visual to load, ” says Setka’s Art Director Sergii Rodionov. “Use lighter GIFs and cinemagraphs as well, which animate certain parts of an image. This works to highlight a particular function, directing reader focus to important details.”
Custom animations also open up a world of possibilities for branding and visual interest. Learn more about this technique in our dedicated ebook on animations.
Want to add a little movement to your page but don’t have the budget for full animations? Setka Editor allows you to easily add micro animations to your page. For instance, you can have a static image or even piece of text zoom onto the page, flip, do a little hop, and more to catch the eye. Learn more about our animation options here.
Get playful with font style, color, and size, use of different backgrounds, incorporating icons and more for transforming text and really making it pop on the page.
Text as a Visual Element
Even if you don’t have the time or budget to create a slew of relevant and on-brand images to fill your content with, you can still engage readers scrolling down the page by getting creative and turning text into a visual element.
Choose some elements of your content that you think will be especially interesting for the reader, and play with ways to make them stand out in a visual way. For instance, a pull quote in a stand-out font can break up the text just as well as an image. A sidebar of additional information over a fun background can keep the eye moving down the page. Varying the color, size, and placement of certain text on your page can almost turn it into a sort of image in the structure of the page.
Setka Editor’s “snippets” make it easy to create visually-interesting text elements that you can use over and over again. Use these micro-templates to create stylized pull quotes, sidebars, numerical callouts, and more that you can easily pop into any piece of content. Learn more about snippets here.
Infographics have remained popular over the years, not just because of their shareability but also because of how easily they communicate complex information—and publishers are getting more creative with interactive data visualizations and more. Lines of numbers are hard to read, whereas colorful, creative graphs, charts, and other visualizations of various facts and statistics can draw a reader in and make sense of complicated ideas like words alone can’t do.
Infographics don’t always take the rectangular form many of us are used to seeing, but may also appear in-line within the margins or negative space of a story, where important numbers and key concepts can come to life as attention-directing graphics, animations, or other design elements.
Branding & Image Editing
Tips from experts at A&E Networks + Hearst Digital Media
Take a look around—most successful brands have a certain look when it comes to the images they post. They may follow a certain color scheme, subject matter, lighting choice, etc. Whatever it is, consistency is key. A&E Networks Senior Photo Producer Tracy Leeds and Hearst Digital Media Senior Photo Editor Jennifer Newman share their advice for editing images that stand out from the crowd and optimize the story and brand in question.
“When you’re putting together images for an article that readers will be scrolling through, you want to make sure that they’re all similar in composition—vertical or horizontal, and interrelated, ” Newman advises. “Diversify with close-ups and pulled back shots so that you’re providing a narrative with the images and mixing it up. Using a certain color all the way through works for this as well, while selective focus creates depth and makes for an easier read of the image.”
“Different lighting creates various moods, depending on visual identity and brand personality, ” says Tracy Leeds, Senior Photo Producer at A&E Networks. “If you’re a big publisher with multiple brands covering politics, for instance, how do you differentiate? Something like how hard the flash is can abstract an image and make it more dramatic and opinion-based, and it can also be a good way to set a certain tone that’s relevant to the context of the content at hand.”
“Tinting gives images a specific look and cues an emotional response,” Newman says. “It can also make photos look the same, so it makes sense for branding. If you have 10 different people submitting headshots, for example, it’s a way to string those images together with a narrative thread”
Your imagery choices can also be used to reflect your brand values. For instance, choosing visuals that show a wide range of diversity when it comes to race, gender, and identity can communicate your company’s commitment to representation and inclusion. Jennifer Hom, Experience Design Manager of Product Illustration at Airbnb explains:
“Our mission is to connect people across cultures and continents, so our illustrations have to reflect the community we’re bringing together. Our aim is to broaden our worldview, uplevel our authenticity, and continue building trust with our global community, and we can do this by building an illustration team that sings Airbnb’s mission of belonging.”
Example from Jennifer Hom’s article
“When you’re cropping for online articles, you have to crop for each different view—for the homepage view, the thumbnail view, and so on—making sure that you’re keeping the image itself in mind and how it’s going to look in each box, ” warns Leeds. “Consider the piece of content at hand as a visual whole, instead of separate elements. Photos should provide context and an environment for the story to live—and each image you choose should draw people in, prompting a click. Just take care not to cut someone’s head off or have them floating in the middle of a tiny thumbnail.”
Flipping and Rotating
In terms of photojournalism, Newman says: “I wouldn’t let any of my people flip an image, because it’s against editorial standards and changes the context of the shot.” But when it comes to editing creative stock photography, the sky’s the limit—and there are plenty of reasons for flips and rotations. When overlaying text onto a photograph, for instance, set alignments could necessitate a flip, while certain file transfers may require a rotation.
Keeping it Consistent
“I pre-make collections because it saves time down the road and is helpful for educational purposes, ” says Newman. “Sometimes it’s hard to explain to word editors what we’re looking for, and if they see two something, they might not get what we’re talking about. But if we show 10 of something, they can see a pattern begin to emerge.”
Best Practices for Outstanding Use of Visuals
4.1. Start with a splash
Now that readers are used to the standard cover image and headline format, it can help to get creative with how you use this space to stand out even more. For instance, you might play with an immersive, full-width cover image, digital collage, or something that includes a bit of animation to really catch the user’s attention.
You probably already know that the area “above the fold” on your page matters a lot to grabbing a user’s attention and enticing them to scroll further down the page. A critical part of optimizing this part of your content is including a relevant and visually-interesting cover image.
There’s a reason a large image with a header has become the industry norm for the top of a content page—researchers D Lagun and M Lalmas at the ACM International Conference on Web Search and Data Mining shared that users tend to stay almost twice as long on the first screen when the article starts with an image, compared to articles without an image on top. That’s why it’s important not to treat this element as an afterthought but to spend real time considering what best supports the story at hand, aligns with your brand, and will help this story stand out from other cover images on the web.
4.2. Keep the images coming regularly
If you’re struggling to come up with relevant imagery to fill up your page, one thing to play with is adding small design elements to your headers. This almost creates a mini cover image for each section of your article, and can include things like a patterned background, small photo of a featured expert, or key points outlined in a visual way to create something more interesting to look at than your standard header.
Too many publications just choose a cover image and stop there when it comes to their visual strategy. In reality, you should have images at regular intervals on the page to keep the reader scrolling down.
We’ve already mentioned it but it’s so important it bears repeating—you should be aiming for some type of visual element (even if it’s something small like a sidebar, pull quote, or numerical call-out), every 75-100 words (or about every swipe when you’re looking on mobile). And remember not to just stuff your page with random stock images to make this happen, but instead to consider what visuals will help highlight the information at hand or improve the reader experience.
4.3. Place images to keep the eye moving
Learn more about designing layouts that make your content easy to scan and understand with our dedicated ebook: Improving Content Comprehension With Layouts.
One approach to including images regularly is just to place full-width visuals sporadically down the page, such as after each section header, and call it a day.
A more interesting approach is to organize content and images using a grid so you can be a little more creative with your visual layout and surprise and delight your audience as they scroll down the page to keep them interested and curious what’s coming next. Using the grid as a backdrop, it’s easy to embed images and scale them to any size, from an author headshot thumbnail in a side column to a full-width or tiled shot that doubles as a background.
Of course, you don’t want to get too crazy. You still want to keep a unified and recognizable enough layout to support common scanning patterns and make sure readers don’t miss important information or give up trying to find what they’re looking for. But placing images more playfully within a well-structured piece can help it stand out from your typical web page.
Setka Editor users can easily integrate grids into their designs, creating layouts of 2 to 16 columns for a truly signature look and feel (no coding required).
4.4. Use smart images when appropriate
In addition to thinking about the visual design as you place images in your content, you should also be thinking about the user experience at every step. That means you should always be considering whether a visual works better as a static image or something a little more interactive.
For instance, embedding an Instagram or Twitter post rather than inserting a screenshot improves the user experience by making it easier for readers to learn more about or engage with the accounts you’re mentioning. Another common mistake in this arena is inserting a table as a pre-made image or screenshot. Instead, building the table directly onto the content page keeps it searchable for users who are seeking specific information, and also allows you to be sure it matches all page styles.
4.5. Visualize all your interesting data
Don’t have a whole bunch of data to visualize but still want the effect? Even a single key number of small set of stats can be visualized by increasing the size, using a different font or color, and setting it in a more prominent place on the page so it doesn’t get lost in the text.
Any time there’s data within your content—whether it’s a single stat or a whole study—you should be thinking of ways to visualize it. For one, this often helps users understand complex information that might be hard to digest as just a series of data points.
But beyond that, creating images out of your data gives you another excuse to add more visual elements down the page, therefore drawing the eye and upping engagement even more. According to NN/g, the eye already scans for numerals within content because of their differing shape, so why not emphasize that effect by making them stand out even more?
4.6. Visually highlight the most interesting content
Pull quotes—which used to be a tenant of print journalism—were lost for a while in the online era but are making a comeback as content creators realize that they’re an easy way to add visual interest.
Even with very few (or no) design resources, editors can select the most interesting quotes, place them on the page in a larger text, interesting font, or eye-catching color, and create something to break up the monotony of similar text. If you notice some places on your page that look a little visually empty, try placing a pull quote there and watch how it brings the page to life.
4.7. Use bullets for simple visual interest
Another simple way to break up the page visually is with bullet points. Not only does including a basic bulleted list require zero design resources, it draws the eye and helps prevent important information from getting lost.
As NN/g explains, “A few tiny dots attract the eye and can make a complex concept understandable. Readers perceive the bullets as shortcuts to succinct, high-priority content. It’s not surprising that, in usability studies, we observe readers gravitate towards bulleted lists with fervor.”
4.8. Don’t be afraid to be bold
Tiny bullet points have their place, but with some images, the bigger the better is the approach to take. When certain images are too small or crowded by text, their impact can get lost—on the flip side, an image that takes over the entire screen from edge to edge can be breathtaking. In one case study from Crazy Egg, redesigning a homepage using full-width imagery increased leads by 18%.
This doesn’t mean you should make every image gigantic—that can quickly get overwhelming. Instead, when you have a particularly striking image or one that’s especially relevant to the content at hand, let it take over and have maximum impact by playing around with full-width styling.
4.9. Check that your images are optimized for mobile
We’re sure you already do this, but before you publish any visual elements on your site, always make sure to check what they look like on mobile. Adobe shares that 73% of users say it’s important to their reading experience that the content displays well on the device they’re using, and according to WARC, almost three quarters of internet users are expected to access the web (and your content) solely by their smartphones by 2025.
You want your imagery to look just as good, even on a smaller screen, so take the time to check that every image scales down well, nothing ends up splaying off the screen or super tiny on mobile devices, and that any embeds work on mobile, too.
The Setka Editor makes it easy to ensure your page is optimized for mobile thanks to automated mobile layouts that scale your site down perfectly, the ability to set custom styling for mobile audiences, and an easy way to view mobile previews.
Want to keep these tips on hand?
Examples of Eye-Catching Visuals
When budget isn’t an issue, amazing content is a given. With unlimited access to its millions of images and videos to do with what they like, Getty Images’ online publishing and content marketing efforts naturally feature the best of the best of today’s editorial and creative stock photography. The leading stock image provider shows the world what its made of with Creative Insights, a blog for content creatives to “explore, refresh… and ultimately, find inspiration for your next great idea.”
The site and individual posts feature huge, full-width hero images that reveal the archive’s incredible range and quality, while highlighting trends and further first-rate images throughout to encourage further exploration. And with galleries like LGBTQ+ Travel, The Disability Collection, and Nosotros—focusing on the Latinx community—the company continues to stay on the forefront of representation and diversity. Their take? “It’s necessary to take risks, even if they may alienate some of your audience. It’s always good business practice to be progressive and assume that people are going to catch up.”
Even without a Getty Images account, anyone can use the company’s Boards feature to create mood and inspiration boards for imagery you might end up sourcing elsewhere. Alternative stock libraries that offer free, high-quality imagery include sites like Pexels and Unsplash, which Setka Editor users can access and browse from right within the interface.
Meditation and wellness app Headspace, which offers a “gym membership for the mind, ” uses illustration to demystify the practice and make it accessible to the general public. The brand’s visual style includes quirky colors and characters that remove gender and race and add a light-heartedness to otherwise complex and challenging topics. The company’s content destination The Orange Dot deals with subjects ranging from work and health to birth and death, and the custom imagery developed for each post provides a consistent look that speaks to many readers.
“We want meditation to be for everyone, so instead of using images of flowing water and forests, we always try to have a more grounded and relatable approach, ” says Chris Markland, the brand’s former Senior Creative. “Illustration has always been a really useful tool in breaking that down to people in an engaging, fun, and relatable way… We often say, ‘Who can hate a cartoon? ’ People are much more willing to give it their time.”
Slack’s recent redesign got a lot of press, and the company has been open about how their changes were fueled by the desire to create a cohesive visual identity — especially seeing as an inconsistent visual language was making it difficult for people to recognize their brand. After all, as they explained on their blog, “The important thing about being a brand is that whenever people see you in the wild, they should recognize that it’s you.”
With unique collages, textures, framing, backgrounds, and illustrations, the new look is much more dynamic and constantly delivers new ways to engage readers while still sticking to a consistent visual language. Responsive hover-over effects automatically engage users as they travel through a page, adding a graphic punch and helping highlight information. And by using a mix of techniques—like adding colorful shapes to frame selections when the cursor hovers over them, or greying out surrounding content—these visual tools add personality while making each link and CTA all the more clickable.
Incorporate imagery regularly
Hopefully you’ve gotten the, um, picture by now that images should be an integral part of your publishing strategy. Content can’t just be about the words anymore—you’ve got to have a strong visual strategy, too. Go beyond a compelling cover image and include eye-catching visuals down your entire page to keep readers scrolling and engaged.
Luckily for you, there are so many other things that can act as an “image” than just your average stock photography. From custom illustrations to data visualizations, stock photos that you’ve doctored up with digital collage to a simple but well-designed pull quote, getting creative with what you incorporate into your visual toolbox not only makes it easier for you to fill your articles with regular images, it also makes those images more interesting for the reader.
Carefully consider the story
Don’t walk away from this ebook and just start stuffing your articles with any images you can find. You want them to align well with the content you’re sharing so that readers don’t just zone them out. Carefully consider each visual you’re including to determine if it will help the reader better understand what they’re reading or make the experience easier (or more enjoyable).
Ready to take your layout to the next level? Use our checklist below to evaluate how you’re doing in terms of designing for optimal comprehension, and identify areas for improvement—or let us do the work for you! Reach out for a FREE CONTENT EXPERIENCE DESIGN SCORECARD and we’ll analyze your content design based on 750+ pages of research, providing tons of action steps for optimizing your content for comprehension and more, plus plenty of resources for convincing your team of the business value of better content design.
Imagery Scoring Checklist
- Page has a visual element (photo, illustration, visualized data, or other image) every 75-100 words
- Page has a relevant and visually engaging cover image
- Content and images are laid out across a consistent and visually-interesting grid
- Embeds are used where appropriate to improve user experience
- Tables are created directly within the grid, not by inserting a premade static image
- Data visualizations and data highlights are throughout the piece where appropriate
- Pull quotes appear throughout the piece
- Bulleted lists are used as needed
- Immersive, full-width images are used when appropriate
- All visual elements display well on mobile
Setka, the company behind Setka Editor, a WYSIWYG editing tool that helps content creators easily implement content design best practices without having to code. Thousands of brands, publishers and media players from around the world work with Setka Editor to enrich the reader experience and improve the ROI of their content, and it’s been recognized as one of 14 global WordPress VIP technology partners delivering innovative management and editing tools that easily integrate into any CMS.
Setka is on a mission to promote a data-driven approach to improving editorial design, and ultimately completely transform the experience of reading content on the web.