The complete guide to choosing images for your business website
A practical, no-jargon guide to picking, placing, sizing, and licensing the images on a business website — written for founders and non-designers.
By Picdrome. A long read, but skimmable — jump to any section below.
What this guide covers
- What good website images actually do
- Match the image to the page
- Pick a consistent visual style
- Size, format, and speed
- Accessibility: alt text and contrast
- Licensing without the worry
- Common mistakes to avoid
- Frequently asked questions
If you are building or refreshing a business website and the image choices feel like guesswork, this guide is for you. You do not need a design background. We walk through the decisions in the order you actually face them: what an image is for, where it goes, what style to use, how to size and export it, how to keep it accessible, and how to check the license. Picdrome also offers original AI-generated images; this guide helps you choose and check images from a source you trust.
Get started: Choose the right image for a page · Choose by page section · Image sizes cheat sheet · Using free & AI images safely
What good website images actually do
Let us be honest about what an image can and cannot do. An image does not magically increase conversions, build trust, or generate sales on its own. What a well-chosen image does is more concrete and more reliable: it communicates an idea faster than text, sets the tone of the page, and stays readable behind any headline or button placed on top of it.
Think of an image as supporting the words around it. When someone lands on your homepage, the right picture tells them "you are in the right place" before they read a single sentence. On a service page, an image can show what the work looks like. On an about page, it can give the business a human, grounded feel. None of that requires hype — it just requires the image to fit the message.
- It communicates — A picture sets context in a glance, so the copy has less work to do.
- It sets tone — Warm and friendly, clean and technical, calm and premium: the image signals tone before anyone reads.
- It stays readable — A good hero leaves room for text and keeps that text legible. Readability beats "impressive but busy".
- It loads fast — An image sized and compressed sensibly does not slow the page or push the layout around.
The goal for the rest of this guide is simple: choose images that fit the page, stay readable, and load fast. Do those three things and the rest tends to fall into place.
Match the image to the page
The single most useful habit is to choose an image by where it goes. A hero image has a different job from a thumbnail in a service grid, which has a different job from a portrait on an about page. When you match the image to the page section, the choice gets easier and the result looks more deliberate.
See what each spot needs on the use-case hub, and a full breakdown in the page map: the right image for each website page.
| Page section | What the image is doing | Practical tip |
|---|---|---|
| Hero | Sets the first impression and holds the headline and main button. | Leave clear space for text. Avoid busy detail where the words sit. |
| About | Makes the business feel human and grounded. | Pick something that matches your real tone, not a generic boardroom. |
| Service | Shows what the work or outcome looks like. | Use a consistent crop and ratio across every service card. |
| Pricing | Adds a light visual cue without distracting from the numbers. | Keep it simple. Pricing pages reward clarity over decoration. |
| Blog | Gives each post a recognisable thumbnail and header. | Use one ratio for every post so the index looks tidy. |
A quick rule: the closer an image is to a decision point — a hero, a pricing section, a contact form — the calmer and more readable it should be. Save the more detailed, atmospheric images for sections where the visitor is browsing rather than deciding.
Pick a consistent visual style
One mismatched image can make a whole page feel off. The fix is to decide on a style once, then apply it everywhere. Three decisions cover most of it.
- Photo, illustration, or 3D — Photographic feels real and concrete. Illustration feels approachable and flexible. 3D feels modern and product-led. Pick one lane as your default.
- Warm or cool — Warm tones read friendly and inviting. Cool tones read calm, clean, and technical. Choose the temperature that matches your business.
- Busy or minimal — Minimal images keep text readable and pages fast. Busier images suit gallery-style sections. Lean minimal near headlines and buttons.
Consistency matters more than the specific choice. A site that commits to clean, cool-toned illustrations looks intentional; a site that mixes warm photos, cartoon icons, and dark 3D renders looks accidental. Once you pick a lane, keep it across the homepage, service pages, and blog.
For a step-by-step method, read how to choose a visual style for your website, and for the vocabulary behind the choices, see the visual style glossary.
Size, format, and speed
A great image still hurts the page if it is the wrong size or exported badly. Two things go wrong most often: images that are far larger than they need to be (slow to load), and images that are too small for where they are placed (blurry when stretched). Aim for the right dimensions, then compress.
Aspect ratios
Match the ratio to the slot. Wide hero banners are usually around 16:9 or wider. Cards and thumbnails are often square (1:1) or a gentle landscape (4:3). Portraits for an about page lean tall (3:4 or 4:5). Decide the ratio per slot and crop to it so nothing important gets cut off. The image sizes cheat sheet lists common dimensions you can copy.
JPG, PNG, or WebP
| Format | Best for | Notes |
|---|---|---|
| JPG | Photos and detailed images | Small files, no transparency. Fine for most heroes and photos. |
| PNG | Logos, flat graphics, anything needing transparency | Larger files. Use when you need sharp edges or a transparent background. |
| WebP | Almost everything, when supported | Smaller than JPG and PNG at similar quality. A strong modern default. |
For a deeper comparison, read JPG vs PNG vs WebP. When in doubt: WebP for most images, JPG as a safe fallback, PNG only when you need transparency.
Compression
Compression shrinks the file so the page loads faster, usually with no visible quality loss at sensible settings. Export at the dimensions you actually need — do not drop a 4000-pixel image into a 600-pixel slot — and then compress. The walkthrough in how to compress website images covers the settings step by step.
Accessibility: alt text and contrast
Note: Accessibility rules and standards evolve, and the right approach can depend on your audience and region. Treat the points below as a practical starting point, not legal or compliance advice, and confirm specifics for your situation.
Two accessibility basics apply to almost every business website: meaningful images need alt text, and text placed over an image needs enough contrast to read.
Alt text
Alt text is a short written description of an image. It is read aloud by screen readers and shown if an image fails to load. Every meaningful image should have alt text that describes what the image shows in plain language. Images that are purely decorative can have empty alt text so screen readers skip them. Keep descriptions specific and brief — describe the content, not the file.
For a full method, read how to write alt text for images, which has worked examples you can adapt for each slot.
Contrast over images
When a headline sits on top of an image, the text has to stay readable against whatever is behind it. Choose images with a calmer area where the text goes, or add a subtle overlay or gradient so the words separate cleanly from the background. If you have to squint to read it, the contrast is not enough yet.
Licensing without the worry
Licensing is where a lot of founders get nervous, so here is the plain version. Every image comes from somewhere — a stock library, a photographer, an AI image tool, a client — and the current license or terms at that source decide what you may do with it. Before an image goes on your business site, landing pages, or blog, read that license and confirm it covers commercial website use, and note any attribution rule.
How to describe it honestly: Picdrome originals use the Picdrome License; images from other sources keep their own terms. Don't call an image public domain, CC0, royalty-free, or unrestricted unless its source says so — "free" describes cost, not copyright status. This page is guidance, not legal advice.
If an image is AI-generated, be honest about that where it is relevant, rather than implying a generated person is a real customer or team member. For the practical do-and-do-not list, read using free and AI images safely. When in doubt about a specific use, run it through the pre-publish image rights check.
Common mistakes to avoid
Most image problems on business websites come down to a handful of repeat offenders. If you only fix these, your pages will already look more considered.
- Overused stock that everyone recognises. If an image feels generic, it makes the whole page feel generic. Choose something that fits your specific tone.
- Mismatched styles on one page. A warm photo next to a flat icon next to a dark 3D render reads as accidental. Pick one lane and stay in it.
- Blurry heroes. Usually caused by stretching a small image to fill a large slot. Start from a large enough source and crop down, never up.
- Unreadable text over images. Low contrast between the headline and the background. Use a calmer area, an overlay, or a gradient.
- Oversized files. Dropping a huge image into a small slot slows the page. Size to the slot, then compress.
For more examples and fixes, read common website image mistakes.
Put it into practice
You now have the full decision path: what the image is for, where it goes, what style to use, how to size and export it, how to keep it accessible, and how to check the license. The fastest next step is to settle what the page you are working on needs.
Choose the right image for a page · Choose by page section · Image sizes cheat sheet · Using free & AI images safely
Frequently asked questions
How many images does a homepage need?
Fewer than most people think. A common pattern is one strong hero image, one supporting image per major section (about, services, social proof), and small thumbnails where they help. If a section reads clearly without an image, it does not need one. Aim for purpose over quantity.
Where do I put images on a service page?
Usually one lead image near the top that shows the service or its outcome, then a consistent set of smaller images if you list multiple services in a grid. Keep the ratio and crop identical across the grid so it looks tidy, and leave the area near any call-to-action calm and readable.
What size should a hero image be?
Wide and large enough to stay sharp on big screens, commonly around a 16:9 ratio. Start from a source larger than the slot, crop to your ratio, and then compress so it loads quickly. Exact pixel dimensions for common slots are listed on the image sizes cheat sheet.
Photo or illustration — which should I use?
Either works; consistency matters more than the choice. Photos feel concrete and real; illustrations feel approachable and flexible. Pick the one that matches your tone and use it as your default across the site. See the visual style walkthrough if you are unsure.
Can I use an image commercially?
Only if the license at its source allows it. Read the current terms where the image comes from and confirm they cover commercial website use; if they don't clearly do, choose another image. Using AI images commercially covers the extra checks for generated images. This is guidance, not legal advice.
Do I need to write alt text for every image?
Write alt text for every meaningful image so screen readers and search engines can understand it. Purely decorative images can use empty alt text so they are skipped. Our guide on writing alt text makes this quick.
Why does my hero image look blurry?
Almost always because a small image is being stretched to fill a large area. Start from a source bigger than the slot and crop down rather than scaling up. Also check you have not over-compressed it. Match dimensions to the slot using the cheat sheet.
In short
To choose images for a business website: match each image to the page section it sits in, commit to one consistent visual style, size and compress images so pages load fast, give every meaningful image alt text and keep overlaid text readable, and confirm the license at each image's source covers your use before you publish.
Start at the right-image framework, choose by section on the use-case hub, grab dimensions from the size cheat sheet, and read using free and AI images safely before you publish.