How to Optimize Image for better SEO?

The performance of your website in search results, the user experience, and the likelihood that your photographs will appear in image search results are all improved by image optimization, which is a crucial component of search engine optimization (SEO). Keep in mind that image optimization is about improving the user experience as well as SEO. A website that loads quickly and has relevant, high-quality photos helps keep visitors on the page longer and decreases bounce rates, both of which help your search engine rankings.

What is Image Optimization?

Image optimization is a process by which we reduce the size of our images. Image optimization is part of on-page SEO. By doing image optimization, you can rank your blog in image search results on the basis of images. With image optimization, you can make your blog SEO-friendly. Many people search for images on the internet, among which I am also one, and whatever images we see in the search results are already ranked. This means that you can also optimize your image and get it ranked.

Why image optimization is important in SEO?

In SEO, image optimization is essential since it speeds up website load time, boosts user experience, and lowers bounce rates. Pages with a quick load time appear higher in search results. Since search engines favor mobile-friendly websites, optimized pictures also cater to people on mobile devices. Both visually impaired people and SEO benefit from accessibility features like alt text, and properly labeled photos are more likely to turn up in image search results, which increases traffic. Furthermore, optimized photos reduce bandwidth usage and aid in more precise indexing, providing websites an advantage and improving search engine ranks.

Ways to Optimize Images for SEO

1. Image URL

Before uploading your images, give them descriptive file names. The URL of the image is important for SEO. For example, IMG_76576.png, can you understand what image this is? But now, with image-seo.png, you will understand that this image is related to image SEO. In the same way, search engine bots think of image URLs.

• https://geeksforgeeks.org/img3547.png ❌
• https://geeksforgeeks.org/image-seo.png ✅

2. Image-structured data or metadata

Image metadata helps Google Images show more details about the image, the creator of the image, how users can use the image, and credit information.

Javascript

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "ImageObject",
  "contentUrl": "https://example.com/photos/1x1/black-labrador-puppy.jpg",
  "license": "https://example.com/license",
  "acquireLicensePage": "https://example.com/how-to-use-my-images",
  "creditText": "Labrador PhotoLab",
  "creator": {
    "@type": "Person",
    "name": "Brixton Brownstone"
   },
  "copyrightNotice": "Clara Kent"
}
</script>

3. Choose of Right Format

Google suggested that the use of Webp format is better because Webp format lossy compression is 25 to 35 % smaller in size as compared to jpeg. Webp images load faster and are also good for low-speed Internet users. If you convert images to WebP format it automatically compresses. Webp is supported by Google Chrome, Safari, Firefox, Edge, and the Opera browser.

4. Image Sitemap

Adding an image sitemap can increase the chance of your image in search results. An image sitemap only includes the URLs to images. Image sitemaps can contain URLs from your CDN, which means you can host your images on a Content Delivery Network.

Example of image sitemap:

XML

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/sample1.html</loc>
    <image:image>
      <image:loc>https://example.com/image.jpg</image:loc>
    </image:image>
    <image:image>
      <image:loc>https://example.com/photo.jpg</image:loc>
    </image:image>
  </url>
  <url>
    <loc>https://example.com/sample2.html</loc>
    <image:image>
      <image:loc>https://example.com/picture.jpg</image:loc>
    </image:image>
  </url>
</urlset>

How to submit an Image Sitemap?

1. Sign in to your Google Search Console account.
2. select your website.
3. click on the Sitemaps tab.
4. click on the Add/Test Sitemap button.
5. enter website’s Image Sitemap URL.
6. click the Submit button.

5. Use CDN(Content Delivery Network)

CDN helps images and other content load faster. A CDN is a set of servers located at different locations around the world. For example, if a request comes from the US then it loads images and content from US servers. So CDN helps decrease the loading time of the website. To know more about CDN read our article here.

6. Add Alt Text

Adding alt text (alternative text) in your images helps in image optimization for SEO and web accessibility. Alt text provides a description of the image content, which is important for users who may have visual impairments and depend on screen readers to understand the content of your web page. Alt text also helps search engines better understand the context and relevance of your images.

HTML

<img src="rose.jpg" alt="A red rose in full bloom">

Tips for alt text:

• Use specific words and phrases in your Alt text.
• Include the subject, action, and location of the image in your Alt text.
• Keep your Alt text under 125 characters.

Benefits of Alt Text:

• Useful for visually impaired users.
• Helps search engines understand what your images are about.
• Can help in improving the SEO of your website.

Note: Most CMS like WordPress and blogger have the option to add alt text of image without coding.

7. Responsive Images

