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 |
|---|---|---|---|
| Homepage hero | 592 x 620px | PNG, JPG or WebP | Use a transparent mockup of your product for the best result. |
| Features card thumbnail | 416 × 232px | PNG, SVG, JPG or WebP | SVG preferred, PNG accepted for graphs and data visualization |
| Benefits card thumbnail | 632 x 360px | PNG, SVG, JPG or WebP | SVG preferred, PNG accepted for graphs and data visualization |
| Process card thumbnail | 600 × 236px | PNG, SVG, JPG or WebP | SVG preferred, PNG accepted for graphs and data visualization |
| Blog cover | 1280 × 720px | JPG or WebP | Abstract or conceptual images work well |
| 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 Blog 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 articles 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 article, maximum quality. Don’t use a 1:1 screenshot — it will look blurry on retina displays. Use a properly scaled mockup instead.
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>