Digital Marketing
The Best Practices Guide to Website Imagery
Great web design lives or dies by its imagery.
This guide bridges the gap between raw photography, custom graphics, brand logos, and a polished digital experience.
By following these technical standards, you ensure your site loads faster for SEO, looks sharp on every screen size, and builds the immediate visual trust required to turn a browser into a buyer.
General Image Specifications
Hero Banner/Slider Images
- Full width: 1920 × 600px or 1920 × 1080px depending on layout
- Retina / HiDPI: 2560px wide recommended for modern retina displays
- Mobile: Consider alternative banners at 800 × 600px
- Format: JPG (fast loading) or PNG (transparency / crisp text)
Tip:
Test on multiple devices to ensure readability and layout.Note on WebP:
WebP is the future of web image formats and offers significant size savings. However, you may not yet have software that exports WebP. Stick to JPG/PNG and convert server-side if your platform supports it.
Blog Featured Images
- Recommended: 1200 × 628px
- Aspect ratio: 1.91:1 (Wide)
- Format: JPG (photography) or PNG (graphics / text)
Tip:
Keep your focal point centered so the image still looks great when cropped as a thumbnail.
Team and People Photography Best Practices
For team pages, about pages, and other portraits.
Background avoid
- Busy textures
- Distracting colors
- Cluttered backgrounds
Lighting avoid
- Harsh glare
- Hot spots
- Dark Shadows
- Fluorescent lighting
Consistent Framing
Same camera height, distance, crop, and orientation across all team photos
Lighting
Soft, diffused light
Tip:
Name your files clearly (ex., firstname-lastname-headshot.jpg) so they’re easy to find in your image library.
Ecommerce Image Specifications
Product imagery is one of the biggest conversion drivers in ecommerce. These specs are optimized for online stores and product catalog pages.
Main Product Images
- Recommended: 1280 × 1280px
- Minimum: 600 x 600px
- Aspect ratio: 1:1 (square) — ideal for product grid layouts
- Format: JPG or PNG
Tip:
Use high-quality images. The platform will automatically generate smaller versions for thumbnails and mobile.Category Images
- Recommended: 800 × 800px to 1200 x 1200px
- Format: JPG or PNG
Tip:
Keep images consistent across categories for a clean, professional look.
Product Photography Best Practices
A consistent, professional look across your product catalog builds trust with shoppers and reduces returns.
Background
Use clean, neutral backgrounds (white or light grey) to keep attention on the product.Avoid
- Busy textures
- Distracting colors
- Factory clutter
Lighting
Use soft, diffused light to show product color and texture accurately.Avoid
- Harsh glare
- hot spots
- Dark shadows
Show multiple angles
Cover the standard angles for every product listing:
- Front
- Back
- Side
- Top
- 45° hero angle
Optional but recommended for detailed products
- Close-ups of details
- Ports, welds, fasteners
- Surface finish
Use consistent framing
- Same camera height
- Same distance
- Same crop
- Same orientation
Image Optimization for the Web
In addition to the physical dimensions of your images, pay close attention to the weight of your website’s photo files (measured in KB or MB).
Uploading raw, uncompressed images straight from your phone, camera, or stock photography site (which could be anywhere from 2MB to 10+MB) can drag down your website’s performance and even hurt your SEO. Search engines prioritize sites that load quickly, and images that are heavy or oversized are a major factor behind poor site performance.
Free tools like TinyPNG and Squoosh.app can help you meet the recommendations below.
Aim for these file weight maximums (KB):
- Full-width banners or Hero images: Under 300 KB to 500 KB (absolute maximum)
- Standard in-post / page images: Under 150 KB to 200 KB
- Thumbnails and icons: Under 50 KB
Related Resources
Take your digital presence beyond the pixels. Explore our additional guides to ensure your brand remains consistent, fast, and visible.