Skip to lesson content
Module 3: On-page SEO essentials

How Do You Optimize Images for SEO?

Choose useful images, write clear alt text, recognize decoration and understand how file size affects the visitor’s experience.

Lesson 1513–17 minIncludes practice
Browse the course

A picture can answer a question before someone reads

In Lesson 14, we gave visitors a helpful path from an article to the water heater repair page for ClearFlow Plumbing, our fictional business in Austin, Texas. Now imagine the homeowner has followed that link. They're reading about ClearFlow's repair service, but they still wonder what a technician might look at when checking a water heater.

ClearFlow could add a picture beside the explanation. One option is a generic picture of a coffee mug on a desk. It looks pleasant, but it doesn't tell the homeowner anything about a water heater. Another option is a clear illustration of a technician checking a water heater's control panel. That picture fits the subject and helps the homeowner understand what the paragraph is describing.

This is the first part of image optimization: choosing images that help the person reading the page. The goal isn't to decorate every empty space. It's to make something clearer, more useful or easier to understand.

Which picture helps explain the service?
clearflow.example/water-heater-repair
ClearFlow PlumbingWater Heater Repair in Austin
A technician may check the water heater’s control panel as part of understanding a problem.
Illustration of a technician checking the control panel on a water heater
This illustration supports the explanation beside it. A genuine company photo could also help when it shows something relevant and the business has permission to use it.
Both pictures are illustrations. They don’t show ClearFlow employees or completed jobs.

But what if someone cannot see the picture?

Think about two people visiting the same page. One can look at the illustration and understand it straight away. Another uses a screen reader, a tool that reads or speaks the information on a webpage. The screen reader can't explain the picture simply by looking at it in the same way a person does.

That's why webpages can include alternative text, usually called alt text. Alt text is a short description written for the image so that people using assistive technology can understand the important information it adds.

For ClearFlow's illustration, a useful description might be:

Technician checking the control panel on a water heater.

That tells the reader what's shown. You don't need to start with “Image of,” and you don't need to squeeze every possible plumbing keyword into the sentence. A vague description like “plumbing image” doesn't explain much. A long string of repeated words is hard to understand.

Alt text isn't normally a caption printed under the image. It's information stored with the image in the webpage. Some tools and browsers may display it when the image doesn't load, and screen readers can announce it to people who need it.

Google can also use alt text, along with the image and nearby page content, to better understand an image. That is how this small improvement connects accessibility with SEO. It can help people and search systems understand what an image contributes, but it doesn't guarantee the image will appear in Google Images.

What does the description tell someone?
Illustration of a technician checking the control panel on a water heater
Example words a screen reader could announce
Technician checking the control panel on a water heater
These words describe what is shown, in a short, natural phrase. They help someone understand the picture’s contribution to the page.
This compares the description text. Actual announcements vary by screen reader and context.

Does every little picture need a description?

Not always. Suppose ClearFlow adds a small blue curve behind its page heading simply to make the design look nicer. It doesn't tell visitors anything new. A screen reader reading “blue curved shape” would only interrupt the useful information.

For an image that's purely decorative, the webpage can use an empty alt text value: alt="". That tells assistive technology the image doesn't need to be announced. It isn't the same as forgetting to add alt text. An informative photo or diagram needs a meaningful alternative; decoration often doesn't.

The useful question isn't “Does this image contain something I can describe?” It's “What does someone need to know from this image in this particular place?” If the answer is important to understanding the page, describe it. If the image only decorates information already explained, it may need no spoken description.

When a picture only decorates
Water Heater Repair in Austin
The curve adds no information about the service. With alt="", it can be skipped while the heading is still read.

A great picture isn't much help if the page takes too long to open

Now suppose ClearFlow has chosen a relevant image and written clear alt text. There is one more thing to consider: the size of the image file.

Picture a homeowner using a phone with a slow connection. A very large image can take longer to arrive, even if it looks no better on the small screen than a carefully prepared version. The page may feel slow, and the homeowner might give up before reaching the contact information.

A website can often show a clear image while using a smaller file. This process is often called image compression or image optimization for speed. You don't need to understand every image format yet. The useful idea is to keep the picture clear without making visitors download more data than they need.

For an easy example, imagine the same illustration saved two ways: one file is 4 MB, and an optimized version is 250 KB. These are fictional sample sizes, not measurements from ClearFlow. The smaller file has far less data to transfer. It may load faster, depending on the page and connection, as long as the image still looks good.

Same illustration, different sample file sizes
Illustration of a technician checking the control panel on a water heater
250 KBAbout 6% of the larger sample
This sample has much less data to transfer. If the picture remains clear, a smaller file may load faster. The website and connection affect the actual result too.
The sizes are illustrative labels; both previews use the same image. This compares data amounts, not measured loading times or rankings.
Important images near the top of a page should load normally. Images farther down can sometimes wait until the visitor is closer to them. This is called lazy loading; it isn’t right for every image.

It also helps to give image files simple, descriptive names before uploading them. water-heater-control-panel.webp tells you more than IMG_5832.webp. A filename gives Google a small extra clue, but it isn't as important as the image itself, its alt text, and the page around it.

If ClearFlow uses actual photographs, it should use ones the business has the right to publish. And it shouldn't label an illustration or stock image as proof of a real employee, completed job, or customer result.

Why this matters when you're doing SEO

Let's look at ClearFlow's page again. The homeowner wants to know whether this repair service might be relevant to their problem. A useful picture helps them understand the explanation. Alt text helps visitors who cannot see the image. And a reasonably sized image helps keep the page comfortable to use on a phone.

Search engines may also use the image, its description, and the nearby words to understand the subject better. Sometimes images can be discovered through Google Images or other visual search features, but there's no promise that any particular image will appear.

This is why image SEO is not just renaming files or repeating keywords in alt text. The more useful question is: “Does this image help the customer, can people understand it, and does it work well on the page?”

Quick practice

0 of 3 checked

Try each question, then check the explanation underneath. For the writing task, add your description and reason before comparing them with an example.

ClearFlow's page explains what a technician may inspect on a water heater. Which image best supports that explanation?

Choose one answer

The illustration shows a technician checking the control panel on a water heater. Which alt text is most helpful?

Choose one answer

Write a short line of alt text for the bathroom sink diagram, then explain why you chose it.

ClearFlow is preparing an article about blocked drains. The diagram shows water gathering in a bathroom sink instead of draining away. Describe the useful information shown, without inventing a cause.

Diagram of water collecting in a bathroom sink above the drain
Describe what the diagram shows, without guessing the cause.

Your written answer isn’t automatically graded. Compare it with the example. More than one answer can be useful.

Explore the feedback for all questions to finish. You don’t need perfect answers.

One idea to take with you

ClearFlow's service page is becoming easier to use, one improvement at a time. The headings help people scan it, the links help them move to related information, and now the images can support the explanation without getting in the way.

A useful image should add meaning, have the right text alternative, and be practical to load. That's how images fit into the larger goal of on-page SEO: making each webpage clearer and more helpful.

In the next lesson, we'll bring all these pieces together. You'll see how to review a complete webpage and choose improvements that actually make sense for its customers.

How Do You Optimize Images for SEO? | Blue Kite Academy