Avoid These Common Mistakes Adding Images to WordPress

The Challenge

I work with a lot of images everyday. I haven’t always followed best practices when inserting images into my WordPress posts and pages. The reason? It takes time to do it right and sometimes I was just in a hurry. This past year, I’ve done a lot of research on how to properly utilize images in WordPress. My goal is to improve accessibility, performance and SEO. I’m making an effort to clean up the past mistakes I’ve made and share what I’m doing going forward. Here’s what I’ve learned.

Image File Sizes

Do not upload huge image files – images that are several megabytes in size should be optimized for the web before you upload them into WordPress. This will decrease page load times making your site more mobile friendly. Google now ranks sites on how mobile friendly they are – serving those up first to mobile viewers.

Optimizing Images

I use Photoshop to batch process my images before uploading them to WordPress. There are numerous programs and utilities that can help you do that. I wrote a blog post with a video tutorial on how to batch process images using Photoshop.

EWWW Image Optimizer is a plugin for WordPress, that can optimize all your images in a batch operation from your WordPress Dashboard. The paid version yields better results than the free version.

Update: I now use Imagify – made by the same company that makes WP Rocket.

Japanese Garden with arched bridge — Beautiful manicured Japanese garden with mature Japanese Maple trees surrounding a pond with two wooden arched bridges and a stepping stone path.

Titles, Alternative Text, Captions…

Once you upload an image to WordPress, you’ll see a few fields to fill in with information; title, caption, alt text, and description.

Insert Image Attachment Detail Screenshot

The one field that is required isn’t the most important.

When an image is attached to a post or page in WordPress, the title is used as the title for the attachment post. It is the only attachment information required by WordPress. When you upload an image, the title defaults to the name of the file – but you really should change that to something descriptive. That title tag will come in handy when searching the media library because you can search for words in the title.

By default the most important one is left blank – the Alt Text (Alternative Text) field.

DO NOT LEAVE THIS BLANK. This field describes to search engines and screen readers – what the photo is about and how it relates to the content.

Remember, search engines are blind. They can not “see” your images. You need to tell them what the image is of, especially if it adds value to the content. The Alt Text also serves as a placeholder, if for some reason the image does not load.

Here is an opportunity to boost your SEO by putting in a relevant information about the image.

What you enter depends on how you are using the image.

If the image is display actual texting or important data enter that text exactly.
If the image is relational to the content such as an image of a flower you are writing about, then describe what the image is of.
If the image is a link to a url, such as a logo, then say where the link will take you.
If the image is purely decorative and adds no value to the content, leave it blank.

Example:

Your post is about a new Japanese Garden in the area, your Alt Text for the photo of it might be “Japanese Garden with arched bridge in My Town USA”. Including a location in the Alt Text is helpful when building local content.

You do not need to use the phrases “image of …” or “photo of…” to describe the image. That’s redundant. Search engines and screen readers already know it’s an image. However, if it conveys an emotional context or interpretation then mentioning that would be helpful. For example, a head shot that is a caricature. Mentioning that might serve to convey a sense of attitude about the person. That information would not be conveyed if you simply entered the person’s name.

Captions describe the image when it may not be clear from the content what the image is of. It should be different than the Alt Text. It is visible to readers and is useful if you’re not mentioning those details within the content.

The Description field is for displaying additional information on the attachment page. Not all themes support attachment pages. Unless you have a specific reason for using attachment pages, just leave this blank.

Choosing the Media Size

Choose a file size that fits the area in your text. Images automatically scale in a responsive design so a large image works well if you want the image to fill the content area horizontally. Medium images are good for left aligned or right aligned images inside the content. Images sizes are theme dependent, so your mileage may vary.

My Takeaway

Finally, I know I’ve got a lot of work to do on several of my websites regarding images. If I could sum up the main takeaway here – if you were reading your website to someone who could not see it:

How would you describe the images on the page and would that help them understand the content better?

If you’re just starting out, then doing things properly will serve you well going forward. If your site is full of images that need to be updated, then make a point to start working on that now. It can vastly improve the accessibility of your site, page load times and SEO.