Images are the primary content on a portfolio site. Get them right and the template looks exceptional. Get them wrong and no amount of copy or layout work will save it.
| Context | Minimum dimensions | Format | Notes |
|---|---|---|---|
| Work grid cover | 1600 × 1000px | JPG or WebP | Landscape only |
| Case study hero | 2400 × 1400px | JPG or WebP | Full-bleed. Your strongest image from the project. |
| Case study body images | 1600 × any | JPG or WebP | Mix of landscape and portrait works best |
| Journal cover | 1600 × 1000px | JPG or WebP | Abstract or conceptual images work well |
| Team photo | 800 × 800px | JPG or WebP | Square or portrait crop. Well-lit, high contrast. |
| Founder photo | 1000 × 1200px | JPG or WebP | Portrait crop. Most prominent photo on the site. |
| Logo (if image) | Any | SVG preferred, PNG accepted | Transparent background. 24px height in nav. |
| Favicon | 32 × 32px | PNG or SVG | Transparent background |
| OG image (social share) | 1200 × 630px | JPG or PNG | One per page. Appears when links are shared. |
Use WebP where possible. Smaller than JPG at equivalent quality. Framer converts uploads automatically, but uploading as WebP gives a better starting point.
Never use PNG for photographs. PNG is lossless and produces unnecessarily large files for photographic content. Use JPG or WebP.
Use PNG for graphics with transparent backgrounds (logos, icons). Use SVG for logos wherever possible.
No mixed aspect ratios on the work grid. All cover images should be the same ratio (16:9 recommended). The grid handles varying ratios by cropping — inconsistent crops produce an inconsistent grid. Decide on one ratio and crop everything to match before uploading.
No white backgrounds on project covers. A white-background image against the site’s off-white surface looks like a broken placeholder. If your project assets are on white, use a texture detail, a mockup image, or a close crop instead.
One hero image per case study, maximum quality. The hero is full-bleed at 100vw. Upload at 2400px minimum. Don’t use a 1:1 screenshot — it will look blurry on retina displays. Use a properly scaled mockup instead.
Consistent photography style across the portfolio. If some project images are moody editorial and others are flat-lay product shots, the portfolio feels incoherent. Group by photography style or invest in reshooting outliers before launch.
The template ships with placeholder images in every CMS slot. They display until you replace them.
<aside> ⚠️
Do not go live with placeholder images. They are not licensed for commercial use in your final site. Every placeholder must be replaced before publishing.
</aside>