You built the pages. The home page, the about page, a couple of service pages, maybe a pricing table and a contact form. Then you reach the part where each one needs an image, and you start guessing. A photo that felt right on the homepage looks odd on the about page. The service section and the blog header end up using the same kind of stock shot, so the whole site reads as slightly mismatched, section to section.
That mismatch usually isn't a quality problem. The images can each be fine on their own and still pull in different directions, because they were chosen one at a time, by mood, instead of by job. This guide fixes that by giving you a single map: walk your site section by section, and for each one, decide what that section is trying to say first, then choose the image that supports that specific message.
That ordering is the whole idea. Every page section has a different communication job, so it needs a different kind of image. Once you can name the job, the right image gets a lot easier to pick.
Every section has its own image job
A website is not one canvas. It's a sequence of small jobs stacked down the page, and each one is trying to communicate something narrow. The hero is making a first impression and holding a headline. The about section is building a sense of who's behind the business. A service block is explaining what you actually do. A pricing table is helping someone compare and choose. A blog header is setting the topic before the first paragraph.
When you pick an image without naming that job, you tend to default to "nice photo," and nice photos don't all do the same work. A warm, candid scene that suits an about page can look soft and unconvincing behind a sharp service headline. A clean, product-style shot that explains a service can feel cold and corporate on an about page. Neither image is wrong. They're just answering different questions.
This is the where-it-goes idea that Picdrome is built around. Start from the spot an image must fill, then evaluate the actual available images for that job: calm space for a headline, a useful crop, and legibility at the displayed size. The website image use-case hub explains that selection method, and this guide provides its page-by-page map.
One honest note before the section-by-section walk: not every section needs a photo. Some of the most professional-looking pages use restraint on purpose. We'll mark those spots as we go, because adding an image where one isn't needed is its own kind of mismatch.
A quick word on what images can and can't do. A well-matched image fits the section, stays readable behind any text, loads fast, and looks like it belongs to your brand. That's the job. You'll see claims elsewhere that the right hero image lifts conversions or builds instant trust; treat those as marketing, not facts. The realistic goal is a site that looks coherent and intentional, where nothing makes a visitor pause and wonder why a picture is there.
The homepage hero: the image that sets the tone
The hero is the top of your homepage, usually a wide band carrying your main headline, a sentence of support, and a button. It's the first thing most visitors see, and people form an impression of a site's look very quickly. So the hero's job is twofold: make a clean first impression and stay out of the way of your words.
That second part trips up most beginners. A hero image isn't a standalone photo; it's a backdrop for text. The best hero images are wide, uncluttered, and calm in the area where your headline and button sit. They have room to breathe. A busy, high-detail image might look great in a gallery and then swallow your headline the moment you place text on top.
Practical things to check for a hero:
- Room for words. Is there a calm, low-detail zone where a headline and button can sit and stay readable? This is an easy hero mistake to overlook.
- Wide aspect ratio. Heroes usually span the full width of the page, so a tall portrait shot gets cropped badly. Reach for wide compositions.
- Tone that matches the business. A calm, premium service and a loud, playful product want different hero moods. The hero sets the emotional register for everything below it.
- Fast loading. It's the first image a visitor downloads, so keep the file efficient. A heavy hero that loads slowly undercuts the first impression before anyone reads a word.
There's enough that goes wrong here to warrant its own piece. If your homepage feels off and you can't name why, 5 homepage hero image mistakes that make businesses look amateur covers the specific traps, and if you're deciding between a photographic backdrop and a plain color block, background image vs solid color for landing pages walks through that call. To start from images already composed with headline space, browse homepage hero images in the use-case hub.
About, contact, and trust sections: images that feel human
The about page and contact section have a different job from the hero. The hero makes an impression; these sections build a sense that a real, reachable business is behind the screen. The image work here should feel warmer and more human, less like an ad and more like a glimpse of who you are.
This is where founders without a team or a photographer get stuck, because the obvious answer is "a photo of us," and there isn't one yet. You have good options that don't require a camera crew:
- The workspace or setting. A calm shot of the kind of place the work happens reads as human without needing faces. For a lot of solo businesses this is the most honest choice.
- The craft or materials. Hands at work, tools, ingredients, the thing you make. This communicates "real person doing real work" and sidesteps the team-photo problem entirely.
- A representative scene. A warm, candid-feeling environment that matches your story and tone.
A word of caution if you use an AI-generated image of a person as a stand-in on an about or team section. Picdrome's images are AI-generated, and the people in them are not real. An AI-generated "team member" or "happy customer" is not an actual member of your team or a real customer, and presenting it as one is both misleading and against the Picdrome Image License. Use these images to set a human tone, not to fake people who don't exist. If your about page is the spot you're stuck on, what to put on your about page when you have no team photos is the deeper guide, and the about page collection in the use-case hub holds scenes shaped for exactly this.
The contact section follows the same instinct: keep it approachable and uncluttered. Often a single calm image, or a clean map and a clear form, does more than a busy photo. Restraint reads as confidence here.
Service, feature, and product sections: images that explain the offer
Service and feature blocks have the most concrete job on the site. They have to make an abstract offer feel real. When someone reads "we handle bookkeeping for small shops" or "deep-clean for rental turnovers," a good image shows the kind of work or setting that describes, so the words land faster.
The bar here is clarity, not beauty. Ask one question of any service image: does this help a visitor picture what they'd actually get? A generic shot of people shaking hands in an office tells nobody what you do. A clean image of the real setting, the tool, the work, or the result does the explaining.
| Service type | An image that explains it | A vague image to avoid |
|---|---|---|
| Home cleaning | A bright, tidy room after a clean | A stock team smiling at a desk |
| Bookkeeping / finance | A clear, organized workspace with the work in view | A generic handshake |
| Coaching / consulting | A focused one-on-one or working session | An abstract lightbulb graphic |
| Product feature | The product in real use, showing the benefit | A logo on a colored block |
For each distinct service, try to match the image to that specific offer rather than reusing one catch-all photo across the page. A page of three services with three matching images reads as a real, considered business. The same photo three times reads as a placeholder. If you sell products, the same rule applies: show the item in honest use so the feature explains itself.
To go deeper on choosing visuals that actually carry meaning, see how to pick service page images that explain what you do, and start from service page images in the use-case hub, which are picked to show work and settings rather than generic office scenes.
Pricing, testimonials, and quiet sections: when to use less, or nothing
Here's the section most guides skip, and it matters as much as the loud ones. Some parts of a website are better with subtle imagery or none at all. Forcing a photo into them is a common way to make a clean page look cluttered.
Pricing tables are a strong example. A pricing section's job is to help someone compare plans and choose, which is a reading-and-scanning task. A big photo behind or between the plans competes with the numbers and slows the decision. Most pricing pages look best with a clean layout, clear plan columns, and at most a quiet background tone or a small supporting image well away from the table itself. When you do want something behind the plans, keep it low-contrast and out of the way. Pricing page imagery: what to show behind your plans goes into the specific choices.
Testimonial blocks want restraint too. A dense block of quotes is already text-heavy, and stacking busy imagery behind or beside it makes the quotes harder to read. A small, calm supporting image, plenty of whitespace, or a simple quote-card style usually beats a full photo. If you have real customer photos with permission, those are ideal; if you don't, keep the section quiet rather than filling it with a generic stock face that implies a customer who isn't real.
A simple way to decide whether a quiet section needs an image at all:
| Section | Default image choice | When to add more |
|---|---|---|
| Pricing table | None, or a subtle background tone | A small, low-contrast supporting image set apart from the plans |
| Testimonials / quotes | Whitespace and clean quote styling | Real, permitted customer photos only |
| FAQ / fine print | Usually none | A small section icon at most |
| Footer | None | A simple brand mark |
The principle: if an image doesn't help the reader do the section's job, leaving it out is the better design choice, not a gap to fill.
Blog headers and email images: small spaces, real constraints
Blog headers set the topic before the first line of an article and need to read fast at the top of the page. They're optional more often than people assume; a strong post with clean typography can stand without one. When you do use a header, pick something that signals the subject at a glance rather than a decorative photo that could sit on any article. Do blog header images still matter, and when to use them helps you decide per post, and the blog header collection holds topic-setting options.
Email and newsletter images carry constraints the rest of your site doesn't. Inboxes render images inconsistently, some clients block them by default, and a heavy image can clip or fail to load. So email images should be simple, lightweight, and designed to look fine even if they don't appear at all. Keep the message readable in text alone, and treat the image as support. Choosing email newsletter images that don't break in inboxes covers the practical sizing and fallback rules.
The reusable rule: match the image to what the section is trying to say
If you remember one thing, make it this. Before you pick any image, finish this sentence for the section in front of you: this part of the page is trying to say ______. Then choose the image that supports that sentence, and only that.
- Hero is trying to say here's who we are, at a glance → wide, calm, room for a headline.
- About is trying to say real people are behind this → warm, human, honest about what's AI-generated.
- Service is trying to say here's exactly what you'll get → clear, specific, shows the work.
- Pricing is trying to say compare and choose easily → minimal, often no image at all.
- Blog header is trying to say here's the topic → fast-reading, subject-signaling, optional.
- Email is trying to say here's the message → light, robust, readable without the image.
Across all of them, three baseline checks always apply: the image stays readable behind any text, it loads fast, and it matches your brand's tone so the page below the hero doesn't feel like a different website. A site where every section passes those checks looks intentional, which is most of what "professional" means in practice.
On licensing, one plain line so you can build without worry: Picdrome images are free to use for personal and commercial website projects, subject to the Picdrome Image License. They're AI-generated, so the people in them are not real, and you shouldn't present them as actual customers or team members. They are not public domain, not CC0, and not "royalty-free" in the paid-license sense; they stay covered by the terms rather than released with no conditions. This is general information, not legal advice, so check the Picdrome Image License for the details.
Put the map to work
Reading about it is one thing; walking your own pages is where it sticks. Open your site, go section by section, and for each spot write down what it's trying to say and what image job that implies.
To make that faster, a quick cheat sheet of image types for each page lays out common page sections next to the image type that usually fits, so you can match your pages against it in one pass. If you'd rather work it out slot by slot, the right-image framework does that in three questions. And when you know what each section needs, the use-case hub explains the same where-it-goes structure this guide follows. For a one-page reference, a quick cheat sheet of image types for each page sums it up.
In Plain English
What this is: a section-by-section map for choosing website images. For each part of your site, you name what the section is trying to say, then pick the image that supports that job, instead of guessing one image at a time.
Who it helps: founders, freelancers, and no-code or AI-builder users who have pages built but keep ending up with a site that looks mismatched from section to section.
When to use it: any time you're filling images on a business website, especially when a page feels off and you can't say why. It's also a good pre-launch pass.
What to do next: walk your own pages with the cheat sheet of image types for each page, name each section's job, then pull matching images from the use-case hub. Remember that some sections (pricing tables, dense testimonials) are best with little or no imagery, and that AI-generated people are never real customers or team members.
Where to go next
This guide is the overview. Each post below takes one section or problem and goes deeper.
- Why Your Website Looks Generic (And It's Usually the Photos): the most common reason a site feels off, and where to start fixing it.
- What Makes a Website Look Professional Instead of Amateur: the small visual choices that separate the two.
- 5 Homepage Hero Image Mistakes That Make Businesses Look Amateur: the specific hero traps and how to avoid them.
- What to Put on Your About Page When You Have No Team Photos: human-feeling about images without a photographer.
- Where to Find Free Website Images That Don't Look Like Stock: sourcing images that don't read as generic.
- Why Your Website Doesn't Look Like the Brands You Admire: the gap between your site and the ones you like.
- How Fast Visitors Judge Your Website on Looks Alone: why first impressions form so quickly.
- Do Blog Header Images Still Matter? When to Use Them: when a header earns its place and when to skip it.
- Pricing Page Imagery: What to Show Behind Your Plans: restraint and the few images that work.
- How to Pick Service Page Images That Explain What You Do: images that make an offer concrete.
- Background Image vs Solid Color for Landing Pages: How to Decide: choosing between a photo backdrop and a plain block.
- Choosing Email Newsletter Images That Don't Break in Inboxes: sizing and fallback rules for email.
- Which Free Image Types Fit Which Pages (A Quick Cheat Sheet): the one-page version of this map.