How to Optimize Images in WordPress for SEO & Accessibility

I'm going to show you how to optimize your images in WordPress for SEO and accessibility. Optimizing images for SEO (search engine optimization) contributes towards the SEO of your page and site. Optimizing images for accessibility makes it easier for the visually impaired to understand the images you're using even though they can't see them.

Here's a brief video. Below that is a detailed description of how and why to optimize images.

Give image descriptive file name

On your computer, give the image a descriptive name, with spaces between words. Google's Image publishing guidelines say,

The filename can give Google clues about the subject matter of the image. Try to make your filename a good description of the subject matter of the image. For example, my-new-black-kitten.jpg is a lot more informative than IMG00023.JPG.

Reduce file size by resizing and compressing image

It's important to reduce the file size of images because 40% of people abandon a website that takes more than three seconds to load (Search Engine Journal), and a slow website could lower your Google ranking (Search Engine Land).

To resize an image is to change its dimensions (width and height). To compress an image is to remove data from the image to reduce its file size without changing its dimensions.

Which dimensions and sizes are right for your images will depend on how you’re using them. We often use 1024 px × 1024 px for images that will be within post and page content, and aim for a maximum file size of 200 KB. You may need larger images if they need to be higher quality, such as product photos or as part of your site’s design. If you're concerned about high-density displays, you may want to use 2048 px.

There are many tools for resizing and compressing. Photoshop can resize and compress. On Windows, use the Photos app, or look at Paint.NET and RIOT (link to .exe installer). On Mac OS X, look at Preview and ImageOptim.

There are also WordPress plugins that will do this for you automatically. Check out Imsanity plugin automatically resizes, compresses images.

Set Title attribute in WordPress

WordPress will automatically set the Title attribute to the filename (minus the extension, such as .jpg). So, if you gave the image a descriptive name as described above, you should be all set. Google's Image publishing guidelines say, "we recommend providing good, descriptive titles … for your images."

Screen readers might read the image file name or the URL of the page being linked to, which may or may not be useful.

Set Alt Text attribute in WordPress

Since you already have a good Title (which came from the filename), you can copy the Title and paste it as the Alt Text. Then, adjust it if necessary. If you don't put anything in the Alt Text, WordPress will automatically use the Title attribute as the Alt Text.

Google's Image publishing guidelines say that alt text is important for SEO and accessibility. For SEO because,

It provides Google with useful information about the subject matter of the image. We use this information to help determine the best image to return for a user's query. … focus on creating useful, information-rich content that uses keywords appropriately and in context.

For accessibility because,

Many people-for example, users with visual impairments, or people using screen readers or who have low-bandwidth connections—may not be able to see images on web pages. Descriptive alt text provides these users with important information.

WebAIM's page on Alternative Text says that alternative text serves several functions:

It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities.
It is displayed in place of the image in browsers if the image file is not loaded or when the user has chosen not to view images.
It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.

Attachment details in WordPress

Here's how the image's attachment details should look in WordPress:

WordPress image attachment details

Further reading

This post's featured image by philhearing.

Conclusion

What questions or tips do you have about optimizing images? Leave a comment.

Contact OptimWise if you need help optimizing the images in your WordPress site.

Filed Under: 
Tagged With: , , ,

Want tips to rocket-boost your website?

Simply sign up.

11 comments on “How to Optimize Images in WordPress for SEO & Accessibility”

  1. These are very essential and should be learned and practiced by WordPress users if they want to make it big SEO-wise. Not only that it helps them but also, it makes their sites look good in the eyes of Google.

Ready to Blast Off?

Let's talk.

Contact OptimWise
crossmenuarrow-right