Learn to customize your own blog with confidence

Code it Pretty is an archive of tutorials from 2012-2015. Tutorial details may be outdated. More Info

Three Image Mistakes Bloggers Make

3 blog image mistakes

No, this isn't about choosing ugly pictures or failing to credit photo sources! Those are both big mistakes, for sure, but today we're going to talk about some less-obvious errors that can be equally bad for your blog.

1) "Writing" Your Post With Images

Now that Pinterest is the biggest thing since Facebook, bloggers are looking for ways to make their content as Pinnable as possible with eye-catching images. However, in an attempt to go image-heavy, some bloggers are burying important text in images. Here's an example of what I'm talking about (identifying details blurred to protect the well-meaning blogger):

blog post made up entirely of images with no alt text or descriptions

These pictures are the entire post. There is no text in the blog post other than the text in the images. This post is an extreme example — it doesn't even have a written title.

I found this blog through a heavily-repinned photo on Pinterest, so it did meet its presumed goal of being Pinteresting. But, oh boy, is it ever an accessibility and SEO disaster! For a quick glimpse of what's wrong with this picture (literally), let's take a look at the information a visitor with visual impairments would get from this post. Here's a screencap of this post as read by Fangs, a Firefox plugin that emulates a screen reader's output of a website. Again, I've blurred out information that could identify the blog.

screen reader results from an all photo blog post

Notice that Fangs doesn't "see" any of the text in the images. This all-image post would make a screen reader say a series of disjointed keywords to a visitor with visual impairments, and that's all.

That's bad enough, but here's another important consideration: that text isn't available to search engines, either. A search engine crawler would find a random arrangement of keywords in this post, just like the screen reader did. At best, the search engine would consider this "thin content". At worst, it would consider it spam.

There's nothing wrong with an image-heavy approach to blogging if it's done right. Striking images are wonderful, especially for wedding and craft bloggers, whose fans adore photos and arrive though highly visual sources like Pinterest or Stumbleupon. But you've got to remember that your human visitors all have different needs, and NONE of your robotic visitors have eyes.

If you've been hiding text in images, there are two things you can do to fix it. You could write out the text from each image as captions or in paragraphs below the photos, or you could enter the text of each image as alt text.

Not familiar with alt text? Then you might be guilty of image mistake #2.

2) Neglecting Alt Text

Even if you're not "writing" your posts in images, you might be neglecting your images' alt text, and that's a shame! Alt text assists visitors with visual impairments, provides valuable information about your images to search engines, and makes your images findable through visual search engines like Google Image Search and Bing Images. It also helps makes your site more useful to visitors on very slow connections.

Wordpress does a great job of encouraging you to put something in the alt text for your images; when you upload an image through the Wordpress media uploader, you're presented with this screen.

screenshot of the Wordpress media uploader

Whatever you type into the "Alternate Text" field will become the image's alt text. Easy as pie.

If you use Blogger, you'll need to take a little more initiative to provide alt text for your images. After you've uploaded a photo, switch to HTML view by clicking the HTML button above your post field...

Update!

Just a few days after this post originally went up, Google released a whole bunch of new updates to Blogspot, including an easy way to add alt text to images. Full details on Blogger Buzz.

Your images now make more sense to the whole Internet. Hooray!

3) Forgetting About Color Vision Differences

a red heart with black text that reads: not everyone can read this text

Color perception varies from person to person, and some color combinations in particular are hard for many people to see. If you have "normal" color vision, you may not realize that your favorite color combination is hard to read or totally invisible to others. For example, black text on a red background is invisible to some people with red vision deficiency (this is a color combo I see A LOT in graphics on wedding blogs).

There are some great resources online for learning more about color vision differences. Penn State University's AccessAbility site has a helpful rundown of common color combinations that are difficult for color deficient viewers to perceive. You can also use online tools to simulate the different types of color perception to test out color combinations before you run with them on your blog. Check out Color Vision for a cool color palette picker that can help you find color combos that are universally viewer-friendly. You can also view a simulation of how your site looks to people with different types of color vision deficiencies at Colorfilter.

Do you know of any blogging image trends that are really big mistakes? Let me know in the comments!