The perfect mockup, the sobering live site
I've been designing for over eleven years — starting out as a graphic design assistant, later focusing on the web. And one scene has repeated itself countless times over that period: the mockup is signed off, everyone's thrilled, the images glow, every edge sits exactly where it should. Then the site goes live — and suddenly it loads sluggishly, the hero graphic only pops in after a few seconds, the logo looks mushy. Same design, a completely different impression. Why is that? Because of three breaks that are simply invisible in the mockup.
Where the illusion comes from
A mockup is a controlled environment. The design tool shows every image at full resolution, 1:1, with no load time, on a crisp Retina display, with placeholder images that happen to fit perfectly. None of that holds true live: there the image comes down a connection, is served by the CMS, lands on a phone on a train, and has to hold up against real, often unwieldy content. The mockup promises a result under ideal conditions — the live site delivers it under real ones.
What happens on the way to the live site
The typical flow: I export the assets at the best quality so nothing gets lost in the next step. The editorial team fills in the content and loads images straight from the camera or stock export into the CMS — unedited, several megabytes heavy. Nobody scales anything, nobody converts anything, because everything looks fine in the editor. This is exactly where the gap opens up: the design was never the problem, the delivery is.
The three most common breaks
1. Image weight. The hero graphic that weighed 1 MB as a PNG export in the mockup lands as a 4 MB file in its slot. On a phone that's several seconds before anything appears at all — the Largest Contentful Paint tips over. I've worked through how this adds up across a whole website in a dedicated worked example.
2. The Retina misunderstanding. The logo looks razor-sharp in the mockup — because the tool renders it vector-based or at double resolution. Live, a too-small PNG version gets scaled up and looks blurry. The fix is almost always SVG or a clean 2× version; more on that in optimizing Retina images.
3. Format. Photos as PNG, graphics as JPG, nothing as WebP or AVIF. The right format choice alone often saves 30–50% at identical appearance. Which format belongs where is covered in the format comparison.
How I design today
The most important shift in my work was a mental one: I no longer design for the mockup, I design for the connection. In concrete terms, that means:
- Test with real content. Not the perfect stock photo, but a typical client image at a typical size. If the layout holds up with that, it holds up live.
- Set an image budget.I decide per page how much the images are allowed to weigh (e.g. "under 1 MB above the fold"), and design within that limit.
- Think about formats early. Flat illustrations as SVG, photos as WebP/AVIF — not as an afterthought optimization, but as part of the design.
The handoff step I never skip anymore
Between "design done" and "goes live" there's a step many people skip: the preparation of the assets for delivery. I don't just export at ideal quality, I also deliver web-ready versions — properly scaled, converted, compressed. It takes minutes and it decides whether the live result comes close to the mockup. Two moves are usually enough: scale to the display size and bring it into a modern format via the converter — at JNRT Pixel locally in the browser, without any upload.
Pre-launch checklist
- Are all images scaled to their actual display size?
- Are photos in WebP/AVIF, and flat graphics/logos in SVG?
- Does the most important page (the homepage) stay under the set image budget?
- Was it tested with real content, not ideal content?
- Is the hero graphic (LCP) small and fast — or the bottleneck?
A design is only good once it survives the connection. The mockup shows the intent; the live site shows the craft. And the difference between the two is almost always a question of image preparation — not of the design.
Sources
web.dev — Optimize Largest Contentful Paint · HTTP Archive — Web Almanac, Page Weight · web.dev — Serve images in modern formats.