Images are one of the most powerful elements on your website — they grab attention, communicate your brand, and help visitors connect with your business. But they're also one of the most common reasons websites are slow, unprofessional-looking, and underperforming.
Here's everything you need to know about using images on your website effectively.
Why Images Matter So Much
- 90% of information transmitted to the brain is visual
- People remember 80% of what they see vs. 20% of what they read
- Content with relevant images gets 94% more views than content without
- Images are the #1 factor in purchase decisions for products
The #1 Image Mistake: Unoptimized File Sizes
This is the problem I see on almost every small business website. Someone uploads a photo straight from their phone — a 4MB, 4000x3000 pixel image — to display at 600 pixels wide on their website.
The result? A page that takes 10 seconds to load because the browser is downloading massive files it doesn't need.
How to Optimize Images
- Resize before uploading — Most website images should be no wider than 1920px (for full-width heroes) or 800-1200px for content images
- Compress the file — Use tools like TinyPNG, Squoosh, or ShortPixel to reduce file size by 60-80% without visible quality loss
- Use modern formats — WebP format is 25-35% smaller than JPEG with better quality. All modern browsers support it
- Target file sizes — Hero images: under 200KB. Content images: under 100KB. Thumbnails: under 30KB
- Implement lazy loading — Images below the fold load only when the user scrolls to them
Types of Images Your Website Needs
Hero Images
The large, prominent image at the top of your homepage. This sets the tone for your entire brand. It should be high-quality, relevant, and evoke the right emotion.
- Use original photography when possible
- If using stock photos, avoid clichéd "handshake in front of a laptop" images
- Ensure it works well with text overlay (your headline)
- Optimize for both desktop (wide) and mobile (narrower crop)
Team/About Photos
Authentic photos of you and your team build trust more than anything else. Professional headshots and candid work photos make your business feel real and approachable.
- Invest in professional photography — it's worth it
- Use consistent lighting and backgrounds for team headshots
- Include action shots — photos of your team actually working
Portfolio/Work Examples
Before-and-after photos, completed project images, and work-in-progress shots prove your capabilities better than any description.
Product Images
For e-commerce, product images are the most critical element. Include multiple angles, lifestyle/context photos, and zoom capability.
Stock Photos: When and How to Use Them
Stock photos aren't inherently bad — but they're often used badly. Guidelines:
- Do: Use stock photos as supporting visuals for blog posts and generic content
- Don't: Use stock photos to represent your team, workspace, or completed projects (people can tell)
- Do: Choose diverse, natural-looking images that feel authentic
- Don't: Use the same overused stock photos that every other business uses
- Do: Check the license — some free stocks require attribution
Best Free Stock Photo Sources
- Unsplash — Beautiful, high-resolution photos, completely free
- Pexels — Large library, no attribution required
- Pixabay — Photos, illustrations, and vectors
Alt Text: SEO and Accessibility
Every image on your website should have descriptive alt text. This serves two purposes:
- Accessibility — Screen readers use alt text to describe images to visually impaired visitors
- SEO — Google uses alt text to understand what your images contain, which helps with Google Image search rankings
Bad alt text: "image1.jpg" or "photo" or empty
Good alt text: "Custom website design for a local bakery showing a modern homepage layout"
Image Formats Explained
| Format | Best For | Notes |
|---|---|---|
| JPEG | Photos | Good compression, universal support |
| PNG | Graphics, logos, transparent backgrounds | Larger file size than JPEG |
| WebP | Everything | Best compression, modern standard |
| SVG | Icons, logos, simple graphics | Infinitely scalable, tiny file size |
| GIF | Simple animations | Use sparingly, large file sizes |
What I Do With Images
For every website I build, I handle image optimization as part of the development process:
- All images are properly compressed and formatted
- Responsive images serve different sizes for different devices
- Lazy loading is implemented for below-the-fold images
- Alt text is added to every image for SEO and accessibility
- WebP format with JPEG fallback for maximum compatibility
