Image & Photo Guide
Choose the right format, resolution, and compression level to balance visual quality with web performance.
1. Which Format for What?
| Format | Strength | Best Use |
|---|---|---|
| JPG | Small files for photos | Article visuals, banners |
| PNG | Transparency and sharp edges | Logos, icons, UI graphics |
| WEBP | Strong quality/size balance | General-purpose web images |
| AVIF | Higher compression efficiency | Modern browser-first projects |
2. Resolution, DPI and PPI Basics
Pixel dimensions (for example 1920x1080) are the key metric for digital use. DPI/PPI mostly matter for print scenarios.
- For web, prioritize pixel size and file weight.
- For print, combine physical size with effective resolution.
3. Compression vs Quality
Over-compression causes artifacts; over-quality hurts speed. The practical target is visually clean but lightweight files.
- Hero images: conservative compression.
- Small thumbnails: more aggressive compression.
- SEO: fast-loading images with descriptive alt text.
4. Color Profiles and Consistency
sRGB is generally the safest web profile. Mixed color spaces can create visible color shifts across devices.
5. Evergreen Optimization Checklist
- Pick format by content type (photo vs graphic).
- Avoid oversized dimensions.
- Use responsive image patterns and lazy loading.
- Optimize filenames and alt text for discoverability.