The 3 Main Types of Website Images
Alt text gets talked about a lot, but one of the biggest reasons people struggle with it is surprisingly simple. They are trying to write alt text before they understand what the image is actually doing on the page.
That is where the confusion starts.
A lot of website owners assume every image needs a description. A lot of designers were taught to fill in every alt text field no matter what. And plenty of accessibility checkers reinforce that idea by making people feel like leaving anything blank is automatically wrong.
It is not.
The truth is, not all website images serve the same purpose. Some are there to support the design. Some add useful information. Some help people take action. Once you know which kind of image you are looking at, it becomes much easier to decide what kind of alt text it needs — or whether it needs alt text at all.
And yes, sometimes the correct choice is to leave it blank.
In This Article
The 3 main types of images on a website
Why people get alt text wrong so often
The one question to ask before writing alt text
Why image type matters
When people hear “types of images,” they often think of file types like PNG, JPG, or SVG.
That is not what this is about.
What matters for accessibility is the image’s purpose. In other words, what job is the image doing on the page?
That question matters because not everyone experiences your website the same way. Some visitors use screen readers. Some have low vision. Some turn images off to reduce distractions or save data. Some may never see the image at all because of connection issues or how they browse the web.
So, if an image carries meaning, the user needs a text alternative that helps them understand what matters. If an image does not add meaning, it should not create extra noise.
That is why image type matters so much. Without that context, alt text often becomes either too vague, too wordy, or completely unnecessary.
The 3 main types of images on a website
Most website images fall into one of three categories
Decorative images
Informative images
Functional images
This is a simple framework, but it clears up a lot of confusion fast.
Let’s walk through each one.
Decorative images
Decorative images are there for appearance, not meaning.
They might help the page feel more polished, more branded, or more visually interesting, but they do not add information someone needs in order to understand the content.
If you removed the image and the message on the page stayed the same, the image is probably decorative.
Common examples include background images, abstract graphics, divider lines, texture images, and stock photos that are just there to fill space or make a section feel more complete.
What decorative images need
Decorative images should usually be skipped by screen readers.
That means they should not have descriptive alt text. In many cases, that means using empty alt text so assistive technology ignores the image instead of announcing it.
This is the part that surprises people.
They assume blank alt text is a mistake. But for decorative images, it is often the right choice. A screen reader user does not need to hear about every visual flourish, background photo, or stylistic stock image that adds nothing to the meaning of the page.
In fact, forcing decorative images to be announced can make the experience worse. It adds clutter. It slows people down and it can make the page harder to navigate.
So no, not every image needs alt text just because there is an alt field available.
Example of a decorative image
Let’s say your homepage has a banner image of two people smiling at a laptop. It looks nice. It supports the brand feel. But the heading, subheading, and call to action already explain the point of the section.
If the image is not adding any new information, it is decorative.
That image should usually stay quiet.
Informative images
Informative images add meaning, context, or content.
These are the images that actually help someone understand the page better. If removing the image would take away something important, it is informative.
This might include product images, headshots that identify team members, screenshots in tutorials, charts, graphs, diagrams, or photos that support the surrounding content in a meaningful way.
What informative images need
Informative images need alt text.
But the goal is not to describe every visual detail. The goal is to communicate what matters.
That is where people often get stuck. They think good alt text means writing a full description of everything in the frame. Usually, that is not helpful.
Instead, ask yourself: if someone cannot see this image, what do they need to know?
That answer is usually a much better guide than trying to narrate the entire image.
Good alt text for informative images is focused. It gives the user the important takeaway without burying them in unnecessary detail.
Example of an informative image
A headshot on a team page can be informative if it helps identify a specific person.
A product photo can be informative if the image helps someone understand what is being sold.
A chart can be informative if it shows a trend or comparison that supports the page’s point.
In each case, the alt text should communicate the useful part of the image, not just acknowledge that an image exists.
Functional images
Functional images are images that trigger an action.
They work like buttons, links, or controls. Their purpose is not just to be seen. Their purpose is to help the user do something.
This includes things like search icons, shopping cart icons, social media icons, print buttons, and clickable banner graphics.
What functional images need
Functional images need labels that describe the action, not the appearance.
This is one of the most common mistakes we see.
People label a search icon as “magnifying glass.” They label an email icon as “envelope.” They label a linked Facebook icon as “Facebook logo.”
But that is not what the user needs most.
What they need to know is what will happen when they activate it.
So “Search” is better than “magnifying glass.”
“Contact us” is better than “envelope icon.”
“Visit our Facebook page” may be more helpful than “Facebook logo,” depending on the context.
With functional images, the accessible text should communicate purpose and action.
That is what makes the control usable.
Example of a functional image
If a shopping cart icon takes someone to their cart, the text alternative should reflect that action (alt = “Go to shoppping cart”).
The user does not need a description of what the icon looks like. They need to know what it does.
Why people get alt text wrong so often
Most alt text problems happen because every image gets treated the same way.
That usually leads to one of three issues.
Decorative images get announced when they should be skipped.
Informative images get weak, generic alt text that does not actually help.
Functional images get labeled by appearance instead of purpose.
When that happens, the page becomes harder to use, especially for people relying on assistive technology. Instead of helping the user find what they need, it confuses them.
These mistakes are often made by people who are trying to do the right thing.
They are filling in every alt field. They are trying to be thorough. They are trying to satisfy an accessibility or seo checker.
But accessibility is not about blindly filling in boxes. It is about making thoughtful decisions that help people use your website more easily.
The one question to ask before writing alt text
Before you write anything, pause and ask,
What is this image doing here?
That one question can save you from a lot of bad alt text.
If the image is there only for visual polish, it is decorative.
If it adds information or context, it is informative.
If it helps someone take an action, it is functional.
Once you know the image’s job, the next step becomes much clearer.
A quick way to review your own website images
A good place to start is your homepage or another high-traffic page.
Go through the images one at a time and sort them into these three categories
Decorative
Informative
Functional
Then check whether the current alt text matches the image’s purpose.
You may notice decorative images with random alt text. You may find informative images with no alt text or vague descriptions like “image” or “photo of.” You may find clickable icons labeled by shape instead of action.
These are often quick fixes, but they can make a big difference in how usable your site is.
Better accessibility starts with better decisions
This is one of those areas where accessibility gets easier once you stop overcomplicating it.
You do not need a complicated formula for every image on your site. You need a better way to think about what the image is there to do.
When you understand the difference between the three main types of images, it becomes much easier. You stop guessing. You stop over-describing. You stop treating every image the same.
And your website visitors have a much better experience because of it.
That simple shift can clean up a lot of accessibility issues without needing to make any visual changes.
Website Image Type FAQS
What are the 3 types of website images?
The three most common types of website images are decorative, informative, and functional. Decorative images are for visual styling, informative images add meaning or context, and functional images act like buttons or links.
Does every image need alt text?
No. Decorative images should usually be skipped by screen readers, which means they should not have descriptive alt text. Informative and functional images do need appropriate text alternatives.
How do I know if an image is decorative?
Ask whether removing the image would change the meaning of the page. If the answer is no, and the image is only there to support the design, it is probably decorative.
What should alt text for icons say?
If the icon is functional, the text should describe the action or destination. For example, “Search” is better than “magnifying glass.” BUT if the icon is simply there as a visual symbol to the surrounding text, it should be marked decorative.
What is the biggest alt text mistake?
One of the biggest mistakes is treating every image the same way. That often leads to unnecessary descriptions for decorative images, vague alt text for informative images, or no labels for functional images.
We helps small businesses build websites that are accessible, clear, and easier for EVERYONE to use from the start. If you want a professional review of your site’s accessibility, we’d love to take a look.
