Articles with images get 94% more views than those without. But how do we make sure blog images meet the needs of different readers (and robots)?
I’ve written a few hundred blog posts for HIPB2B, having worked at the company writing blog posts nearly weekly (it used to be twice a week) for the last five years.
Most of these blog posts are something I read about for a reason. They help solve problems our team is working on. They investigate little nitpicky things I hope will improve our processes and posts.
I’ve decided to start sharing those processes with you as authentic parts of the articles we write. After all, we write these articles hoping to solve our problems, which means you’ll benefit from doing the same.
A place that could use some improvement on the HIPBlog is with the images we use alongside our H3 or H4 headers. It bothers me how repetitive the images are combined with the headers. Our images are also distinctly hard to read for those using accessibility tools and search engine crawlers.
The Problem
Beyond being redundant, these images don’t add tons of value. They also might be a little difficult or hard to read for those who use accessibility tools. First, let’s consider a series of best practices for images:
- Real text that is styled and formatted to fit your design is the best for accessibility tools and those using a zoom tool to read your page
- Images of text are hard to read for mobile users
- Images of text are hard to read for users with low vision – JPG and PNG often become blurry when scaled
- Screen readers lose track of lots of text in images, meaning a few words is okay, but beyond that the message gets garbled
- Image-specific Alt text improves image accessibility and SEO – <img src=”puppy.jpg” alt=”Dalmatian puppy playing fetch”/>
Let’s explore the different options we have for changing the way we create and publish images inside our blog posts.
Leave the redundancy
Many past and present HIPBlog contributors and editors have grappled with the redundant images issue. There are a few advantages to doing it this way:
- These are quick and easy images to make
- They include real text and a pop of color/visual interest
- The real text is good for accessibility
But the cons are the images are redundant and don’t add a lot of value. They’re also almost entirely without metadata, including alt text. But since the images often don’t add a lot to the overall value of a post, maybe it’s alright to keep the metadata blank.
Remove the images entirely
I don’t like this option. In the past, we only made a featured image and no other images. That means there was no redundancy, but our blog posts were just a single image, text, and headers.
That meant the post was less visually engaging.
We wanted more visually interesting content is why we implemented our current header image procedure.
Remove the text from the image
One way we can dispel our redundancy issue is to remove the text from the image and treat them more like color dividers more than anything.
This would also remove the need for Google or screen readers to need to read the images. Since they don’t add a lot of value, this could be an option.
I think that implementing this successfully would involve changing the size and shape of images to take up less space.
Put the text over an image
The easiest way to do this would be to put an image as a background in a text box. That means that:
- We only have to make one image for all the headers if the designer didn’t have time to make different ones
- The text itself would scale well
- We won’t always have to put metadata behind these images
Change the image strategy
This is the most difficult but likely the best value option. If we change our image strategy to contain more value and visualization, then we would eliminate the need for words and create more value. More valuable images make it more likely that your post will rank well on Google and be enjoyable to read.
It’s also the most difficult of the strategies, because not only are the images more work to create, they also require that all metadata is completed for both Google and accessibility tools.
Is it worth it? I’m sure, but it will take a massive change in our content creation process.
What option are we leaning towards?
I feel that implementation of a new image strategy would work best in steps:
- Audit our current images/posts with the Accessibility Developer Tool Extension for chrome
- Either use the images as dividers or backgrounds for text
- Find the skills for data visualization and better visual content creation
- Implement those skills to making better visual content and use the first trial runs to build better image creation processes
What do you think we should do? What have you done to integrate images into your post-creation process? How do you make them both accessible and SEO-friendly?
