You know your website needs images. What you probably don't know is which image goes where, what size it should be, whether a free image is safe to use, and how to keep the page from loading slowly or looking amateur. This guide is the map. It walks you through every basic decision once, in plain English, and then points you to a deeper guide for whichever task you need to do next.
The trick that makes the whole thing manageable is to stop thinking about "good photos" and start thinking about decisions. Every image on a website is really an answer to three questions: where does it go (which page, which section), who is it for (what kind of business and visitor), and what style fits the rest of the site. That is the same logic Picdrome's library is built on, so once you learn it here, finding the right image is just browsing by the page you're building.
What images actually do on a website
It helps to be honest about what an image can and cannot do, because a lot of advice oversells it.
A good website image does a few concrete jobs. It fills a section so the page doesn't look empty or unfinished. It stays readable when text sits on top of it. It loads quickly so visitors aren't waiting. And it matches the look of the brand so the site feels like one coherent thing rather than a collage.
That is the realistic list. An image won't fix a confusing offer, weak copy, or a checkout that doesn't work. Anyone promising that the right photo will lift your sales or make people trust you is selling a feeling, not a fact. Aim for images that fit, read clearly, and load fast, and you've done the job an image is actually there to do.
If you want the bigger-picture version of why some DIY sites feel slightly amateur even when nothing is obviously broken, the explainer on why a DIY website looks 'off' and the companion piece on what makes a website feel expensive versus cheap both come back to image decisions more than anything else.
Which image belongs on each page
The fastest way to stop feeling overwhelmed is to map images to page sections instead of hunting for "nice pictures." Most small-business sites are built from the same handful of sections, and each one wants a specific kind of image.
| Page or section | What the image is doing | What to look for |
|---|---|---|
| Homepage hero | Sets the first impression and frames your headline | Wide, calm, with room for text to sit on top |
| About page | Puts a human or workspace feel to the business | Warm, real-looking scenes; honest to who you are |
| Service / feature pages | Shows the thing you do or the result of it | Specific to the service, not a generic desk shot |
| Pricing page | Keeps the page from feeling like a bare table | Simple, low-distraction, on-brand backgrounds |
| Blog posts | Gives each article a recognizable header | Topical, consistent crop, readable as a thumbnail |
You don't need an image in every slot, and more is not better. A homepage in particular can look cluttered fast. If you're wondering how much is enough, the guide on how many images a small business homepage needs gives a section-by-section answer instead of a number to chase.
The hero is the one most people get wrong, because it has to look good at full width and behind a headline at the same time. That's a real constraint, not a style preference, and it's covered in its own guide below.
You can work this exact way. The framework for choosing the right image for any page starts from the page section and the business type rather than from keywords and hope. If you'd rather read the long-form version of this section-by-section thinking, the ultimate guide to business website images goes deeper on each page.
How to choose an image without a design background
You don't need a design eye to pick well. You need a short, repeatable check. Run every candidate image past four questions:
- Does it fit the section? A hero needs width and breathing room; a blog header can be tighter. The right shape matters as much as the subject.
- Is it specific to what you do? A roofing company is better served by a real roof than by a stock handshake. Generic equals forgettable.
- Does it match the others? Pick a consistent style, lighting, and mood across the site. Mixing a moody photo with a bright cartoon makes a site feel pieced together.
- Will text stay readable on it? If anything sits on top, the image needs quiet, even areas behind the words.
That's the whole method in four checks. For the expanded version, with examples of how to apply it to each page type, use the repeatable framework for picking the right image for any page. And before you commit, it's worth skimming the image mistakes that quietly make a site look cheap so you can avoid the few patterns that give away an amateur build, like stretched photos, mismatched styles, and obvious placeholder shots.
This is also where Picdrome's organizing logic earns its keep. Because images are filed by where they go × who they're for × what style they are, the "does it fit, is it specific, does it match" checks are mostly done for you at the browsing stage. You're choosing from a shelf that's already sorted, instead of a keyword pile.
Getting images page-ready: size, aspect ratio, and file weight
A good image used at the wrong size is a common reason a page looks blurry or loads slowly. Three things matter here, and they're easy once named.
Aspect ratio is the shape of the image (the relationship between width and height). A wide hero and a square thumbnail are different shapes, and forcing one into the other is what causes ugly cropping or stretching.
Resolution is how many pixels the image actually contains. Too few and it looks soft or blurry when stretched across a wide section; the hero is where this shows up most.
File weight is how many kilobytes or megabytes the file takes to download. Heavier files load slower, especially on phones. The goal is the smallest file that still looks sharp at the size it's displayed.
You don't have to memorize numbers. Keep a reference instead. The plain-English cheat sheet for image sizes and aspect ratios lists the common dimensions for heroes, blog headers, and thumbnails so you can match a slot without guessing. If your hero specifically looks soft, the targeted fix is in why your hero image looks blurry and how to fix it.
For file weight, the two levers are format and compression:
- Format is the file type. JPG, PNG, and WebP each suit different images, and choosing right can cut size with no visible loss. The JPG, PNG, or WebP comparison tells you which to use when.
- Compression shrinks the file. Done well, it's invisible. Done badly, it adds blocky smudges. The walkthrough on how to compress website images without making them blurry shows where the safe line is.
Check an image's actual dimensions and crop before downloading. Picdrome's initial originals are 1536 × 1024 pixels; your page may require a different aspect ratio or a smaller delivery size. You'll still want to compress and pick the right format for your own build, which the guides above cover.
Using images legally and disclosing AI honestly
This is the part beginners worry about most, and rightly. Pulling an image off a search engine and dropping it on a business page can put you on the wrong side of someone's copyright. So it's worth understanding what "free" actually means, because the word gets used loosely.
A few terms get thrown around as if they're the same thing. They aren't:
- Public domain means no copyright applies at all. Genuinely rare for modern images, and easy to claim falsely.
- CC0 is a specific Creative Commons dedication where a creator waives rights. It's a defined legal tool, not a vibe.
- Royalty-free means you don't pay per use; it does not mean unrestricted, and there are usually still terms.
Picdrome doesn't use any of those labels for its own library, on purpose, because they'd overstate what's on offer. The honest line is this: Picdrome images are free to use for personal and commercial website projects, subject to the Picdrome Image License. Read those terms once so you know exactly what's allowed for your situation.
Two more things to keep you safe. Avoid using recognizable logos, trademarks, or identifiable real people unless you clearly have the rights, since those carry their own risks regardless of where the image came from. And be honest about AI. Picdrome's images are AI-generated and disclosed as such. That matters in one specific way: an AI-generated person is not a real customer, client, or team member, so don't present one as a testimonial photo, a staff headshot, or a "happy customer." Use a real photo of a real person for anything that implies a real person.
For the practical version of all of this, including how to vet a free or AI image before you use it, see how to use free and AI-generated images safely.
This section is general information, not legal advice. For your specific situation, rely on the Picdrome Image License and, if a real legal question is at stake, a qualified professional.
Making images work for everyone: alt text and readable overlays
Two finishing touches separate a careful site from a sloppy one, and both are about making images usable by every visitor.
Alt text is a short written description of an image, read aloud by screen readers and shown if the image fails to load. It's how someone who can't see the image still understands what it shows. Good alt text is specific and plain ("a baker pulling sourdough from a stone oven"), not stuffed with keywords and not just "image1.jpg." The guide on how to write alt text with examples gives you templates, and the broader image accessibility guide covers the rest of making sure everyone can use your site.
Readable overlays matter wherever text sits on an image, which is almost always the hero. If the background is busy or bright in the wrong spots, the headline disappears. The fix is choosing images with quiet areas behind the text, or adding a subtle darkening layer. The how-to is in picking background images that keep your text readable.
Accessibility guidance here is general and practical, not a substitute for professional accessibility auditing if you have legal obligations to meet.
In Plain English
What this is: a starting map for putting images on a website, organized by the decisions that actually matter: which image each page section needs, how to choose without a design background, how to size and compress it, how to use free and AI images legally, and how to write alt text and keep overlays readable.
Who it helps: non-designer founders, freelancers, and DIY builders who know their site needs images but don't know the basics yet.
When to use it: at the start, to get oriented, and then as a hub you return to when you hit a specific task and need the deeper guide for it.
What to do next: work through the right-image framework for the page you're building, then open whichever guide below matches your next step.
Where to go next
- The Real Reason Your DIY Website Looks 'Off' — what gives an amateur build away
- 8 Website Image Mistakes That Make a Site Look Cheap — the patterns to avoid
- How to Choose the Right Image for Any Web Page (A Framework) — the full picking method
- Website Image Sizes and Aspect Ratios: A Plain-English Cheat Sheet — dimensions for every slot
- How to Compress Website Images Without Making Them Blurry — shrink files safely
- JPG, PNG, or WebP: Which Format Should You Use? — pick the right file type
- Why Your Hero Image Looks Blurry (And How to Fix It) — sharpen the most important image
- How to Write Alt Text for Website Images (With Examples) — describe images well
- Image Accessibility: Making Sure Everyone Can Use Your Site — the broader accessibility view
- Picking Background Images That Keep Your Text Readable — keep headlines legible
- How Many Images Does a Small Business Homepage Need? — how much is enough
- What Makes a Website Feel Expensive vs Cheap — the perception behind it all
Common Questions
Are free images safe to use on a business website?
It depends entirely on the terms attached to them, not on the word "free." Read the license before you use anything. Picdrome images are free for personal and commercial website projects under the Picdrome Image License; other sites set their own rules.
Can I use AI-generated images on my site?
Yes, within the license that covers them. The one rule to keep is honesty: an AI-generated person is not a real customer or team member, so don't use one as a testimonial photo or staff headshot.
What's the most common beginner image mistake?
Using an image at the wrong size or shape, which causes blurry heroes and bad crops, closely followed by mixing clashing styles across pages. The image mistakes guide covers the full list.