Exporting Images for the Web

A beautiful page can still feel slow, and the cause is almost always the images. The good news is that exporting well is a habit, not a skill. Here is the routine I follow every single time, and the reasons behind each step.

Know what you are exporting for

An image has one job on the page, and that job decides its size. A full-width hero and a small card thumbnail should never come from the same file. When one file serves both, one of them is always wrong: either blurry, or far heavier than it needs to be.

Before I export anything, I look at the layout and write down the largest size each image will actually appear at. That single number drives every other decision.

Choosing a format

Formats are less of a debate than they look. Each one has a place where it is clearly the best choice.

For a typical portfolio, WebP covers nearly everything. I reach for SVG whenever the artwork is made of shapes, because it stays sharp at every size and is usually tiny.

My export routine

The order matters. Doing the steps out of sequence is how people end up compressing an image twice or exporting something at the wrong size.

1. Crop first. Remove everything the layout will hide anyway.

2. Resize to the largest size it will be shown, then double it for sharp screens.

3. Pick the format from the table above.

4. Compress and compare. Look at the result at full size before you accept it:

   • Check faces, text and gradients, where compression shows first.

   • Lower the quality in small steps, not in one jump.

5. Name the file clearly, such as studio-hero-2400.webp, so you can find it in a year.

The compare step is the one most people skip. A file that looks fine in a thumbnail can show banding in a soft gradient or smudged edges around text. Opening it at full size takes ten seconds and catches both.

A quick size guide

Hero images rarely need to be wider than 2400px, and cards seldom need more than 1200px. Anything larger is weight the reader pays for without seeing.

Don’t forget the alt text

An image without alt text is invisible to anyone using a screen reader and to search engines. Write a short, plain description of what matters, in your own words. You do not need to describe every detail, only what someone would miss if the image failed to load.

The habit is the same one I describe in How I Review My Own Work: look at it once as a stranger would.

Keep your originals

Always export from the source file, never from a previous export. Every re-compression loses a little quality, and it adds up faster than you would expect. I keep a folder of untouched originals and treat the web files as disposable copies.

When in doubt

If a file feels heavy, it probably is. Tools such as the Framer help pages explain how images are optimised once uploaded, but a clean export gives them less to fix, and the page loads faster for everyone.