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. In short, we recommend to:
- choose JPEG for larger photos or illustrations: it will give you good results in terms of colors and clarity with a relatively small file size;
- use PNG if you want to preserve background transparency in your image;
- or, use WebP instead of JPEG and PNG. It will produce high-quality results with smaller file sizes. You can use tools like the Imsanity or Squoosh to convert your image into WebP
- use SVG for logos and icons. With the help of CSS or JavaScript, you can manage images in SVG format, for instance, resize them without loss of quality
If you know a large part of your audience uses specific browsers or devices, make sure to check whether your preferred format is supported by those browsers on CanIuse.com.
Scale for image SEO
Loading times are important for UX and SEO. The faster the site, the easier it is for users and search engines to visit (and index) a page. Images can have a big impact on loading times, especially when you upload a huge image to display it really small – for example, a 2500×1500 pixels image displayed at 250×150 pixels size – as the entire image still has to be loaded. So resize the image to how you want it displayed. WordPress helps you do this by automatically providing the image in multiple sizes after uploading it. Unfortunately, that doesn’t mean the file size is optimized as well, that’s just the image display size. So think about the size in which you upload your images!
Use responsive images
This one is essential for SEO as well, and if you’re using WordPress it’s done for you since it was added by default from version 4.4. Images should have the srcset
attribute, which makes it possible to serve a different image per screen width — this is especially useful for mobile devices.
Reduce file size
The next step in image SEO should be to make sure that your scaled image is compressed so it’s served in the smallest file size possible.
- Use tinypng.com for image compression on .jpeg and .png file formats. Especially useful for screenshots
- The Imsanity plugin stops insanely huge image uploads.
- When a contributor uploads an image that is larger than the configured size, Imsanity will automatically scale it down to the configured size and replace the original image.
- This plugin is ideal for blogs that do not require hi-resolution original images to be stored and/or the contributors don’t want (or understand how) to scale images before uploading.
Aspect ratio
If you’re having trouble getting your images to line up because they’re all different sizes, you will have more success if the images are all the same aspect ratio. Here is a great article explaining aspect ratio. https://www.shutterstock.com/blog/common-aspect-ratios-photo-image-sizes.
Captions
The image caption is the text that accompanies the image on the page — if you look at the images in this article, it’s the text in the gray box below each one. Why are captions important for image SEO? Because people use them when scanning an article. People tend to scan headings, images and captions as they scan a web page. Way back in 1997, Jakob Nielsen wrote:
“Elements that enhance scanning include headings, large type, bold text, highlighted text, bulleted lists, graphics, captions, topic sentences, and tables of contents.”
In 2012, KissMetrics went even further, stating that:
“Captions under images are read on average 300% more than the body copy itself, so not using them, or not using them correctly, means missing out on an opportunity to engage a huge number of potential readers.”
Do you need to add captions to every image? No, because sometimes images serve other purposes. Decide whether you want to use yours for SEO as well or not. Bearing in mind the need to avoid over-optimization, we’d say you should only add captions where it would make sense to the visitor for one to be there. Think about the visitor first, and don’t add a caption just for image SEO purposes.
alt
text and title
text
The alt
text (or alt tag) is added to an image so there will be descriptive text 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.”
Be sure to add alt text to every image you use, and make sure the alt text includes the SEO keyphrase for that page (if appropriate). Most importantly, describe what’s in the image so both search engines and people can make sense of it. The more relevant information surrounding an image has, the more search engines deem this image important.
When hovering over an image, some browsers show the title
text as a ‘tooltip’. Chrome shows the title text as was intended. Title text for images is similar and a lot of people who use titles simply copy the alt text, but more and more people leave them out altogether. Why is that? Here’s Mozilla’s take:
“
title
has a number of accessibility problems, mainly based around the fact that screen reader support is very unpredictable and most browsers won’t show it unless you are hovering with a mouse (so e.g. no access to keyboard users).”
It is better to include such supporting information in the main article text, rather than attached to the image.
Read more: Read more about alt tag and title tag optimization »
Add image structured data
Adding structured data to your pages can help search engines display your images as rich results. While Google says structured data doesn’t help you rank better, it does help to achieve a more fleshed out listing in Image Search. There’s more, though. For instance, if you have recipes on your site and you add structured data to your images Google can also add a badge to your images showing that this image belongs to a recipe. Google Images supports structured data for the following types:
- Product
- Video
- Recipe
Source: Much of this article is sourced from https://yoast.com/image-seo/#always