A design approach that starts with the mobile experience and progressively enhances for larger screens. Mobile-first forces prioritization and ensures the smallest screens get the best experience, not a squeezed afterthought. This approach often results in cleaner, more focused designs at all screen sizes.

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.

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.

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.

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.