How to take photographs for your website or eCommerce shop

Photography Guidelines for Website Images Cheat Sheet

When capturing photos for a website, especially one that will be viewed on various devices (desktop, mobile, tablet), following key principles is crucial. This ensures your images look great across all screen sizes while maintaining fast load times. Since mobile browsing is increasingly popular, optimizing both eCommerce and general website images is essential for delivering a seamless user experience. This guide provides you with the steps needed to optimize your website visuals, ensuring they’re on point in 2024.

The Ugly, The Bad & The Good

This image is responsively ugly.   The photographer took it without considering how it would look desktop dimensions verse mobile screen dimensions. There is no “fat” around the central image.

It’s a bit harsh to call this one “bad”.  It is great from a photography point of view. The central image works beautifully as the device changes. It is only “bad” from a web designer’s pov because it is stuck there and we can’t art direct the image.

This image below looks identical to the image above, but with our web design / developer hats on it is a good image! Why? It has art direction code so we can tweak it easily. If you are a photographer you don’t need to worry about this.

Key Takeaways

• Optimize for All Devices: Ensure images work well on both desktop and mobile for a smooth user experience.
• File Size Matters: Reducing image file sizes is critical for quick loading and better search engine rankings.
• E-commerce Specifics: Different types of eCommerce images (thumbnails, product photos, zoomable images) have specific size requirements.
• Balance Quality and Speed: High-quality images must be optimized for fast load times without sacrificing visual appeal.
• Take photos with fat around central image.

Why Image Optimization is Important

• Enhanced User Experience: Properly optimized images make navigating your site easier, improving the overall shopping experience and potentially increasing conversions.
• Faster Page Load Times: Compressed images load quicker, keeping visitors engaged and reducing bounce rates.
• SEO Benefits: Optimized images contribute to faster-loading websites, which search engines favor, improving your ranking.

File Size Optimization

After taking your photos, compress them to reduce file size while retaining quality.

• Tools for Compression: Use tools like Squoosh, TinyPNG, or JPEGmini to keep file sizes manageable without compromising quality.

General Website Image Size Guidelines

• Background Images: 1920×1080 pixels or larger, JPEG or PNG format.
• Hero Images: 1280×720 to 1920×1080 pixels, JPEG format. Hero images are often the first thing visitors see, so they need to load quickly and look sharp.
• Website Banners: 250×250 pixels, JPEG or PNG format, for promotional banners.
• Blog Images: 1200×630 pixels, JPEG format, designed for easy sharing on social media.
• Logos: 250×100 pixels for rectangular logos, 100×100 for square logos, PNG for transparency.
• Favicons: 16×16 to 32×32 pixels, PNG or ICO format.

Balancing Image Quality and File Size

Striking a balance between quality and file size is key. Large images may look beautiful but can slow down your site if not optimized. Aim to keep images under 2MB for faster load times. Use formats like JPEG, PNG, or WebP to maintain high quality while minimizing file size.

Pro Tip: Platforms like WooCommerce create multiple versions of images to ensure they load quickly on any device.

General Tips for All Images

1. Leave Space Around Focal Points: Ensure there’s enough padding around the main subject so important elements don’t get cropped out when resizing between desktop and mobile views.
2. Resolution & File Size: Use high-resolution images but keep file sizes under 500 KB for optimal performance. Hero or slider images should have a minimum resolution of 1920×1080 pixels.
3. File Formats: JPEG is best for most images, while PNG should be used for images requiring transparency.

Specific Guidelines for Hero Images and Sliders

• Aspect Ratio: Use a 2.35:1 ratio. Frame subjects with extra space on the sides to prevent cropping of focal points when resizing for mobile.
• Example: For a swimming pool cover, center the cover in the shot, leaving enough space around it to ensure it remains visible after cropping.

E-commerce Product Photography

To keep your eCommerce store running smoothly and visually appealing, follow these size recommendations:

• Thumbnails: 150×150 pixels, JPEG format.
• Medium Product Images: 640×640 to 800×800 pixels, JPEG or PNG format.
• Zoomable High-Res Images: 800×800 to 1000×1000 pixels, JPEG, PNG, or WebP format.
• 360-Degree Views: 4096×2048 pixels, JPEG or WebP format for interactive viewing.

General E-commerce Photography Rules

• Background: Use a clean, white background to make your products stand out and look professional.
• Close-up Shots: Take detailed close-ups of your products. Avoid wide-angle shots unless absolutely necessary for large items (e.g., furniture).
• Aspect Ratio: Stick to a 1:1 (square) aspect ratio for product photos to ensure consistency across e-commerce platforms.  800pixels by 800 pixels is great so your web designer can create a smaller version if needed.
• Example: For a cosmetic product, take multiple shots (front, side, close-up) to showcase the product from all angles, ensuring the label is clear and sharp.

You can also keep things interesting by having the image change when mouse rolls over image – showing the product in action.

Photographing Shop Interiors and Exteriors

• Interior Photos: Use a wide-angle lens to capture full layouts, especially in small spaces. A 1:1 ratio is recommended for shop interiors.
• Exterior Photos: For building exteriors, use a 2.35:1 ratio. Ensure the building is centered with space on all sides for cropping without losing key elements.
• Example: When photographing a shop entrance, take a wide shot, centering the entrance with enough room around it to accommodate cropping.

Image Composition Tips

• Rule of Thirds: Position your focal point along the gridlines for visually appealing shots.
• Avoid Clutter: Keep backgrounds simple to ensure the subject stands out.
• Example: For property photos, keep the surroundings clean to highlight the building effectively.

Conclusion

Optimizing your website images is crucial for maintaining a seamless user experience and enhancing page load times. By choosing the right sizes and formats, you can improve both the aesthetic and performance of your site. Follow these photography and optimization guidelines to ensure your visuals are ready for 2024 and beyond.