A visualization of sequential conversion steps showing how many users progress through each stage toward a goal. Funnel analysis reveals where users drop off, highlighting optimization opportunities. Track funnels in Framer Metrics to measure and improve conversion paths.

A visual element displaying photographs, graphics, or illustrations that communicates information or creates visual interest. Optimize images for web delivery with appropriate formats, compression, and sizing for fast loading. Framer automatically optimizes uploaded images for optimal performance.

Related AI terms: Generative Fill and Image Segmentation.

A technique that defers loading off-screen content until users scroll near it, improving initial page performance. It is especially useful for image-heavy pages and long content feeds. Framer automatically lazy-loads many assets, including below-the-fold images.

A measure of how quickly page content loads and becomes interactive, influenced by file sizes, server response, and code efficiency. Google uses page speed as a ranking factor, making optimization both a UX and SEO concern. Framer’s infrastructure and automatic optimizations help achieve fast page speeds.

A modern image format providing superior compression for both lossy and lossless images with smaller file sizes than JPEG and PNG. WebP significantly reduces image download sizes while maintaining quality. Framer serves WebP images to supported browsers automatically. See How images are optimized in Framer.

Graphics Interchange Format—a compressed image format supporting animation and transparency, limited to 256 colors. GIFs are popular for short animations and reactions but have large file sizes. Consider modern formats like WebP or video for better compression and quality.

An overlay that displays enlarged images or media while dimming the background, focusing attention on the content. Lightboxes are ideal for galleries and detailed image viewing without leaving the page. Ensure lightboxes are keyboard accessible with clear close mechanisms.

An image that adapts to different screen sizes and resolutions, serving appropriately sized versions for each context. Responsive images improve performance by avoiding unnecessarily large downloads on small screens. Framer handles responsive images automatically, serving optimized versions.

The process of reducing file sizes by removing redundant data, making assets faster to download and cheaper to serve. Image compression can reduce file sizes by 50-80% with minimal visual quality loss using formats like WebP. Framer automatically optimizes images for web delivery while preserving quality where it matters most.

Largest Contentful Paint (LCP) measures loading performance by tracking when the largest visible text or image element appears on screen.

Framer masks help designers create image treatments, reveal effects, soft fades, and graphic compositions without flattening the work into static assets.

In Framer, responsive images help pages load faster and look sharp by serving suitable image sizes instead of forcing every visitor to download oversized assets.

In Framer, optimized SVGs help maintain crisp visuals while reducing unnecessary markup, file size, and rendering cost on published pages.