Framer Image Format, Resolution, Alt Text, and Portfolio Asset Roles Explained
Framer image settings make more sense when you start with the portfolio asset role. A case-study hero, project thumbnail, UI screenshot, mockup, logo, CMS project image, testimonial visual, and background image should not all be exported or described the same way.
When an agency prepares a Framer portfolio update before publishing new case studies, the team should decide which images are proof, which are decorative, which need readable UI detail, and which can rely fully on Framer's responsive delivery.
How Framer handles common image optimization
Framer automatically optimizes most uploaded images by creating variants, resizing where appropriate, and serving modern formats based on browser support. It can convert supported image uploads to AVIF or WebP delivery formats, so most users do not need to manually convert images to AVIF before upload.
That automation works best when the source image is already appropriate for the job. A tiny screenshot, a poorly cropped mockup, or a dense dashboard with unreadable labels remains a weak portfolio asset even if Framer serves it efficiently.
Resolution Auto, Auto Lossless, Full, and fixed sizes
Use Resolution Auto for most portfolio images because it balances quality and performance. Framer can generate responsive variants and let the browser choose the most appropriate size for the visitor's screen.
Use Auto Lossless only when compression creates visible artifacts such as banding, color shifts, or softened interface details. It can increase file size significantly, so it is not a blanket setting. Use Full when preserving original upload dimensions matters for a specific image. Small, Medium, and Large are rarely needed for everyday portfolio work.
JPG, PNG, SVG, and animated images
JPG
Use JPG for photographic mockups, rich hero visuals, and people-free workspace-style imagery where small text is not the main proof.
PNG
Use PNG for UI screenshots, dashboards, app screens, diagrams, transparent graphics, and typography-heavy portfolio proof.
SVG
Use SVG for simple logos, icons, and vector illustrations. Test complex SVGs because many paths, effects, and layers can affect performance.
Animation
Use GIFs or animated images carefully. Motion can explain interaction, but it can also add weight and distract from the case-study story.
Write useful alt text without keyword stuffing
Alt text should describe informative images clearly. For a UI screenshot, describe the interface state or project context. For a portfolio thumbnail, describe the project visual if it communicates meaning. For a decorative background, avoid forcing irrelevant SEO phrases.
Framer supports alt text for canvas images, CMS images, and images inside formatted text fields. CMS project images especially need clear descriptions because the same field may appear in grids, detail pages, and collection templates.
Keep source files separate from delivery copies
Keep Figma files, exported frames, high-resolution screenshots, original mockups, SVG masters, and brand-safe project files separate from Framer delivery copies. If a published preview shows crop or compression issues, source files let you fix the asset without rebuilding from a flattened image.
Portfolio role decision table
| Portfolio image role | Best source format | Framer setting logic | Risk | What to preview |
|---|---|---|---|---|
| Portfolio hero | Sharp JPG or PNG delivery copy from a clean source. | Auto for most heroes; Full only for a specific detail need. | Huge source file or poor mobile crop. | Published desktop and mobile hero. |
| Project thumbnail | Cropped JPG or PNG with a clear focal point. | Auto and responsive card preview. | Focal point disappears in grid cards. | Portfolio grid, tablet, and mobile. |
| UI screenshot | PNG from a high-quality capture. | Auto first; Auto Lossless if visible artifacts remain. | Labels, charts, or buttons become unreadable. | Case-study section at actual display size. |
| Mockup | JPG for photo-like mockups; PNG for interface detail. | Auto for most mockups. | Device frame hides the project proof. | Crop, weight, and mobile layout. |
| Logo or icon | Simple SVG or PNG fallback. | Use SVG when simple; test complex SVGs. | Complex vector artwork slows rendering. | Sharpness, render behavior, and accessibility label. |
| CMS project image | Consistent JPG or PNG series. | Auto plus useful CMS image alt text. | Repeated CMS layout crops important details. | Collection page, detail page, and mobile card. |
After choosing JPG or PNG delivery copies for each portfolio role, reduce heavy files with ConvertiImage when needed, then follow the Framer portfolio image publishing workflow.
Continue through the cluster
Sources checked
This decision page was built from current Framer and Google quality guidance, then adapted for portfolio asset planning. Sources reviewed: Framer image optimization, Framer image resolution options, Framer lazy loading guidance, Framer alt text guidance, Google people-first content guidance, and AdSense page readiness guidance.
