How to Do Image SEO: Alt Text, File Sizes and Helpful Context
Choose useful images, write contextual alt text and deliver appropriately sized files without sacrificing visual clarity.
By New Delhi Website Technologies · Practical SEO learning series
Start with a website you own or are authorised to edit. Examples are teaching exercises; search rankings and traffic results are not guaranteed.
What you will learn
Image SEO begins with choosing a visual that helps the reader. A relevant photograph, product view or clear screenshot can explain something that text alone would make difficult. This lesson follows one image from selection to published verification. You will review its purpose, alternative text, delivery size and surrounding explanation. The goal is useful visual information and a reliable reading experience, rather than placing a keyword into every image attribute.
1. Choose the image for a specific job
Write down what the reader should learn from the visual before selecting it. A product photograph can show a feature, while a tutorial screenshot can show the location of a setting. Decorative background shapes have a different purpose. Use images you own or have permission to publish, and avoid presenting illustrative scenes as evidence of client results. For a screenshot, remove account details that are not needed. If the interface contains important small text, explain that information in the article as well.
2. Write alternative text in context
Describe the meaningful information the image contributes to this page. A product image might identify the item and its distinguishing feature; an instructional image might communicate the visible state. Avoid starting every description with a list of services and locations. Decorative images can use empty alternative text when they add no information. If an image is a link, consider what a person needs to understand the destination. Do not rely on file names or a caption alone to communicate an essential action.
3. Prepare efficient image files
Keep an original master, then export a version suitable for the space in which the image will appear. Compare quality at the actual display size rather than assuming the largest file is always best. Modern formats can help, but the right choice depends on transparency, animation, visual content and support needs. Record the dimensions and file size before and after export. An image that looks sharp in a large editor may become unreadable in a small card, so crop and compose for the actual use.
4. Deliver images without unnecessary layout movement
Provide dimensions or an equivalent reserved aspect ratio so the page can allocate space before the file arrives. Consider responsive image sources when different screen sizes need different files. Lazy loading can suit images further down the page, while an important opening visual should not be delayed without a good reason. Test the result with slower loading and inspect whether text jumps unexpectedly. Compression that saves bytes but destroys the information the image was meant to communicate is not a successful optimisation.
5. Verify discovery and the finished page
Check that the image URL returns the expected file and that the photo is visible without a broken placeholder. Keep meaningful images in an accessible page context with relevant text nearby. Review alt text, captions and social preview images separately because they serve different purposes. On a phone, inspect both the article image and its card thumbnail. Keep a dated log of the version you published. Recheck shared image templates after a redesign so a bulk change does not accidentally remove useful alternatives or dimensions.
Worked example
A fictional furniture page uses a large workshop photo to demonstrate a repaired chair joint. Export a clear, appropriately sized version, describe the repaired joint in the alt text and explain the repair in the caption. A smaller byte count is useful only if readers can still see the feature being discussed.
Your practical exercise
- Choose three informative images and one decorative image.
- Write the purpose and appropriate alternative text for each.
- Compare export size and clarity at the actual display width.
- Check reserved image space and mobile rendering after publishing.
Save the page URL, the observed problem, your proposed change, the publication date and the check you performed. Record real report data separately from examples or expectations.
Frequently asked questions
Should every alt attribute contain a keyword?
No. Write the alternative needed to understand the image in its context. Repeated marketing phrases are not a useful substitute.
Are smaller image files always better?
Reduce unnecessary weight while preserving the information and visual quality the reader needs. Extremely poor compression can defeat the purpose of the image.
Continue learning on this website
Explore our original practical guides below. Each page includes explanations, examples and checks you can apply to your own project.