The single biggest indicator of a DIY website isn't the template you've chosen or the colours you've picked—it's the low-quality or obviously fake stock photos scattered across your pages. You know the ones: the impossibly perfect office with models pretending to work, the handshake that screams "generic business," the laughing-at-salad woman who appears on 10,000 other websites.
Real photos build trust instantly. When visitors see an actual human behind the business, a genuine workspace, or real products in use, they instinctively believe you're legitimate. The problem? Most micro-business owners think "professional photography" means hiring an expensive photographer or owning fancy equipment.
Here's the truth: You don't need glossy magazine quality. You need the "Good Enough" standard—well-lit, in focus, and relevant. Your smartphone camera is already capable of producing website-ready images that will dramatically outperform stock photos. The difference between amateur-looking and professional-looking photos isn't the camera. It's knowing five simple techniques.
This guide will walk you through capturing and optimizing 10-15 foundational images that will transform how your website looks and how visitors perceive your business. We're not aiming for perfection. We're aiming for authenticity, clarity, and trust.
Jump to: Quick Start | Complete Guide | Troubleshooting
Quick Start (45 Minutes)
The 5 Essential Actions
1. Designate Your 'Shooting Zone' and Maximise Natural Light
Find a spot near a large window where natural light floods in. This is your shooting zone. Avoid overhead lights or lamps—they create harsh shadows and yellow/orange colour casts. Natural light is soft, flattering, and makes everything look more professional. Shoot during daylight hours, ideally mid-morning or mid-afternoon when the light is bright but not harsh.
2. Capture Your Key Assets
Take these three critical shots first:
- •Professional headshot: Stand facing the window (light on your face, not behind you). Frame from mid-chest up. Smile naturally. Take 10 versions and pick the best.
- •Service or product in focus: If you're a consultant, photograph your workspace or laptop. If you sell products, photograph your best-seller with clean background space around it.
- •Your working environment: Step back and capture the space where you work or create. This humanises your business.
3. Use Your Phone's Built-In Grid (Rule of Thirds)
Enable the grid in your camera settings (usually under Settings > Camera > Grid). This overlays nine rectangles on your screen. Place your subject where the lines intersect—not dead centre. This instantly makes photos more engaging and professional-looking.
4. Crop and Adjust Exposure Slightly
Open each photo in your phone's built-in editor. Crop out distracting elements and straighten the horizon if needed. Adjust the brightness slider slightly if the image looks too dark. Do not use heavy filters, vintage effects, or saturation boosts—they scream "amateur" and make your site look inconsistent.
5. Run Final Images Through a Compression Tool
Visit TinyPNG.com or a similar free tool. Drag your 5 final images into the browser. Download the compressed versions. These will be 50-70% smaller in file size but look identical to the human eye. Save them with specific filenames like `about-page-headshot.jpg` or `homepage-hero-workspace.jpg`.
Not sure you've covered the prerequisites, or worried your existing site is already slow? NetNav's audit checks image file sizes and optimisation scores on your current site in 60 seconds.
✅ Completed the quick version? You have 5 high-quality images ready. Move on to Trust Signals That Make You Look Professional or continue below for the detailed walkthrough of composition and optimisation.
Complete Step-by-Step Guide: The Hierarchy of Website Shots
Step 1: Plan Your Shots (The Essential 10)
Before you start clicking, understand which images deliver the most value. Not all photos are created equal. These 10 shots form the foundation of a trustworthy, professional-looking website:
The Human Element (Priority 1):
- Professional headshot – Your face builds trust faster than any copy. This goes on your About page, contact page, and potentially your homepage.
- Action shot – You doing the work. Consulting on a call, creating a product, serving a client. This proves you're real.
The Service/Product Focus (Priority 2):
- Hero product shot – Your best-seller or signature service visualised. Clean background, well-lit, in focus.
- Detail shot – A close-up showing quality, texture, or craftsmanship. This works for both physical products and service-based businesses (e.g., a close-up of your design work on screen).
- The result – What the customer gets. The finished product, the transformed space, the completed project.
The Environment (Priority 3):
- Workspace wide shot – Your office, studio, or workshop. This humanises your business and shows you're established.
- Tools of the trade – Your equipment, materials, or technology. A flat lay of your essential tools works brilliantly.
The Context (Priority 4):
- Location shot – If you have a physical location customers visit, photograph the exterior or entrance.
- Team or collaboration shot – If you work with others, show it. Even a photo of you with a satisfied client (with permission) builds credibility.
- The contact shot – A welcoming image for your contact page. You at your desk, smiling, or your workspace with a "let's talk" feel.
This hierarchy ensures you capture the images that matter most first. If you only have time for five shots, take the first five. For more guidance on where these images fit into your overall site structure, see What Should I Put on My Homepage?
Step 2: Mastering Light and Background
Natural light is non-negotiable. It's the single factor that separates amateur photos from professional-looking ones. Here's why: artificial lighting (overhead bulbs, lamps, flash) creates harsh shadows, unflattering colour casts, and uneven exposure. Natural light from a window is soft, diffused, and flattering.
The Window Technique:
- •Position yourself or your subject 1-2 metres from a large window
- •The light should hit your subject from the side or front—never from behind (that creates a silhouette)
- •Shoot during the day when natural light is abundant
- •Overcast days are actually ideal—the clouds act as a giant diffuser, creating soft, even light
Background Matters:
Your background should be clean and uncluttered. A plain wall, a tidy workspace, or a simple outdoor setting works best. Avoid busy patterns, bright colours, or distracting objects in the frame. If you're shooting specific products, a white poster board or large sheet of paper creates a clean backdrop for under £5.
The Flat Lay Exception:
For product photography or "tools of the trade" shots, shoot from directly above on a clean surface. Place items on a white or neutral background. Use window light from the side to avoid your shadow appearing in the frame.
[MEDIA:PHOTO:good-bad-lighting]
Example of good natural light (soft shadow, near window) vs. harsh overhead or flash lighting.
Step 3: Composition Secrets (Rule of Thirds)
The Rule of Thirds is the fastest way to make your photos look intentional and professional. Here's how it works:
Imagine your frame divided into nine equal rectangles (three rows, three columns). The four points where these lines intersect are "power points"—the spots where the human eye naturally looks first. Place your subject on or near one of these points instead of dead centre.
Why This Works:
- •Centred subjects feel static and boring
- •Off-centre subjects create visual interest and movement
- •Negative space (empty space) around your subject makes the image feel less cluttered
How to Use It:
- Enable the grid overlay in your camera settings
- Position your subject where the lines intersect
- Leave space in the direction your subject is "looking" or "moving"
Example: For a headshot, position your face on the left or right third of the frame, not in the centre. For a product shot, place the product on one side and leave negative space on the other.
A visual representation of the rule of thirds grid with the subject placed on one of the intersecting points.
Website speed is hugely impacted by large image files. While you're focusing on the visual quality here, remember the optimisation step is non-negotiable. This is one of the checks NetNav runs automatically across your whole site, flagging any images over 200kb that need shrinking.
Step 4: The Minimalist Edit (Crop, Exposure, Consistency)
Heavy filtering is the enemy of professional-looking websites. Instagram filters, vintage effects, and over-saturated colours make your site look amateurish and inconsistent. Instead, focus on three simple edits:
Crop for Impact:
- •Remove distracting elements at the edges
- •Straighten horizons or vertical lines
- •Tighten the frame around your subject
- •Maintain the aspect ratio (don't stretch or squash)
Adjust Exposure:
- •If the image looks too dark, increase brightness slightly
- •If it looks washed out, decrease exposure slightly
- •Aim for consistent brightness across all your images
- •Use your phone's built-in editor—it's sufficient for this
Maintain Consistency:
- •All your images should have similar brightness levels
- •Avoid mixing warm-toned and cool-toned images
- •If one image has high contrast, apply similar contrast to others
- •Consistency signals professionalism
What to Avoid:
- •Heavy filters (Valencia, X-Pro II, etc.)
- •Black and white conversions (unless your entire brand is monochrome)
- •Vignettes (darkened edges)
- •Excessive saturation or vibrance
- •Sharpening filters (they create artificial-looking edges)
For more on maintaining visual consistency across your site, see Design Basics for Non-Designers.
Step 5: The Critical Optimisation Step
This step is where most people fail. They upload beautiful, high-resolution images directly from their phone—and wonder why their website loads slowly. Large image files drastically impact your website speed, which affects both user experience and search engine rankings.
Understanding File Formats:
- •JPG – Use for photographs. Smaller file sizes, good quality. This is your default.
- •PNG – Use only for logos or graphics with transparent backgrounds. Larger file sizes.
- •WebP – Modern format with excellent compression. Not all platforms support it yet.
The Compression Process:
- Visit TinyPNG.com, Squoosh.app, or similar free tool
- Drag your edited images into the browser
- Wait for compression (usually 50-70% reduction)
- Download the optimised versions
- Delete the originals and use only the compressed versions
Target File Sizes:
- •Hero images (full-width): Under 150kb
- •Standard content images: Under 100kb
- •Thumbnails or small images: Under 50kb
Quality Check:
Open the compressed image at 100% zoom. If it looks sharp and clear, you're done. If it looks pixelated or blurry, the compression was too aggressive—try again with lower compression settings.
Screenshot of a drag-and-drop online compression tool showing "File Size Reduced by X%".
Step 6: Naming and Storing
Proper file naming and organisation simplify your website launch and improve your search engine optimisation. Random filenames like `IMG_2847.jpg` tell search engines nothing. Descriptive filenames help.
Naming Convention:
- •Use lowercase letters only
- •Separate words with hyphens (not underscores or spaces)
- •Include relevant keywords
- •Indicate the page or purpose
Examples:
- •`about-page-headshot-jane-smith.jpg`
- •`homepage-hero-workspace.jpg`
- •`service-page-consultation-action.jpg`
- •`product-detail-handmade-candle.jpg`
Folder Structure:
Create a dedicated folder on your computer called "Website Images" with subfolders:
- •`/originals` – Keep your unedited versions here as backup
- •`/edited` – Your cropped and adjusted versions
- •`/optimised` – Your final, compressed, web-ready versions
This system ensures you always know which version to upload and can quickly find images when updating your site.
🎉 Completed? Your image bank is complete and optimised. You're ready for Trust Signals That Make You Look Professional.
Troubleshooting
What's Next: Secure Your Trust
You've replaced generic stock photos with authentic, professional-looking images. This single change puts you ahead of 70% of micro-business websites. But images are just one element of a trustworthy website.
Next, you need to integrate the trust signals that make visitors feel confident enough to contact you or make a purchase. These include customer reviews, guarantees, security badges, and professional legal links.
Continue to: Trust Signals That Make You Look Professional
Go Deeper
Want to refine your visual strategy further?
- •Choose Photos & Visuals That Don't Look Cheap – For the full guide on choosing image quality standards and visual brand consistency.
- •DIY Graphic Design with Canva – Learn how to combine your new photos with text overlays or visual assets.
Other Get Online Guides
- •Plan Your Website Structure in 30 Minutes
- •Write Your Homepage in 1 Hour (Template)
- •How Do I Write Good Service Pages?
- •Write an About Page People Actually Read
- •Mobile-First Design Explained Simply
- •Anatomy of a High-Converting Homepage
Ready to See How Your Whole Site Measures Up?
You've completed a crucial step: replacing cheap stock images with authentic, high-quality visuals. Now that your photo assets are ready, see how the rest of your website holds up.
NetNav can audit your entire site across 9 pillars in 60 seconds—check your speed, accessibility, and trust signals before launching your new visuals. Get your personalised report and discover what else might be holding your website back.