Many first websites are full of images called something like IMG_4821.jpg with no description at all. These two small details, the file name and the alt text, matter for visitors, for accessibility and for search. They cost nothing and take seconds. Here is a simple way to handle both.
Why file names matter
Search engines read the file name as a clue about what a picture shows. A name like “red-ceramic-teapot.jpg” tells them a lot, while “IMG_4821.jpg” tells them nothing. Good names also help you. When you search your own folders a year later, you will find “kandy-lake-sunrise.jpg” far faster than a string of numbers.
How to name image files
- Describe the content in a few words, such as “blue-cotton-saree-front”.
- Use lowercase letters and hyphens between words. Avoid spaces, which turn into odd codes in web addresses.
- Keep it short, three to five words is plenty.
- Skip accents and symbols, because some systems handle them badly.
- Do not stuff keywords. “cheap-best-teapot-buy-teapot-online.jpg” looks spammy and helps no one.
What alt text is
Alt text is a short written description attached to an image on a web page. It has three jobs. It lets people who use screen readers know what the picture shows. It appears in place of the image if the picture fails to load. And it helps search engines understand the image, which can bring visitors from image search.
How to write good alt text
Imagine you are describing the picture to a friend over the phone, in one short sentence. “A red ceramic teapot with a bamboo handle on a wooden table” is useful. “Teapot” is too thin, and “image of a teapot picture photo” wastes words. Mention what matters in the context of the page: on a recipe page, “golden brown onion rings in a paper cone” is better than “food”.
- Aim for under about 125 characters.
- Do not start with “image of” or “picture of”, since screen readers already announce an image.
- If the image contains text, include that text in the description.
- For purely decorative pictures, such as a divider line, leave the alt text empty so screen readers skip it.
Where to add alt text in WordPress
When you add an image to a post or page, select it and look for the Alt text field in the settings panel on the side. In the Media Library, each file has the same field. Fill it in when you upload, because going back later to fix fifty pictures is unpleasant.
Image size also matters
A well-named picture with a perfect description still hurts your site if it is 5 MB. Large images slow pages down, and visitors on mobile data leave. Resize pictures to the width they will be displayed, and compress sensibly. The Image Resizer and the PNG to JPG converter are quick ways to do this, and the guide on reducing file size on this site explains the order of steps.
Choosing the right format for a website
Use JPG or WebP for photographs, PNG for graphics with text or transparency. If you use WebP on your pages, keep JPG copies for visitors who want to download or reuse your pictures, as the guide on WebP support explains.
Alt text for different kinds of images
Photos, charts and screenshots each call for a different approach. For a photo, describe the subject and the scene. For a chart, give the main finding, such as “Bar chart showing website visits doubling between January and June”, and put the full numbers in the page text. For a screenshot, say what it shows and quote any important words in it. For a product image, include colour, material and type, since those are the details a shopper wants. Thinking about who needs the description, and why, keeps the text short and useful.
Renaming files that already exist
If your site already has hundreds of pictures called IMG_something, do not panic. You do not need to fix every one. Start with the pages that bring you the most visitors, rename and describe the main images there, and work through the rest as you update posts. Changing a file name means uploading the image again and replacing it on the page, so do it when you are already editing.
An example with before and after
Before: a photo called “DSC00372.JPG”, 4.8 MB, with no alt text, on a page about a hill-country tea walk. After: “tea-pickers-nuwara-eliya-hillside.jpg”, resized to 1400 pixels wide and saved at 82 percent quality, 240 KB, with the alt text “Tea pickers working on a green hillside in Nuwara Eliya”. The page loads faster, a screen reader user gets a clear picture in words, and the image has a chance of appearing in a search for the location.
A short checklist for every image
- Rename the file to describe the content.
- Resize to the displayed width.
- Save in a suitable format at sensible quality.
- Write a short, honest alt text.
- Check how it looks on a phone.
Be honest, not clever
Search engines and readers both punish stuffing. Describe what is in the picture, truthfully, and let the page text carry the keywords naturally. A small amount of care on every image adds up to a website that is faster, easier to use and easier to find.