DEV Community

Vikram Sharma
Vikram Sharma

Posted on

10 Image SEO Tips for Devs

As devs we don't care about SEO. But the client does. Almost all clients I worked with want their web-apps to be SEO friendly. Every time I reach that stage of the project where I have to make the images look "snack" to Google I have to do a Google search. So this post is a reference to save my future self the trouble of Googling. Here is a list of features a web-app must have to make the image SEO friendly.

  1. Option to name the image - The image should have a relevant name. There should be an option naming the image at the time of uploading it.
  2. Option to add alt text - Helps the screen readers.
  3. Option to add a caption
  4. Option to add a title - For sitemap (see point number 7)
  5. Format conversion to JPEG, PNG, and WebP
  6. Image resizing - Option for resizing the image to different widths. This will help the web-app to serve responsive image (see point number 9). Defaults used by Wordpress are a good starting point. Wordpress resizes every uploaded image into the following formats
    6.1 Thumbnail 150px by 150px
    6.2 Medium - Longest size is resized to 300px
    6.3 Medium Large - Resized to 768px wide
    6.4 Large - Longest size resized to 1024px
    6.5 Full - Original sieze

  7. Images should be added to image sitemap.

  8. Minify SVG files. https://github.com/svg/svgo

  9. Serve responsive image by using srcset.

  10. Lazy load images - Very important to follow Google's guidelines

Discussion (0)