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.

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.

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.

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.

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 hosting, compression helps improve performance by shrinking files like scripts, styles, and markup before they travel over the network.