Compress to WebP, add descriptive ALT tags, use meaningful filenames, specify dimensions, implement lazy loading.
Rename image files BEFORE uploading them to your CMS. WordPress and most CMSes use the filename as the default image URL slug. "nike-pegasus-40-review.webp" is much better for SEO than renaming the ALT tag later on a file called "IMG_4532.jpg".
In Screaming Frog: after crawling, go to Images tab > filter "Missing Alt Text". Export the list. Prioritize: hero images, product images, and infographics need ALT text most urgently. Decorative images can use empty alt="".
WebP is 25-35% smaller than JPEG at equivalent quality. Use Squoosh.app (drag and drop, free) for individual images. For WordPress bulk conversion: use ShortPixel, Imagify, or EWWW Image Optimizer plugins. Set quality to 80 for best size-quality ratio.
Describe what the image shows, naturally including keywords when relevant. Good: "Dashboard showing Google Search Console performance report for organic traffic". Bad: "image1" or "SEO SEO tools SEO software best SEO".
Rename files before uploading using lowercase, hyphen-separated, descriptive names. Google uses filenames as a ranking signal for Google Images. Include the primary keyword when it naturally describes the image.
Always add width and height to <img> tags: <img src="photo.webp" width="800" height="600" alt="...">. This lets the browser reserve space before the image loads, preventing layout shift (CLS). CSS aspect-ratio also works.
Add loading="lazy" to images below the fold: <img loading="lazy" src="photo.webp" ...>. Do NOT lazy-load your LCP image (usually the hero/banner image). Native lazy loading is supported in all modern browsers with no JavaScript needed.
Act as an accessibility and SEO specialist. Generate optimized ALT tags and filenames for my images. PAGE CONTEXT: - Page topic: [TOPIC] - Primary keyword: [KEYWORD] - Secondary keywords: [LIST 2-3] - Page type: [Blog post / Product page / Service page / Homepage] IMAGES TO OPTIMIZE: 1. [Describe what image shows — e.g., "Screenshot of Google Search Console dashboard showing performance graph"] 2. [Describe what image shows] 3. [Describe what image shows] [ADD MORE AS NEEDED] FOR EACH IMAGE, PROVIDE (as a table): | # | ALT Tag (max 125 chars) | Char Count | Filename (lowercase-hyphenated.webp) | Loading (eager/lazy) | Is Decorative? | EXAMPLE of good vs bad ALT text: - BAD: "image" / "photo" / "IMG_4532.jpg" / "best running shoes best shoes buy shoes online" - GOOD: "Woman testing Nike Pegasus 40 running shoes on a trail in Portland, Oregon" RULES: - Describe the image accurately for screen readers FIRST, SEO second - Include keywords ONLY when naturally relevant to what the image actually shows - Do NOT start with "Image of..." or "Picture of..." - Do NOT stuff keywords into every ALT tag — vary naturally - Mark purely decorative images as alt="" (empty) - Filenames should be descriptive: "google-search-console-performance-report.webp" not "screenshot-1.webp" - Images above the fold = eager loading; below the fold = lazy loading ALSO PROVIDE: - Image compression recommendations for my CMS: [PLATFORM] - Which images should have width/height attributes set (to prevent CLS)
Track your progress and get guided through every step.
Open Interactive Tool