The practice of designing websites that can be used by everyone, including people with visual, auditory, motor, or cognitive disabilities. Beyond being ethically important, accessibility improves SEO, expands your audience, and is legally required in many jurisdictions. Key practices include proper heading structure, alt text for images, sufficient color contrast, and navigationkeyboard navigation support.

Descriptive text added to images that screen readers and search engines use to understand image content. Good alt text describes content and purpose, not just its appearance — “Team celebrating product launch” is better than “people in office.” Framer lets you add alt text directly in the image properties panel. See How to add Alt Tags to images.

An HTML attribute that provides accessible names for elements that lack visible text labels, helping screen readers describe interactive elements. These are essential for icon buttons, decorative links, and complex widgets where the visual context isn’t available to assistive technology. Use aria-label when there’s no visible text, and aria-labelled by to reference existing text on the page. See Improving Accessibility with ARIA Labels. See Optimizing images, icons & interactive elements.

A setting that determines how an element’s colors interact with the layers beneath it, such as multiply, screen, overlay, or difference. Blend modes enable creative effects like color tinting images, creating texture overlays, and building complex visual compositions. Experiment with blend modes in Framer to achieve effects that would otherwise require image editing software.

text and images while maintaining consistent styling. Framer’s built-in CMS supports Content Management System—a platform for creating, organizing, and publishing digital content without writing code for each update. A CMS separates content from design, allowing non-technical users to update collections, relationships, and dynamic pages for blogs, portfolios, and product catalogs.

The color, gradient, or image that fills the interior of a shape or element. Multiple fills can be layered with different blend modes for complex visual effects. Framer’s fill controls support solid colors, gradients, and images with positioning, scaling, and opacity options.

A gradual transition between two or more colors, creating depth, dimension, and visual interest. Gradients add sophistication to backgrounds, buttons, and text without requiring images. Framer supports linear, radial, and angular gradients with multiple color stops and precise positioning.

The process of reducing image file sizes while maintaining acceptable visual quality for faster page loads. Optimized images can be 10x smaller than originals without noticeable quality loss, dramatically improving performance. Framer automatically optimizes uploaded images, converting to efficient formats like WebP where supported.

A UI element in design tools providing quick access to add new elements like text, shapes, images, and components. Insert menus speed up design workflows by centralizing element creation. Framer’s insert menu and slash commands enable rapid element addition.

A standalone page designed for a specific marketing goal, typically with focused messaging and a single call to action. Unlike general website pages, landing pages minimize distractions to maximize conversions. Test landing page variations systematically—small changes in headlines, images, or CTAs can significantly impact results.

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.

The process of adapting content and design for different languages, cultures, and regions. Localization goes beyond translation to include date formats, currency, imagery, and cultural considerations. Framer supports localized content variants within its CMS for managing multilingual sites efficiently.

HTML elements that provide metadata about a page to browsers and search engines, including titles, descriptions, and social sharing information. Proper meta tags improve SEO and control how pages appear when shared on social media. Framer provides fields for essential meta tags in page settings. See How to update page titles, descriptions, and social images.

A protocol that controls how pages appear when shared on social platforms like Facebook, Twitter, and LinkedIn. Open Graph tags specify titles, descriptions, and images for consistent, attractive social shares SEO settings with compelling images sized 1200x630 pixels.

The smallest unit of a digital display, a single point of color that combines with millions of others to form images. Understanding pixel dimensions helps you provide appropriate image sizes for different devices. Retina displays pack more pixels into the same space, requiring higher-resolution images for sharp display.

An approach that makes websites adapt fluidly to different screen sizes and devices through flexible grids, images, and CSS. Responsive design ensures optimal experiences whether viewing on phones, tablets, or desktop monitors. Framer's breakpoint system enables precise control over layouts at each screen size.

Scalable Vector Graphics—an image format using mathematical paths instead of pixels, staying crisp at any size. SVGs are perfect for logos, icons, and illustrations that need to scale across different screen sizes and densities. Framer supports SVG import and handles them optimally for web delivery.

