Working with images in WordPress

Uploading images to WordPress web pages, it is important to note that while larger file sizes result in clearer images, they are slower for the browser to load and will effect the website’s performance.

Keep this in mind when exporting your images (don’t just export the biggest size possible).

Preparing images for use in your web page

Choose the right file name

Image SEO starts with the file name. You would like Google to know what the image is about without even looking at it. So, use your focus keyphrase in the image file name. It’s simple: if you’re writing an article on Notre Dame and use an image showing a sunrise in Paris over the Notre Dame Cathedral, the file name shouldn’t be DSC4536.jpg. A proper file name would be notre-dame-paris-sunrise.jpg. That way, the photo’s main subject (and perhaps your article) is at the beginning of the file name.

Choose the right format

For images, the right format doesn’t exist. It depends on the kind of image and how you want to use it.

Consider the following when choosing the image format:

• Choose JPEG for photos or illustrations. It will give you good results in terms of colors and clarity with a relatively small file size;
• Use SVG (this format preferably for logos and graphs ) or PNG if you want to preserve background transparency in your image;

Scale for image SEO

Loading times are essential for user experience and SEO overall. The faster the site, the easier for users and search engines to visit a page. Images significantly impact loading times, especially when you upload a huge image to display it small. For example, a 2500×1500 pixels image displayed at 250×150 pixels size.

Even if it is displayed a lot smaller, the entire image still has to be loaded. So, resize the image to the size you want to display it. WordPress helps you do this by automatically providing images in multiple sizes after uploading them. Unfortunately, that doesn’t mean the file size is also optimised; that’s just the image display size. So think about the size in which you upload your images!

Reduce file size

Another important consideration when working with images and for SEO, is to ensure your scaled image is compressed. That way, it’s served in the smallest file size possible. It is good to know that WordPress does compress the images you upload. But, unfortunately, this automatic compression often isn’t enough to rely on it alone.

Website image sizes and templates

Working with images on the website, you need to save the images to 1 of the 3 sizes.

Header banner

For the wide heading banners, resize image to 500px high X 1600px wide.
Optimise the image to 100kb – 150kb max.

Featured image

Each page or post you create needs a Featured image. Upload this from the right sidebar in the post / page admin – see screenshot image on the right.

The featured image is used when the page is shared on eg. social media.
The image size is 1200px wide X 630px high.
Make sure to use a high-quality image, like the original image you used in the post, as social platforms often use higher quality/larger images.

OpenGraph and social sharing

Yoast SEO has a Social media appearance section where you can also set a different / custom image for social sharing. See here how you can preview your social posts.

Card Block image

These image are used when you create Custom content cards in the Card Block.

The image size is 800px wide X 550px high.

Team Member Block image

Use this Canva template to save an optimised image size for the Team Member block.

The image size is 350px wide X 420px high.

Saving website images with Canva templates

• Select the template you need to use.
• Click on the ‚Use this template‚ button.
• Click at the top right of the screen on Share > Download > Choose File type: JPG > Quality between 60 – 80 (depending on the complexity and size of the image).

Check that image is not bigger than 200kb.

If so, then readjust the quality slider.

Adding the image to your article

alt text

The alt text (or alt tag) is added to an image, so descriptive text will be in place if the image can’t be displayed to the visitor for any reason. We can’t put it any better than Wikipedia:

“In situations where the image is not available to the reader, perhaps because they have turned off images in their web browser or are using a screen reader due to a visual impairment, the alternative text ensures that no information or functionality is lost.”

The alt text is there to enhance your website’s accessibility. So be sure to add alt text to the images you use. Also, consider including the SEO keyphrase for that page if appropriate. Do not stuff the alt text of every image with keywords. Most importantly, please describe what’s in the picture so search engines and people can understand it. The more relevant information surrounding an image, the more search engines deem this image important.

However, please remember that not every image needs an alt text. Instead, consider alt text as a part of your content and add it where it makes sense. For instance, if you have an image purely for decorative reasons, then that image doesn’t need an alt text. In this case, having an alt text doesn’t bring any value to your readers. On the other hand, if you use an image with a statistic, let’s say – the number of people who searched for ice cream last month, then this should be reflected in the alt text. You can find guidance for alt text in this W3’s article.

Image SEO: summary

Image SEO is the sum of a number of elements. With search engines getting better at recognising elements in images every day, it makes sense to make sure the image and its elements contribute to a good user experience as well as SEO.

In summary, keep the following key image criteria in mind:

1. Use a relevant image that matches your text.
2. Avoid text on / part of the image.
3. Pick a good file name for your image.
4. Make sure image dimensions match the image size as displayed.
5. Reduce file size for faster loading.
6. Add a caption, if appropriate, for easier scanning of the page
7. Use image alt text. No need for Title text.

Sources and further image SEO reading:

https://blog.hubspot.com/marketing/image-seo