You have a page open and an empty image slot, and you are scrolling a stock library hoping something jumps out. That is the slow way, and it tends to produce pages that look fine in isolation but disjointed together. A better approach is to decide what the image needs to do before you decide what it should look like.
This post gives you a repeatable system for that decision. It is the method behind how Picdrome tags every image, so once you learn it you can apply it the same day on a real page. If you are new to images on the web generally, start with the beginner's guide to using images on your website and come back here for the choosing part.
The mistake: picking by looks first
The most common way to choose a web image is to open a library, browse until something looks nice, and drop it in. The problem is that "nice" is the wrong first question. A striking photo can be completely wrong for a hero section if text won't read over it, or wrong for an about page if it shows a polished corporate office when you are a one-person studio.
Looks matter, but they are the last filter, not the first. When you lead with style, you end up with a collection of individually attractive images that don't agree with each other, and a site that feels stitched together from three different brands.
The fix is to ask three questions in order, every time:
- What job does this section do? (section purpose)
- Who is this site for? (business type)
- Which visual style keeps everything coherent? (style)
Only after those three do you ask "does this specific image look good and read cleanly?" These three axes organize Picdrome's guidance. Use them to evaluate candidates, whether you are browsing a small collection manually or using a library with filters.
Axis 1: what job does this section do?
Start with the section, not the picture. Every block on a page has a job, and the image's only purpose is to support that job. A hero image and an about-page image are not interchangeable, because the sections around them are doing different work.
Name the job before you look at anything:
- Hero — set the first impression and frame what you offer, while staying readable behind a headline and a button. The image is a backdrop for a message.
- Service or feature block — show or evoke the specific thing being described next to it. Here the image illustrates a claim, so it needs to be relevant and literal enough to support the words.
- About / team — convey who is behind the business and what working with you feels like. Honesty and tone matter more than polish.
- Testimonial or social-proof block — stay quiet and supportive so the words are the focus. A busy image fights the quote.
- Background or section divider — add texture or mood without demanding attention or competing with foreground content.
Once you know the job, a lot of options disqualify themselves. A dense, detailed photo is a poor hero because text won't sit over it, but it might be perfect in a feature block where it stands alone. Which image belongs on each page of your business website walks through each common section and what its image needs to handle, so you are only ever looking at candidates that fit the slot.
Axis 2: who is the site for?
With the section's job clear, narrow by business type. The same section job looks different for a law firm, a yoga studio, and a coffee subscription. A calm, spacious hero suits a wellness brand; a crisp, structured one suits a B2B SaaS product; a warm, textured one suits a local bakery.
Business-type fit is about expectation. Visitors arrive with an unspoken sense of what your kind of business should look like, and an image that clashes with that creates a small friction — a restaurant whose photos feel like a tech startup reads as off, even if the visitor can't say why.
Combine this second axis with the first in your brief: "hero image, for a fitness business" describes both the placement and the audience. Filtering by business type keeps you from grabbing a generic image that technically fits the section but belongs to someone else's industry.
A practical tip: if your business type is uncommon, pick the closest neighbor whose audience and tone match, not the closest by name. A bookkeeping consultancy and a small law firm aren't the same trade, but they speak to a similar audience in a similar register, so their imagery overlaps.
Axis 3: which visual style keeps the site coherent?
Now, and only now, style. Style is the last decision because it should be made once for the whole site, not re-litigated image by image. Pick a lane — bright and minimal, warm and editorial, dark and moody, flat and illustrated — and hold to it across every page.
Coherence is the goal. Five good images in five different styles look worse together than five average images in one consistent style. When every image shares a palette, lighting feel, and level of realism, the site reads as one brand even if the individual pictures are ordinary.
A few things to lock down and reuse everywhere:
- Color temperature — warm or cool, and roughly the same across images.
- Realism level — photographic, illustrated, or abstract; don't mix freely.
- Density — how busy the frame is; heroes lean simple, standalone blocks can be busier.
- Mood — calm, energetic, serious, playful.
Style is the third axis, and how to choose a visual style for your website helps you name the lane you want in plain terms before you start looking. Decide your style once, write it down, and apply it as a constraint on every later choice.
Two worked examples
Abstractions are easy to nod along to and hard to apply, so here are the three axes run on real pages.
Example 1: the homepage hero for a local accounting firm
- Axis 1 — section job: This is a hero. Its job is to set tone and sit behind a headline and a "Book a call" button. So readability behind text is non-negotiable: the image needs calm space where the words will go, and it cannot be visually loud.
- Axis 2 — business type: Accounting for small businesses. The expectation is steady, organized, trustworthy. That rules out anything chaotic or flashy, and it also rules out cold, faceless corporate towers that feel too big for a local firm.
- Axis 3 — style: Say the site's lane is bright and minimal with cool neutral tones. The hero should match: clean, light, uncluttered, with a quiet area for the headline.
- Last filter — does it read? Of the candidates that survive the first three axes, choose the one where a test headline stays legible and nothing competes with the button.
Decision: a bright, uncluttered hero with open negative space on one side, cool and neutral, no busy detail. You reached it by elimination, not by browsing on vibes.
Example 2: a service block on a yoga studio's "Classes" page
- Axis 1 — section job: This is a feature block. The image sits beside a description of a specific class, so it should illustrate that class concretely. It stands alone, so it can carry more detail than a hero.
- Axis 2 — business type: A yoga studio. The expectation is calm, human, unhurried. Hyper-intense gym imagery would clash with the audience even though it's technically "fitness."
- Axis 3 — style: Say the studio's lane is warm and natural, soft light, earthy tones. The image should match that warmth rather than a clinical white-studio look.
- Last filter — does it read? Pick the one that's relevant to the class and sits cleanly next to the text without crowding it.
Decision: a warm, softly lit image that clearly evokes the class, detailed enough to stand on its own. Note how the section job changed everything: the same "yoga studio, warm style" inputs would produce a simpler, quieter image if this were a hero instead.
A quick comparison
| Axis | Hero (accounting firm) | Service block (yoga studio) |
|---|---|---|
| Section job | Backdrop for headline + button | Illustrate one specific class |
| Readability need | High — text sits on top | Lower — text sits beside |
| Business-type tone | Steady, organized, trustworthy | Calm, human, unhurried |
| Style fit | Bright, minimal, cool neutral | Warm, natural, soft light |
| Density | Simple, with open space | Can be more detailed |
The about page works the same way: section job (convey who's behind the business honestly), business type (match the audience's expectation), then style (the same lane as the rest of the site). Because the images are AI-generated, an about-page image won't show your actual team, so use it for tone and atmosphere rather than presenting it as a real photo of real people — and disclose AI imagery where it matters, as covered in how our images are made.
Turn it into a checklist
Once the logic is habit, it collapses into a few seconds per image. Keep this near your editor:
- Section job: What does this block do, and what must the image handle? (Readability behind text? Standing alone? Staying quiet?)
- Business type: Does the tone match what my audience expects from my kind of business?
- Style lane: Does it match the one visual style I picked for the whole site?
- Read check: With real text in place, does everything stay legible and fast to load?
- License check: Am I clear on how I'm allowed to use it?
On that last point: Picdrome images are free to use for personal and commercial website projects, subject to the Picdrome Image License. They are not public domain, not CC0, and not "royalty-free" in the paid-licensing sense — they stay covered by those terms rather than being released with no conditions, and they are AI-generated. This is general information, not legal advice; check Picdrome Image License for what your specific use allows.
The fastest way to practice is on a page you already have. Open it, pick one empty slot, run the three axes, and write the answers down so you're only choosing among candidates that already fit. You'll make the call in seconds instead of scrolling for ten minutes.
In Plain English
This is a three-step system for choosing web images: decide what the section needs the image to do, then narrow by your business type, then narrow by one consistent visual style — and only judge "does it look nice?" last. It helps anyone building a business website who keeps guessing image by image, especially non-designers. Use it every time you fill an image slot, on any page. To start, open one real page, pick an empty slot, and run the three axes — section, business type, style — writing each answer down before you look at a single image.
Where to go next
- The complete beginner's guide to using images on your website — the broader pillar this framework sits inside.
- The image mistakes this framework helps you avoid — the specific errors that lead-with-looks choosing tends to cause.
- How many images a small business homepage really needs — once you know how to choose, decide how many to choose.