Tips For Taking Great Website Photos The First Time
Taking great photos is only half the job, making them work for a website is the real challenge. The right composition, aspect ratio, and file size can make your client’s site load faster, look cleaner, and rank better.
These tips from Torque Media in Burlington, VT help photographers and web designers work together to get website-ready images that look great and perform even better.
1. Start by Reviewing the Client’s Website
Before the photoshoot, visit your client’s website to see how and where photos are being used.
- Review each key page: Home, About, Services, Blog, and Product pages.
- Look at how photos complement text and layout.
- Notice where wide hero images, product shots, or detailed visuals are needed.
This helps you shoot with intention, matching the photo orientation, subject placement, and tone to the site’s design. You’ll capture the right mix of shots and save hours of editing later.
2. File Size Matters for SEO
Large image files slow websites down, and that hurts SEO.
- Keep each image under 150KB whenever possible.
- Aim for a total webpage size under 300KB (including code).
- Heavy images might still look fine on desktop, but they’ll drag on mobile speeds, and most visitors are browsing on their phones.
For our websites we prefer
- 4:3 orientations at 768px most photos
- 4:3 orientations at 1024px for click to expand photos
- 16×9 orientations at 1600px
See how an 8×10 would fill this area much better than these images?
3. Choose the Right Image Dimensions
Different placements call for different sizes and ratios.
Hero Images (the top banner of a page)
- Use a 16:9 aspect ratio (maintain padding at top and bottom of focal point for additional cropping)
- Keep the width at least 1600px.
- Center the subject as close to center, within the rule of thirds, and leave space on the sides for cropping.
Horizontal Images
- Easier to use across most layouts, shoot plenty of these.
- 4:3 orientations at 768px.
Vertical Images
- Harder to fit into layouts but are necessary.
- Best to provide 8×10 at 768px so designer can crop for balance.
- Narrower images can disrupt flow or require extra design adjustments.
4. Keep Aspect Ratios Consistent
Mixing multiple ratios (portrait, landscape, square) causes alignment problems and extra developer work. Choose one or two consistent aspect ratios for the entire shoot. It helps maintain a polished, uniform look across slideshows, galleries, and banners.
5. Product Photography Tips
High-quality product photos directly influence sales. Before shooting:
- Check the client’s product or shop pages to see how products are displayed.
- Match your lighting, background, and framing style to the website’s design.
Client Priorities:
- True-to-life colors
- Sharp focus and clean composition
Website Priorities:
- Enough resolution to avoid stretching
- Consistent aspect ratios
- Multiple views of each product
- Main image: full product, centered, with slight padding
- Detail shots: highlight features, textures, or functionality
- Label shots: show packaging and brand clarity
Final Takeaway
Website photography is about collaboration. When photographers understand the layout and designers receive web-ready images, everyone wins. Plan your shoot around the site, use consistent aspect ratios, and optimize your images before uploading.
Faster load times, happier clients, and better-looking websites start with photos taken with purpose.