Use HTML image elements to embed images in your content.
Use the HTML <img> or <picture> elements
Semantic HTML markup helps crawlers find and process images. By using the <picture> element you can also specify multiple options for different screen sizes for responsive images. You might also use the loading="lazy" attribute on images to make your page load faster for your users.
Avoid:
Using CSS to display images that you want us to index.
Use the alt attribute
Provide a descriptive filename and alt attribute description for images. The alt attribute allows you to specify alternative text for the image if it cannot be displayed for some reason.
Why use this attribute? If a user is viewing your site using assistive technologies, such as a screen reader, the contents of the alt attribute provide information about the picture.
Another reason is that if you’re using an image as a link, the alt text for that image will be treated similarly to the anchor text of a text link. However, we don’t recommend using too many images for links in your site’s navigation when text links could serve the same purpose. Lastly, optimizing your image filenames and alt text makes it easier for image search projects like Google Images to better understand your images.
Use brief but descriptive filenames and alt text
Like many of the other parts of the page targeted for optimization, filenames and alt text are best when they’re short, but descriptive.
Avoid:
Using generic filenames like image1.jpg, pic.gif, 1.jpg when possible—if your site has thousands of images you might want to consider automating the naming of the images.
Writing extremely lengthy filenames.
Stuffing keywords into alt text or copying and pasting entire sentences.
Supply alt text when using images as links
If you do decide to use an image as a link, filling out its alt text helps Google understand more about the page you’re linking to. Imagine that you’re writing anchor text for a text link.
Avoid:
Writing excessively long alt text that would be considered spammy.
Using only image links for your site’s navigation.
Help search engines find your images
An Image sitemap can provide Googlebot with more information about the images found on your site. This increases the likelihood that your images can be found in Google Images results. The structure of this file is similar to the XML sitemap file for your web pages.
Use standard image formats
Use commonly supported filetypes; most browsers support JPEG, GIF, PNG, BMP and WebP image formats. It’s also a good idea to have the extension of your filename match with the file type.
Make your site mobile-friendly
The world is mobile today. Most people are searching on Google using a mobile device. The desktop version of a site might be difficult to view and use on a mobile device. As a result, having a mobile ready site is critical to your online presence. In fact, starting in late 2016, Google has begun experiments to primarily use the mobile version of a site’s content for ranking, parsing structured data, and generating snippets.
