For a long time most of the product screens on this site were placeholders. That was the honest thing to do: each one was clearly labelled as a preview, so the page never pretended to show a screen that did not exist yet.
When the real captures arrived, the swap looked trivial. It was not. A static marketing site turns every screenshot into a decision about weight, size and honesty.
A placeholder system that paid off
The screens were built as data, not as one-off markup. A section carried a flag for whether a real screen existed. If it did, the page rendered the image; if it did not, the page rendered a labelled placeholder on the same frame.
That single flag meant adding real screens later was a content change, not a redesign. The layout had already been honest about the difference.
The site does not shrink images for you
This site is exported as static files, and image optimisation is disabled in that build. Whatever file is committed is the file the browser downloads. The source captures were full phone screenshots at 1206 by 2622, between one and three and a half megabytes each. Five of them would have added close to nine megabytes to a single page.
Resizing to 804 by 1748 and re-encoding as JPEG brought the same set under two megabytes, while staying at roughly twice the largest size a screen is ever displayed. WebP would be smaller, but the encoder available on this machine could not write it, so JPEG was the honest choice rather than a dependency the build did not need.
The repository is the CDN. Whatever you commit is what the page weighs.
One frame, several screens
The screen component originally knew exactly one image: a single shared constant. That worked while the product had one presentable screen. Once several existed, the component needed a source per section and a sensible fallback for anything missing.
A section marked as real but missing its file should never render an empty frame, so the fallback still points at a valid screen.
Aspect ratio is content, not decoration
The old mock and the new captures did not share proportions. Anywhere a frame assumed one ratio, the taller image was quietly cropped, and the smallest crops read as broken screens. Matching the frame to the real capture fixed several of those at once.
None of this shows up in a screenshot of the finished page. It is the reason the page can show the real product without apologising for it, which is the point.