ActiveCampaignAEMBeehiivBigCommerceBloggerBrevoClickFunnelsConcrete CMSContentfulConvertKitCraft CMSCustomDev.toDrupalExpressionEngineGetResponseGhostGravHashnodeHubSpotInstapageJoomlaKenticoKlaviyoLeadpagesMagentoMailchimpMediumOctober CMSPrestaShopSanityShopifySilverstripeSitecoreSquarespaceStrapiSubstackTYPO3UmbracoUnbounceWebflowWixWordPressWP.com

Image SEO

15-30 minIntermediate

Image SEO is threefold: Accessibility (Alt Text), Performance (Compression/WebP), and Discovery (File names). Optimized images improve page speed and can drive significant traffic from Google Images.

Prerequisites

  • WordPress admin access
  • Images to upload
  • Image optimization plugin (recommended)
Easy Recommended

Basic Optimization (During Upload)

The fundamental best practices every content creator should follow for every single image.

1

Rename File Before Uploading

1

Do NOT upload files like "IMG_5738.jpg" or "Screenshot 2024-01-01.png"

2

Rename locally to descriptive text: "wordpress-seo-settings.jpg"

3

Use hyphens to separate words (not underscores or spaces)

4

Keep it concise but descriptive

2

Set Alt Text in Media Library

1

After uploading, selects the image

2

Find the "Alternative Text" field in the right sidebar

3

Describe the image content for a blind user

4

Include keyword ONLY if relevant to the image content

Best Practices

Do

  • Rename files BEFORE uploading
  • Write alt text for accessibility ("Woman typing on laptop")
  • Use WebP format for 30-50% smaller sizes
  • Compress images (lossy is usually fine for web)
  • Specify width and height attributes to prevent layout shift (CLS)

Don't

  • Upload 5MB raw photos directly from camera/phone
  • Stuff keywords into Alt Text ("SEO expert SEO best SEO")
  • Use "image of" or "picture of" in alt text
  • Lazy load the main hero image (hurts LCP)
  • Use spaces or underscores in filenames

Verification Checklist

  • Images have descriptive filenames (e.g., green-widget.jpg)
  • Alt text is present and accurate
  • File size is optimized (aim for <100kb for large images)
  • Images load in WebP format (check DevTools Network tab)
  • Images below the fold have loading="lazy"

Pro Tips

  • For LCP (Largest Contentful Paint) optimization, exclude the featured image from lazy loading
  • Use SVGs for logos and icons (sanitize them first with SVG Support plugin)
  • Decorative images (backgrounds) should have empty alt text (alt="") or be CSS
  • Use a CDN (like Cloudflare) to serve images faster globally

Common Issues & Fixes

Problem: Images looking blurry
Solution: You might be over-compressing or displaying a small thumbnail size in a large container. Check the "Size" setting in the block editor.
Problem: WebP images not showing in Safari (old versions)
Solution: Ensure your optimization plugin provides a "fallback" to JPEG/PNG for older browsers using the <picture> tag method.
Problem: Cumulative Layout Shift (CLS) issues
Solution: Ensure all images have explicit width="" and height="" attributes in the HTML. WordPress usually adds these automatically.