Bloom makes heavy use of both images and video. Getting these right is one of the highest-impact things you can do before launch.
| Usage | Orientation | Minimum size | Format | Notes |
|---|---|---|---|---|
| Hero background images | Landscape | 1920×1080px | JPG / WebP | High contrast, minimal text overlay areas |
| Work grid cover images | Landscape | 1600×1000px | JPG / WebP | Consistent crop style across all case studies |
| Blog cover images | Landscape | 1600×1000px | JPG / WebP | Avoid heavy text overlays — headline is added by the template |
| Team photos | Portrait | 800×1000px | JPG / WebP | Consistent lighting and background across all team members |
| Testimonial client photos | Portrait / Square | 400×400px | JPG / WebP | High contrast, well-lit. Avoid heavily filtered or dark photos. |
| Client logos (logo strip) | Landscape | 40–48px tall | SVG / PNG (transparent) | Monochrome versions preferred for visual consistency |
| Agency logo (nav) | Landscape | 24px tall | SVG / PNG (transparent) | Transparent background required |
| OG / Social share image | Landscape | 1200×630px | JPG / PNG | One per page — see Section 08 · SEO & Metadata |
Bloom uses video extensively — in the hero, service sections, media grid, and testimonials. Video is one of the template's strongest design features and one of the easiest things to get wrong.
| Usage | Orientation | Format | Max file size | Notes |
|---|---|---|---|---|
| Hero cards video | Portrait 9:16 or Square | MP4 (H.264) | 10MB | Loops silently. Keep under 10s for fast load. |
| Service section videos | Portrait 9:16 or Square | MP4 (H.264) | 8MB each | Loops silently. Should show content creation in action. |
| Media grid videos | Portrait 9:16 | MP4 (H.264) | 5MB each | Loops silently. Mix with portrait images in the grid. |
The template ships with stock video from Framer's asset library. Replace with your own content:
<aside> ℹ️
Do not launch with the default stock videos if you have your own content. Your own footage is always more credible than generic stock. Even low-production phone footage beats perfect stock video for an agency selling content creation.
</aside>
<aside> ⚠️
To save Framer’s bandwidth, host most of your videos online. Use Cloudinary to store them, then copy and paste the optimized video URL into Framer. Simply upload your video to Cloudinary, open the Media Library, find your uploaded file, and copy the optimized URL.
</aside>
No screenshots at non-retina resolution. Screenshots of dashboards, analytics, or ads should be taken at 2× scale or cropped to hide low-quality areas.
Consistent colour grading across case studies. Pick one visual treatment and apply it to all your case study cover images. Mixed colour temperatures or random crops look amateurish on the work grid.