Why Are There Different Image Formats?
Storing every pixel's colour data without any compression would produce enormous files. Different image formats use different strategies to reduce file size while preserving as much quality as possible. Choosing the right format depends on what the image is for.
JPEG (or JPG)
JPEG (Joint Photographic Experts Group) is the most common format for photographs. It uses lossy compression, which means some image data is permanently discarded to make the file smaller.
- Great for photographs and complex scenes with smooth colour gradients
- File sizes are small (typically 100 KB to a few MB for a photo)
- Does not support transparency
- Every time you re-save a JPEG, quality is lost a little more
Never use JPEG for logos, diagrams, or text-heavy images. The compression creates visible blurring called "artefacts" around sharp edges and text.
PNG
PNG (Portable Network Graphics) uses lossless compression, so no image data is ever lost. It is the best choice when quality must be perfect.
- Supports transparency (including semi-transparent pixels)
- Perfect for logos, diagrams, icons, and screenshots
- File sizes are larger than JPEG for photographs
- Ideal for images that will be edited and re-saved many times
GIF
GIF (Graphics Interchange Format) is an older format that is limited to a palette of 256 colours maximum. Its main feature is support for simple animations.
- Used almost exclusively for short, looping animations on the web
- Not suitable for photographs (too few colours)
- Each frame of the animation is stored as a separate image inside the file
WebP
WebP is a modern format developed by Google. It offers:
- Lossy and lossless modes
- Smaller file sizes than JPEG and PNG for similar quality
- Transparency support
- It is becoming the standard for web images
Comparison Table
| Feature | JPEG | PNG | GIF | WebP |
|---|---|---|---|---|
| Compression | Lossy | Lossless | Lossless | Both |
| Transparency | No | Yes | Yes (1-bit) | Yes |
| Animation | No | No | Yes | Yes |
| Best for | Photos | Graphics | Animations | Web use |
A quick rule of thumb: use JPEG for photos you are sharing, PNG for anything with text, logos, or transparency, and GIF only when you need a simple animation.
Practice Problems
A web developer is creating a company logo with a transparent background to place over different coloured banners. Which image format should they use and why?
Show answer
Explain why re-saving a JPEG image multiple times reduces its quality, while doing the same with a PNG does not.