Meta tags controlling how pages appear when shared on Twitter, including image, title, and description. Properly configured Twitter cards increase click-through from social shares. Test cards using Twitter's card validator before launch.

Moving visual content embedded on a page for explanation, demonstration, or storytelling. Video can increase engagement but may hurt performance if it is unoptimized. Use compression, modern formats, and lazy loading to keep page load fast.

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.

A compressed image format best suited for photographs and complex images with many colors and gradients. JPEG compression is lossy, meaning some quality is sacrificed for smaller files. Use JPEG for photos but prefer PNG for graphics with sharp edges, text, or transparency.

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.

A lossless image format supporting transparency, best for graphics, logos, and images with sharp edges or text. PNG files are larger than JPEG for photos but preserve quality perfectly through editing and compression. Use PNG for graphics with transparency or when image quality is paramount.

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 proportional relationship between an element's width and height, expressed as a ratio like 16:9 or 4:3. Maintaining consistent aspect ratios prevents layout shifts when images load and ensures visual harmony across different screen sizes. Framer preserves aspect ratios automatically when you resize images proportionally by holding Shift while dragging. See Using images with unique aspect ratios in the CMS.

The maximum rate of data transfer across a network connection, measured in bits per second. Higher bandwidth allows faster loading of large assets like images and videos, directly impacting user experience. Optimize bandwidth usage by compressing images, lazy loading off-screen content, and leveraging Framer's automatic performance optimizations.

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.

The duration from requesting a page to complete rendering, critically affecting user experience and conversion rates. Users expect pages to load in 2-3 seconds; each additional second significantly increases bounce rates. Optimize images, limit scripts, and leverage caching to minimize load time.

An expanded dropdown navigation revealing multiple categories, links, and sometimes images in a large panel. Mega menus work well for sites with extensive content hierarchies like e-commerce or documentation. Design mega menus carefully to avoid overwhelming users with too many options.

Temporary content indicating where final content will appear, helping visualize layouts before content is ready. Placeholders can be lorem ipsum text, gray boxes, or sample images. Replace placeholders with real content before launch—they can accidentally go live.

High-resolution screens with twice or more the standard pixel density, displaying sharper text and images. Retina displays require higher resolution images—typically 2x the displayed size—to appear crisp. Framer automatically serves appropriate image sizes for different display densities.

A small preview image representing larger content, commonly used in galleries, lists, and navigation. Thumbnails help users identify content quickly without loading full-size media. Size thumbnails appropriately and use consistent aspect ratios.

A visual collage of images, colors, typography, and textures capturing the intended look and feel of a project. Mood boards align stakeholders on aesthetic direction before detailed design begins. Create mood boards to explore and communicate design concepts efficiently.

The number of pixels displayed on screen, typically expressed as width by height, affecting image sharpness and detail. Higher resolution requires appropriately sized assets to appear crisp. Design with resolution independence in mind using vector graphics where possible.

Dots Per Inch—a measure of print resolution indicating how many ink dots fit in one inch, affecting print quality and file size. Higher DPI produces sharper prints but larger files. For web, focus on PPI (pixels per inch) and responsive images rather than DPI.

Pixels Per Inch—a measure of screen resolution indicating pixel density, with higher values producing sharper displays. Understanding PPI helps prepare appropriate image resolutions for different device types. Design at 1x and provide 2x assets for retina and high-DPI screens.

An image format made of a grid of colored pixels where quality degrades when scaled up, common formats include PNG and JPEG. Bitmaps excel at photographs and complex imagery but become pixelated at larger sizes. Use vector formats for logos and icons that need to scale across different contexts.

Images composed of pixels in a fixed grid, ideal for photographs but losing quality when enlarged beyond original size. Raster formats like JPEG and PNG are standard for photographs and complex imagery. Use appropriate resolutions and compression for web delivery.

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

Multimodal AI combines understanding and generation across different modalities, enabling richer interfaces and cross-media reasoning.

