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.

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.

Moving visual content embedded in web pages for communication, demonstration, or engagement. Video can dramatically increase engagement but impacts page-load">page load if not optimized. Use video hosting services and lazy loading for performance.

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.

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.

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.

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.

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.

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.