Responsive images are an important part of optimizing your website for various screen sizes and devices. Responsive images ensure that your site looks and performs well on both desktop and mobile devices. Most CMS have automatic responsive images option but if not using CMS then here’s how to implement responsive images. HTML <img> element can be enhanced with the srcset and sizes attributes to provide different image sources for different screen sizes. Here’s an example:

HTML

<img
  src="image.jpg"
  srcset="small.jpg 320w, medium.jpg 768w, large.jpg 1200w"
  sizes="(max-width: 320px) 280px, (max-width: 768px) 680px, 1200px"
  alt="Responsive image">

8. Enable Browser Caching

When browser caching is enabled, web browsers store certain files locally on a user’s device, such as images, stylesheets, and scripts, and the browser loads these resources more quickly from the local cache instead of downloading. If you are using WordPress CMS then you can Use caching plugins.

For Apache Servers(Edit the .htaccess File)

HTML

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/svg+xml "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/html "access plus 1 month"
ExpiresByType application/xhtml+xml "access plus 1 month"
ExpiresByType application/xml "access plus 1 month"
ExpiresByType application/rss+xml "access plus 1 month"
ExpiresByType application/atom+xml "access plus 1 month"
ExpiresByType application/json "access plus 1 month"
ExpiresByType application/manifest+json "access plus 1 month"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

For Nginx Servers (Edit the Nginx Configuration)

HTML

location ~* \.(jpg|jpeg|png|gif|ico|css|js|woff|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, max-age=31536000";
}

location ~* \.(html|htm|txt)$ {
    expires 30d;
    add_header Cache-Control "public, max-age=2592000";
}

9. Lazy Loading

Lazy Loading is a technique used to delay the loading of images and other multimedia content on a web page. This technology loads these content only when the user scrolls or on demand. Using Lazy Loading can help increase web page loading speed, as it only loads images and other multimedia content that the user actually views.

It can also help save bandwidth, as it only loads images and other multimedia content that are necessary. This approach helps improve website performance, especially in terms of page load times and resource utilization. Lazy loading is particularly beneficial for websites with a lot of media-rich content.

10. Image optimization tools

Image optimization tools are tools that reduce image size without reducing its quality. It helps in fast page loading. There are many image optimization tools available, some of them are free, and some require payment. Some popular image optimization tools include:

• ezgif.com: This is a free online tool that optimizes JPEG, PNG, and WebP images.
• squoosh.app: This is a free open-source Google tool that optimizes JPEG, PNG, GIF, and WebP images.
• Optimizilla: This is an offline tool that optimizes JPEG and PNG images.
• Riot: This is a free open-source tool that optimizes JPEG, PNG, GIF, and SVG images.

11. Use Unique Images

Originality matters in SEO. Whenever possible, use unique images that are not readily available on other websites. This can set your content apart and improve your search engine rankings. Now let us see how to create and use unique images effectively:

1. Photography and Custom Graphics: Consider investing in original photography or custom-designed graphics that align with your content. This may require a budget to buy some paid image tools, but there are also free tools are avilable with limited features.
2. Image Editing: If you’re using stock photos, consider making modifications to create unique versions. Crop, overlay text, or apply filters to make them your own.
3. Data Visualization: Create unique charts, graphs, and infographics to visualize data relevant to your content. These not only enhance uniqueness but also provide valuable information to your audience.
4. Custom Icons and Illustrations: Use custom icons and illustrations that align with your brand’s style and messaging. This can add a distinctive touch to your content.

12. Plug-ins for image optimization

Image optimization Plugins are plugins that automatically optimize the images that are uploaded to your website. This is an easy way to improve your website loading speed and SEO. If you are using image optimization Plugins then you don’t need to optimize images one by one, they automatically optimize all images on your website. There are many image optimization plugins available for WordPress. Some popular plugins include:

• Smush: This is a popular plugin that automatically optimizes JPEG and PNG images.
• Cloudflare: If Cloudflare you have a paid subscription to Cloudflare then they also provide image optimization through the Cloudflare dashboard.
• EWWW Image Optimizer: This is another popular plugin that automatically optimizes JPEG, PNG, and GIF images.
• ShortPixel: This is a plugin that automatically optimizes JPEG, PNG, GIF, and WebP images.
• WP Image Optimizer: This is a free plugin that automatically optimizes JPEG and PNG images.

Tip: If you want your post or article to come in Google Discover then your image size should be 1200 x 650 pixels.

Conclusion

The visibility of your website in search engine results and the user experience can both be improved by image SEO (Search Engine Optimization). By making sure that your photos are properly optimized and available to a larger audience, you can boost the user experience and improve your website’s SEO by adhering to these best practices.