Design System Image Guidelines (DPI, Formats)
10/13/2025 • images, design-system, performance
A solid image guideline saves time, reduces regressions, and keeps your product fast. Use this reference to standardize DPI, formats, and exports.
DPI and pixel density
- Web and mobile UI: Design in CSS pixels; export at 1x and 2x as needed (3x for select mobile assets).
- Print: Use 300 DPI for final print assets; 150–200 DPI can suffice for internal proofs.
- Don’t upscale: Start from source vectors or large masters, then downscale.
Formats
- Photos: WebP or JPEG (WebP preferred), ~80% quality as a starting point.
- UI/Icons/Logos: PNG (lossless) or WebP (lossless). Keep transparency crisp.
- Animated: MP4/WebM for performance; GIF only for tiny loops.
Color and profiles
- sRGB for the web (consistent across platforms).
- Strip unnecessary metadata to reduce size (where acceptable).
Naming and structure
- Use semantic names and suffixes:
component-hero-1600w.jpg,logo-dark@2x.png. - Folder by feature/component; keep a shared “tokens” folder for brand assets.
Step-by-step: Prepare assets quickly
-
Gather source files; export target variants (1x, 2x).
-
Batch resize/convert with a single pass: /image-compressor
-
Choose formats per asset type (photos vs. graphics).
-
Verify sizes, visual quality, and naming conventions.
Short clip (10–30s):
Tips
- Use consistent aspect ratios for hero/thumbnail families.
- Document breakpoints and export sizes in your design system.
- Automate linting for file size caps where possible.
Related:
- Batch Resize & Compress Images: /posts/batch-resize-compress-workflow
- PNG vs WebP — When to Use Each: /posts/png-vs-webp-when-to-use