How to Optimize Images in Your Framer Portfolio for Faster Load Times

Your portfolio is your storefront. When a potential client clicks your link, they form an opinion in under 3 seconds. If your site is still loading during that window, you've already lost them — no matter how stunning your work is.

Framer is the go-to tool for designers building portfolios, but most designers unknowingly sabotage their own sites by uploading uncompressed images. This guide shows you exactly how to fix it.

Why Portfolio Speed Matters

Unlike blogs or SaaS landing pages, design portfolios are image-heavy by nature. A typical portfolio page might have 8-15 high-resolution project images, each exported from Figma at 2x resolution. The math gets ugly fast:

That's not a portfolio — that's a patience test. Google PageSpeed will flag this with a score in the 20s, and recruiters on mobile will bounce before your first project loads.

The Portfolio Image Problem

Most portfolio images fall into these categories:

The gap between typical and optimal is enormous because designers export at maximum quality "just in case." On the web, that extra quality is invisible but the file size is catastrophic.

Optimizing Hero Shots

Your hero image is almost always the Largest Contentful Paint (LCP) element — the single biggest factor in your PageSpeed score. Optimizing it delivers the highest ROI:

1. Resize first — No hero image needs to be wider than 1920px. Even on 4K displays, CSS handles the scaling
2. Convert to WebP — WebP at quality 82-85 looks identical to a full-quality PNG but at 5% of the file size
3. Target under 200KB — This ensures sub-2-second LCP on most connections

In Skwiz, load your hero image, set format to WebP, quality to 82, max width to 1920px, and preview. You'll see zero visible difference but a massive file size drop.

Gallery and Case Study Images

Case study pages are where portfolios get heaviest. A 10-image case study at 3MB per image is 30MB of data — more than most entire websites.

The optimization strategy is simple:

• WebP format for all photos and mockups
• Quality 78-82 — slightly lower than hero images since these are usually viewed at smaller sizes
• Max width 1200-1600px — matches the typical content column width at 2x
• Batch process — in Skwiz, scan the page and compress everything in one pass

Thumbnail and Grid Optimization

Your portfolio homepage likely shows a grid of project thumbnails. These are often the most wasteful images because:

• They display at 300-400px wide but the source is 3000px
• There are many of them (6-20 on a page), so the waste multiplies
• They all load immediately since they're above or near the fold

Resize thumbnails to max 800px wide (gives crisp display at 400px on retina) and compress to WebP at quality 75. A thumbnail should be under 40KB.

Before and After Results

Here's what we typically see when optimizing a Framer portfolio:

That's the difference between a portfolio that loses clients and one that wins them. Five minutes with Skwiz, and your work speaks for itself instead of buffering.