A Hero Image is a large, high-impact image in the top section of a page used to establish tone, communicate value, and drive attention.

Text-to-Image Generation creates visuals directly from prompt instructions. Most modern systems rely on a Diffusion Model and can be steered using a Reference Image.

Style Reference lets you guide the aesthetic of generated assets by pointing the model to example visuals. It is frequently combined with Reference Image inputs in Text-to-Image Generation workflows.

A Reference Image is a conditioning input that guides composition, structure, or aesthetics during generation. It is central to Style Reference workflows and Multi-image Conditioning.

Multi-image Conditioning uses several images as control inputs for one generation task, improving consistency across outputs. It extends single Reference Image workflows in Text-to-Image Generation.

Generative Fill replaces or creates content inside selected areas while matching surrounding context. It often depends on accurate Image Segmentation and pairs with Generative Expand for broader canvas edits.

Generative Expand increases image boundaries and predicts plausible continuation beyond original edges. It is commonly used alongside Generative Fill in broader Text-to-Image Generation workflows.

A Diffusion Model creates images through iterative denoising steps conditioned on prompts and controls. It is the backbone of many Text-to-Image Generation systems and can be steered by Classifier-Free Guidance (CFG).

ControlNet augments diffusion generation with explicit structural conditions such as edges, depth, or pose. It improves control in Diffusion Model systems and often uses cues from Image Segmentation.

CLIP (Contrastive Language-Image Pretraining) maps text and images into a shared representation space for similarity and retrieval. It powers capabilities such as Find Similar Designs and works well with Vision Transformer (ViT) style architectures.

Vision Transformer (ViT) applies transformer attention mechanisms to image patches for classification and representation learning. It is widely used in multimodal stacks with CLIP and in segmentation systems like Segment Anything Model (SAM).

Segment Anything Model (SAM) produces masks from points, boxes, or text-like prompts for rapid object selection. It underpins modern Image Segmentation workflows and improves control in Reference Image editing.

Image Segmentation partitions an image into labeled regions to isolate objects or areas for editing. It is core to Segment Anything Model (SAM) workflows and precision operations like Generative Fill.

Prompt-to-Prompt Editing changes specific image attributes by adjusting textual instructions while preserving overall scene structure. It is closely related to Prompt Enhancement and iterative Text-to-Image Generation.

InstructPix2Pix applies natural-language editing commands to existing images while retaining layout context. It extends ideas from Prompt-to-Prompt Editing within practical Text-to-Image Generation pipelines.

DreamBooth is a personalization method that fine-tunes a model to generate consistent renderings of a chosen subject. It is a specialized form of Fine-tuning used in Subject-Driven Generation.

Textual Inversion introduces new concept tokens by learning embeddings that map to visual ideas. It is lightweight compared to full training and connects closely with Embeddings and DreamBooth workflows.

Subject-Driven Generation aims to keep a specific person, product, or character consistent across new generated scenes. It is often implemented with DreamBooth and guided by a Reference Image.

Reference recreation is the process of rebuilding a design from an image, URL, or example while preserving its layout, style, and visual hierarchy.

In AI-assisted website creation, reference recreation helps teams move faster without losing control of structure, content, performance, or editable design details.

Framer blend modes can create richer visual treatments by letting text, shapes, images, and effects interact with the colors underneath them.

In Framer, radial gradients can highlight sections, create soft glows, add background atmosphere, or draw attention to important content without adding image assets.

In Framer workflows, exportable layers help teams move graphics, images, and design assets between site production, marketing, and documentation needs.

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

Framer asset libraries help teams keep visual materials organized and reusable, so collaborators can build pages with consistent media and brand resources.

In Framer, CMS Galleries make it easier to publish collections of images, portfolios, case studies, or visual entries while keeping layout design separate from content updates.

Framer uses global delivery infrastructure to help pages, images, scripts, and assets reach visitors quickly across regions, improving perceived speed and reliability.

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.