Framer assets, fonts, and breakpoints, explained.

Images: one picture, five files

Framer does not serve *the* hero image; it serves a srcset of the hero at several widths from framerusercontent.com, each with a ?scale-down-to= parameter, and lets the browser choose by viewport and pixel density. A copy that keeps only the variant your laptop picked will 404 on a phone and on a Retina display. The capture takes every referenced variant and rewrites the srcset so the browser keeps choosing -- the responsive behaviour survives because the mechanism survives.

Then the optimizer runs over the tree. JPEG and PNG files over 12 KB are re-encoded to WebP, and to AVIF when the local encoder is available and WebP left enough on the table to beat; the smallest result is kept only if it is at least 10% smaller than the original, at quality 82, and images wider than 4,000 px are downscaled first. Every reference is then rewritten across HTML, CSS, JS, JSON and SVG so nothing relies on the browser guessing, and images past the first few on each page get loading="lazy" and decoding="async". Originals are kept -- they stop being referenced, but an image a script builds a path to at runtime still resolves.

Source: MDN — <img>: srcset and sizes · MDN — Lazy loading

Fonts: they live in the CSS

Framer sites use Google Fonts, Fontshare, or fonts you uploaded, and in every case the published page gets them the same way: an @font-face rule whose src: url(…) points at framerusercontent.com (or fonts.gstatic.com), serving woff2. A copy that keeps the HTML and misses the CSS -- or keeps the CSS and misses the url() inside it -- falls back to Georgia or Arial, and the page is instantly recognizable as a copy.

Localizing a font is two steps: download the woff2 the rule points at and rewrite the url() to the local path -- under assets/fonts in the export. Because the @font-face rule itself is preserved, font-display, unicode ranges and variable-font axes survive unchanged. One thing to check yourself: a font you licensed for use on Framer may or may not be licensed for self-hosting. Google Fonts and Fontshare are open; a purchased family usually has a webfont licence with a domain or pageview clause. Read it before the site goes live elsewhere.

Source: MDN — @font-face · Framer Help — Custom fonts

Breakpoints: three layouts, not one that reflows

Framer ships three default breakpoints -- desktop from about 1200 px up, tablet roughly 810–1199 px, phone below about 810 px -- and you can add or move them per page. The published site does not reflow one layout; it renders the layout you designed for each breakpoint into the DOM and toggles them with min-width / max-width media queries. The list of those queries is in a <script id="__framer__breakpoints"> tag on every page.

That has two consequences for a copy. First, the tablet layout exists in the markup whether or not you ever looked at it, so a copy can be broken at 1024 px and look perfect at 1280. Second, it means a capture can be smart: LayerPort reads the breakpoint script and batches its viewport review by which media queries each width matches, so desktop, tablet and phone are each rendered and checked at least once, and a page with custom breakpoints gets its own set.

Source: Framer Academy — Creating breakpoints · Framer — Breakpoints in responsive web design · MDN — Using media queries

Interactions and motion: what carries

Hover states, CSS transitions and the appear effects Framer records into the page carry, because they are in the markup and the localized modules. Scroll-triggered whileInView reveals of plain sections are the notable exception: when they are not part of the recorded appear payload, a section can arrive with opacity: 0 and never light. The capture runtime watches for exactly that -- an on-screen node stuck at zero opacity whose animation is not progressing -- and reveals it statically rather than leaving a blank band. You get the content; you do not get that one entrance.

Anything that needs Framer's servers to decide something -- a form submission, a CMS query, site search -- does not carry, and the capture manifest lists it. Advanced behaviour recording is not part of the public product today. Test the critical interactions on the deployed preview before you hand off; the export guide has the checklist.