CSS rules that apply different styles based on device characteristics like screen width, orientation, or resolution. Media queries enable responsive design by adapting layouts at defined breakpoints. Framer handles media queries automatically based on your breakpoint configurations.

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 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.

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.

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.

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.

A Vector is a scalable graphic format built from mathematical paths instead of pixels, enabling crisp rendering at any size.

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.