Image Guidelines
Images are a vital part of your website’s visual identity. They help tell your story, build trust, and enhance the user experience. However, improperly sized or formatted images can slow down your site, frustrate visitors, and hurt your search engine rankings.
This guide outlines best practices for:
- Image formats
- Image resolutions
- Image aspect ratios
- Image file sizes
#🧩 Image Formats
Different image types are suited for different purposes.
| Format | Best For | Pros | Cons |
|---|---|---|---|
| JPEG (.jpg) | Photos, banners, background images | Small file size, good quality | No transparency, lossy compression |
| PNG (.png) | Logos, icons, transparency needed | High quality, supports transparency | Larger file sizes |
| WebP | All modern web images | Small file size, high quality | Not supported in very old browsers |
| SVG | Icons, logos, simple illustrations | Infinite scaling, sharp on all devices | Best for flat graphics only |
Tip: Use WebP whenever possible for photos and illustrations—it offers the best balance of quality and performance.
📏 Image Resolution
What is Resolution?
Image resolution refers to the number of pixels an image contains (e.g. 1200×800). It directly impacts how large and clear the image appears on screen.
Unless otherwise noted in site documentation - use the following recommendations as guidelines.
Recommendations
| Use Case | Recommended Width |
|---|---|
| Full-width banners | 1600–2500 px |
| Inline content images | 800–1200 px |
| Thumbnails | 300–600 px |
| Icons and UI graphics | 24–100 px |
✅ Avoid uploading large images if they’ll be displayed small—resize them first.
🔲 Aspect Ratios
Aspect ratio is the proportional relationship between width and height (e.g. 16:9 or 4:3).
Why It Matters:
- Consistency: Keeps layouts clean and predictable
- Responsiveness: Helps images look good on all screen sizes
- Cropping: Prevents important content from being accidentally cut off
Common Ratios
- 16:9 – Widescreen banners and videos
- 4:3 – Traditional photos
- 1:1 – Square thumbnails or icons
🎯 Use consistent aspect ratios across similar content types (e.g. all blog thumbnails at 4:3).
🗜️ File Size & Compression
Why File Size Matters
- Large images = slow-loading pages
- Slow pages = poor user experience and lower search rankings
Target File Sizes
| Image Type | Recommended Max Size |
|---|---|
| Hero/Banner | < 500 KB (ideal < 300 KB) |
| Content Images | < 200 KB |
| Thumbnails | < 100 KB |
| Icons | < 50 KB |
Compression Tools
- Squoosh
- TinyPNG
- ImageOptim (Mac)
🧠 Always compress images before uploading — without sacrificing visible quality.
🚀 Why This All Matters
1. Faster Page Load
- Lightweight images reduce load time, especially on mobile
- Faster websites keep visitors engaged
2. Better User Experience
- Optimized images load quickly and look sharp
- Responsive and consistent visuals build trust
3. Improved SEO
- Google ranks faster-loading pages higher
- Proper image tagging and sizing supports accessibility and discoverability
✅ Image Upload Checklist
- [ ] Saved in the right format (WebP preferred, or JPEG/PNG)
- [ ] Cropped to the correct aspect ratio
- [ ] Resized to display dimensions
- [ ] Compressed to reduce file size
- [ ] Named descriptively (e.g.
team-photo-2025.jpg)
👥 Need Help?
If you’re unsure about the right size, format, or setup for your website images, don’t hesitate to ask! Keeping your site optimized is a collaborative process—we’re here to help ensure it looks great and performs even better.