Good Images Build Trust. Bad Images Destroy It. Here’s How to Get Them Right.
TL;DR: Your website images directly affect credibility, page speed, and conversion rates. Stock photos of handshakes erode trust. Uncompressed images kill load time. Missing alt text hurts SEO and accessibility. This guide covers what types of images your site needs, how to shoot them affordably, how to optimize them for web performance, and the technical specs your developer needs.
I can spot a stock photo website from across the room. The smiling businesspeople in a conference room who clearly don’t work together. The perfectly diverse team photo that’s a bit too perfect. The laptop-on-a-wooden-desk shot that every other agency uses too.
These images don’t build trust. They signal that the business couldn’t be bothered to show who they actually are.
On the other end, I’ve seen clients send 15MB photos straight from a DSLR camera, wondering why their website loads so slowly. One homepage had five hero images totaling 47MB. The page took 14 seconds to load on mobile. Every visitor who waited that long deserves a medal.
Good web images sit in the middle: authentic enough to build trust, optimized enough to load fast, and tagged properly for SEO and accessibility.
What Images Your Website Actually Needs
Not every page needs a photo. But certain images carry outsized impact.
Team photos. The single most trust-building image category. Real photos of real people who work at your business. Not posed corporate headshots in front of a blue gradient. Natural, well-lit photos of your actual team in your actual workspace. Visitors want to know who they’re hiring.
Work samples and portfolio shots. Screenshots, photos, or videos of your completed projects. For a web agency, that means screenshots of live websites you’ve built. For a restaurant, that means food photography. For a contractor, that means before-and-after project photos. Our portfolio uses project screenshots paired with descriptions of what was achieved.
Office or workspace photos. Even a small, modest office looks more credible than no photos at all. These establish that your business has a physical presence.
Product photos (for e-commerce). Clean, consistent product images on white or neutral backgrounds. Multiple angles. Lifestyle shots showing the product in use.
Client logos. Simple, low-file-size graphics showing who you’ve worked with. These belong on the homepage as social proof.
Shooting Decent Photos Without a Professional
Professional photography costs $200 to $2,000 depending on scope. It’s worth it if the budget allows. But if it doesn’t, a modern smartphone produces acceptable results when you follow basic rules.
Lighting matters most. Natural light near a window beats any built-in flash. Shoot during daytime with the light source facing your subject, not behind them. Avoid harsh overhead fluorescent lighting.
Clean the background. Remove clutter, cords, and personal items from the frame. A clean desk, a plain wall, or an organized workspace looks professional. A messy background looks amateur regardless of how good the camera is.
Shoot horizontal for headers, square for thumbnails. Most website layouts use landscape-orientation images for hero sections and banners. Blog thumbnails and social previews work best at square or 16:9 ratios.
Take more shots than you think you need. Shoot 20, pick the best 3. It’s much cheaper to shoot extras now than to arrange another photo session later.
Skip the filters. Instagram filters don’t belong on business websites. Natural color, proper white balance, and good exposure are all you need.
Optimizing Images for Web Performance
This is where most websites fail technically. Raw photos from cameras or phones are far too large for web use.
Resize before uploading. A hero image that displays at 1400 pixels wide should be uploaded at 1400 pixels wide. Not 4000 pixels. Uploading full-resolution camera images and letting the browser resize them wastes bandwidth and slows loading.
Compress aggressively. Use tools like Squoosh (squoosh.app), TinyPNG, or ShortPixel to reduce file size. Most images can be compressed 60 to 80% without visible quality loss. Target under 200KB per image. Most should land between 50 and 150KB.
Use WebP format. WebP delivers 30 to 50% smaller files than JPEG at equivalent quality. All modern browsers support it. WordPress plugins like ShortPixel convert images to WebP automatically.
Provide both standard and retina versions if your developer requests them. Retina (2x) images display crisply on high-density screens. A 1400px hero image needs a 2800px source for retina, but served at lower file weight through compression.
Name files descriptively. “team-photo-baku-office.webp” helps SEO. “IMG_4382.jpg” doesn’t. Include relevant keywords in filenames before uploading.
Alt Text: The Two-Second Task That Helps Everyone
Every image on your website needs alt text. This serves two purposes.
Accessibility. Screen readers describe images to visually impaired visitors using the alt text. Without it, the image is invisible to them. Proper alt text is a core accessibility requirement.
SEO. Google can’t “see” images. It reads the alt text to understand what the image shows. Descriptive alt text helps your images appear in Google Image search, which can drive additional traffic.
Good alt text is concise and descriptive. “Team meeting in Bildirchin Group’s Baku office” beats “photo” or “image1.” Don’t stuff keywords. Describe what the viewer would see.
For decorative images (background textures, divider lines), use empty alt text (alt=””) so screen readers skip them.
What to Send Your Developer
When your web developer asks for images, here’s the ideal delivery.
Format: WebP preferred, JPEG acceptable. PNG only for graphics with transparency (logos, icons).
Resolution: 1400 to 2800 pixels wide for full-width hero images. 800 to 1200 pixels for content images. 400 to 600 pixels for thumbnails.
File size: Under 200KB per image after compression. Under 100KB for thumbnails.
Naming convention: descriptive-name-category.webp (e.g., “homepage-hero-team.webp,” “portfolio-ecommerce-project.webp”).
Alt text suggestions: Provide a short description for each image. Your developer can add them to the HTML during build.
Logo files: SVG format (vector, scalable) for your logo. Also provide a PNG version with transparent background for use in emails and documents.
Organizing images into folders by page (homepage/, about/, portfolio/) saves your developer time and reduces the chance of the wrong image ending up on the wrong page.
The Image Audit
If your website already exists, run this quick check.
Are there any stock photos that could be replaced with real photos of your team or work? Are all images compressed and under 200KB? Is every image under 200KB in WebP format? Does every image have descriptive alt text? Are any images broken (showing placeholder icons or 404 errors)? Do all images display correctly on mobile without being cut off or stretched?
Fix the answers that aren’t yes. These improvements directly impact your page speed, SEO, accessibility, and overall credibility.
Key Facts
- Unoptimized images are the number one cause of slow website loading times
- WebP format delivers 30 to 50% smaller files than JPEG at equivalent visual quality
- Each web image should be under 200KB after compression; most should be 50 to 150KB
- Real team photos build significantly more trust than stock photography
- Alt text on images is required for both accessibility (screen readers) and SEO (Google indexing)
- Images should be resized to display dimensions before uploading, not full camera resolution
- Descriptive file names (team-photo-office.webp) help SEO vs generic names (IMG_4382.jpg)
- Natural window lighting produces better photos than built-in camera flash
- SVG format is ideal for logos because it scales to any size without quality loss
- Compressing images 60 to 80% typically produces no visible quality difference
Frequently Asked Questions
What image format should I use for my website? WebP for photos and complex images (30-50% smaller than JPEG). SVG for logos and icons (infinitely scalable). PNG only when you need transparency. Avoid BMP, TIFF, and uncompressed formats entirely.
How do I compress images without losing quality? Use tools like Squoosh, TinyPNG, or ShortPixel. Most photos can be compressed 60-80% with no visible difference. Target under 200KB per image.
Should I use stock photos? Sparingly. Real photos of your team, office, and work build far more trust. If you must use stock photos, choose ones that look natural and avoid overused cliches (handshakes, conference rooms, laptops on desks).
What is alt text and why does it matter? Alt text is a short description added to each image in HTML. Screen readers use it for accessibility. Google uses it to understand image content for SEO. Every image needs it.
What resolution should my website images be? 1400-2800px wide for full-width hero images. 800-1200px for in-content images. 400-600px for thumbnails. Always match the upload size to the display size.
How do I organize images for my developer? Create folders by page (homepage/, about/, portfolio/). Name files descriptively. Include a document listing each image with its intended location and alt text suggestion.