Formats & Fundamentals
Choosing between JPG, PNG, WebP, AVIF and the rest — and the colour and resolution concepts behind them.
Almost every image problem starts as a format problem. A photo saved as PNG is five times heavier than it needs to be; a logo saved as JPG loses its transparency; a screenshot saved as JPEG turns its text into mush. Getting the format right first makes most later decisions easy.
These articles cover what each major format is actually good at, how the modern ones (WebP, AVIF, JPEG XL) compare with the classics, and the underlying concepts — colour depth, colour spaces, aspect ratio, resolution — that explain why the differences exist. Start with the format comparison guides if you're choosing for a specific job, or with the colour and resolution pieces if you want to understand what's happening underneath.
Articles in This Topic
22- PNG vs JPG: Which Image Format Should You Choose?
- Understanding WebP: The Future of Web Performance
- SVG vs. Raster Images: When to Use Vector Graphics
- AVIF vs. WebP: Which High-Performance Standard Wins?
- 8-bit vs. 10-bit vs. 16-bit Color Depth: Why Gradients Band
- Color Space Conversion: Deep Dive Into sRGB, Adobe RGB and CMYK
- RGB vs CMYK: Web vs Print Color
- PNG-8 vs PNG-24 vs PNG-32
- Animated GIF vs APNG vs Animated WebP
- Color Profiles: sRGB vs Adobe RGB vs P3
- Transparent Backgrounds: PNG vs WebP vs SVG
- Best Image Format for Logos
- Best Format for Screenshots: PNG or JPG
- TIFF Format: When to Use It
- What Is Anti-Aliasing?
- What Is a RAW Image File?
- How to Optimize SVG Files
- What Is JPEG XL?
- HEIC vs JPG: What iPhone Photographers Should Know
- background-image vs the img Tag
- Sprites vs Icon Fonts vs SVG
- Inline SVG vs SVG in an img Tag