SEO – Images
Good images make a page nice, and they can also bring visitors from image search. But big and unnamed images make the page slow and give no information to search engines. Here is how to do it right.
1. Use a descriptive file name
Use words which describe the picture: red-running-shoes.jpg, not IMG_4521.jpg. Use lowercase and hyphens. See URLs and File Names.
2. Write alt text
The alt attribute describes the image in words. It is read by screen readers, shown if the image does not load, and used by search engines to understand the image.
<img src="red-running-shoes.jpg" alt="Pair of red running shoes on a track" width="800" height="533">- Describe what is in the picture, in a short and natural way.
- Do not start with “image of” or “picture of”.
- Do not stuff keywords. Use the keyword only if it really describes the image.
- For a decoration image, use an empty alt (
alt=""), so screen readers skip it.
3. Compress the image and choose a good format
| Format | Use for |
|---|---|
| WebP / AVIF | Photos and graphics, small size with good quality. Supported by modern browsers |
| JPEG | Photos, when you need the widest support |
| PNG | Images that need a transparent background or sharp text |
| SVG | Logos and icons, scale to any size |
Do not upload a 4000 pixel photo to show it in a 600 pixel box. Resize it first, and use a compression tool or a plugin.
4. Set width and height
When you write the width and height, the browser keeps the space ready before the image loads, so the text does not jump. This helps the layout stability score (CLS). See Page Speed and Core Web Vitals.
5. Lazy load images below the fold
<img src="team.jpg" alt="Our team at work" width="800" height="533" loading="lazy">loading="lazy" loads the image only when the visitor scrolls near it. Do not use it for the main image at the top of the page, because that one should load fast.
6. Responsive images
<img src="shoes-800.jpg"
srcset="shoes-400.jpg 400w, shoes-800.jpg 800w, shoes-1200.jpg 1200w"
sizes="(max-width: 600px) 100vw, 800px"
alt="Red running shoes" width="800" height="533">The browser chooses the smallest file which fits the screen, so mobile users download less.
Other tips
- Put the image near the text which talks about it.
- Use real images when you can. Common stock photos do not add much value.
- Make sure Google can crawl the image files (do not block them in robots.txt).
| Exercises & Assignments |
|---|
| No Content Found. |
| Interview Questions & Answers |
|---|
| No Content Found. |