Intro
Images often make up the largest part of webpages and have their own tab on Google results. They are a crucial part of a complete SEO strategy, so optimizing them is essential for better visibility.
How Search Engines Index and Understand Images
Search engines crawl webpages to discover images and extract data such as metadata and file names. Google uses factors like surrounding text, image file name, alt text, captions, and page content to understand the context and content of images.
What Is Image SEO?
Image optimization involves techniques to increase visibility in search engine results pages (SERPs) by compressing images, using responsive images, implementing lazy loading, adding relevant alt text, using descriptive file names, and implementing structured data.
1. Choose the Right Image Format
Google supports formats like JPEG, PNG, WebP, BMP, GIF, and SVG. Each format has its own pros and cons:
-
PNG: Lossless compression, better quality, supports transparency, larger file size.
-
JPEG: Lossy compression, adjustable quality, smaller file size.
-
WebP: Efficient, smaller file sizes, supported by all major browsers.
-
GIF: Lossless, limited to 256 colors, suitable for simple graphics and animations.
-
SVG: Vector-based, scalable, ideal for logos and icons.
-
BMP: Large, uncompressed, high quality, not suitable for web due to size.
Recommendation: Use PNG and convert to WebP for web deployment for optimal quality and load times.
2. Create Unique Images
Avoid generic stock photos. Use original, high-quality images to improve user experience and SEO. Google recommends images be at least 1200px wide and using the max-image-preview:large setting in robots meta tag to ensure they appear as large images in Google Discover.
<meta name='robots' content='index, follow, max-image-preview:large' />
3. Optimize Image File Names
Use descriptive, keyword-rich file names to help search engines understand the subject matter of the image. Avoid default names like "IMG_722019".
4. Write SEO-Friendly Alt Text
Alt tags describe the contents of an image and improve accessibility. They also help search engines understand the image context, aiding in better rankings.
Example:
<img src="chocolate-1.jpg" alt="dark chocolate coffee flavored bar"/>
5. Optimize Your Page Title & Description
Include relevant keywords in your page title and description to improve image search rankings. Ensure all on-page SEO factors are optimized.
6. Define Your Dimensions
Include width and height attributes for every image to prevent Cumulative Layout Shift (CLS) issues and improve Core Web Vitals scores.
7. Make Your Images Mobile-Friendly
Use srcset and sizes attributes for responsive images that scale according to the user’s device.
Example:
<picture>
<source type="image/webp" srcset="image-300w.webp 300w, image-600w.webp 600w, image-1200w.webp 1200w" sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px">
<img src="image-300w.jpg" srcset="image-300w.jpg 300w, image-600w.jpg 600w, image-1200w.jpg 1200w" sizes="(max-width: 600px) 300px, (max-width: 900px) 600px, 1200px" alt="Description of the image">
</picture>
8. Lazy Loading and Preloading
Use lazy loading for images not in the viewport to improve page performance. Use preload or fetchpriority="high" for images above the fold.
Example:
<img src="image.jpg" loading="lazy" srcset="image-300w.jpg 300w, image-600w.jpg 600w" alt="Description">
9. Add Images to Your Sitemap
Including images in your sitemap increases the chances of them being crawled and indexed by search engines. Use plugins like Yoast or RankMath for WordPress, or tools like Screaming Frog.
10. Add Structured Data
Enhance images with structured data to improve visibility in search results. Use schema markup to include details like price, availability, and ratings.
Example:
{
"@context": "http://schema.org",
"@type": "Article",
"headline": "Article Title",
"image": [
"https://example.com/photos/1x1/image.jpg",
"https://example.com/photos/4x3/image.jpg",
"https://example.com/photos/16x9/image.jpg"
],
"datePublished": "2024-01-10T08:00:00+08:00",
"dateModified": "2024-01-10T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "Author Name"
}
}
11. Use CDN for Faster Image Delivery
A Content Delivery Network (CDN) can optimize and deliver images faster by serving them from locations closer to the user. Consider using services like Cloudflare, Amazon CloudFront, ImageKit, or KeyCDN.
12. Beware of Copyright
Ensure you have the right to use images to avoid expensive lawsuits. Use licensed images from providers like Getty, Shutterstock, or DepositFiles.
Image Optimization Key Takeaways
-
Choose the right file format and size for faster load times.
-
Ensure your on-page SEO elements are optimized.
-
Create an image sitemap for better crawlability.
By following these tips, you can improve your website's image SEO and overall search visibility. Happy optimizing!
