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 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. http://webaim.org/techniques/alttext/
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:
- Image publishing guidelines (Google)
- 10 Must Know Image Optimization Tips (Shopify)
- How to Optimize Images for Better Search Engine Rankings (DIYthemes)
- Image SEO Optimization – Improve your search rankings (Mad Lemmings)
- Optimizing images for SEO (Yoast)
- Alternative Text (WebAIM)
- Informative Images (W3C)
This post’s featured image by philhearing.
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.