Comparison table: SEO checklist
| Element |
Why it matters |
Best practice |
| Filename |
Context for search engines |
Descriptive and readable |
| Alt text |
Accessibility and SEO |
Explain the image clearly |
| Size |
Page speed |
Resize to display size |
| Format |
File weight |
WebP or AVIF when possible |
| Dimensions |
CLS stability |
Always set width and height |
Real-world use case: portfolio site
A designer portfolio with large full-screen images can be beautiful but slow. By resizing to the actual display size, compressing to 150-250 KB, and adding descriptive alt text, the site stays fast and ranks better without losing visual impact.
Avoiding SEO mistakes
Do not hide keywords in filenames or alt text. Avoid uploading huge originals and relying on the browser to scale them down. Do not use images as the only source of critical text, because search engines may not interpret it correctly.
Alt text examples that work
Good alt text is short and descriptive. Example: "Close-up of a blue wool scarf on a wooden table." Bad alt text: "best scarf cheap scarf buy scarf." The goal is to describe the image for users who cannot see it and to provide context for search engines.
Image sitemaps and structured data
If your site relies heavily on images, consider adding images to your sitemap. Structured data is useful for recipes, products, and news, but it is not a replacement for good filenames and fast loading images. Keep the basics strong first.
Workflow tips for teams and clients
If multiple people touch image assets, consistency matters. Create a small set of shared presets for size and quality, then document when to use them. This keeps a blog post, landing page, and product page visually consistent. It also reduces revision cycles because everyone follows the same playbook.
Avoid quality loss from repeated edits
Every time you re-export a lossy format, you lose a little detail. The best practice is to keep a master file and only export once for delivery. If you need a new size or format, go back to the master. This keeps compression artifacts from stacking up.
Accessibility and context still matter
Even perfect image quality is less valuable if the context is unclear. Use descriptive filenames and alt text for web images. Make sure important text is not baked into the image if it needs to be searchable or readable by screen readers. The technical optimizations work best when paired with clear context.
Detailed workflow example
A practical way to apply this topic is to work from a simple example. Start with a high quality original, decide the final destination, and then make one clean export. If the image is for a website, determine the largest display size, resize to that size, and pick the right format. If the image is for social, use the platform dimensions and keep enough margin for cropping. This approach is consistent and avoids the trial-and-error loop that often leads to quality loss.
Troubleshooting and quality review
If the result looks worse than expected, step back and review the order of operations. Check for accidental upscaling, verify the aspect ratio, and compare the original and final at the same zoom level. If artifacts appear, reduce compression or switch formats. If the image looks soft, confirm the target size and apply only light sharpening. Most issues are caused by one of these three steps, so fixing them usually brings the image back to a clean result.
Delivery checklist
- Confirm the output dimensions match the display size.
- Verify format and quality settings are correct for the content.
- Preview on at least one real device.
- Save a master file for future edits.
- Keep filenames descriptive and versioned.
This checklist is short, but it keeps your workflow reliable and makes results easy to reproduce.
Final polish tips
Before publishing, take one last look at color, contrast, and sharpness. Small tweaks make a big difference. If the image feels flat, a slight contrast boost can help. If edges look harsh, reduce sharpening or resize down a little. If you see noise, apply a light denoise or choose a slightly higher compression quality. The goal is a natural look that matches the rest of your page or brand.
Quick recap checklist
- Check the image at 100 percent zoom.
- Confirm the size matches the display size.
- Verify the format and quality are appropriate.
- Save a clean master for future edits.
- Keep filenames consistent for easy reuse.
Summary
Image SEO is about clarity and speed. Use descriptive filenames, helpful alt text, correct dimensions, and compression to make images fast and discoverable.
