Choosing the right image format is crucial for web performance and quality. Different formats are optimized for different types of images. Let's explore the main image formats used on the web and when to use each one.
JPG / JPEG
JPEG (Joint Photographic Experts Group) is the most common image format on the web. It uses lossy compression, which means some image quality is sacrificed to achieve smaller file sizes.
<img src="photograph.jpg" alt="Mountain landscape" width="1200" height="800">
<img src="portrait.jpeg" alt="Professional headshot" width="800" height="1000">Characteristics
- Compression: Lossy (reduces quality for smaller file size)
- Transparency: Not supported
- Animation: Not supported
- Best for: Photographs and complex images with many colors
- File extension: .jpg or .jpeg (both are the same)
When to Use JPG
✅ Use JPG for:
- Photographs and realistic images
- Images with gradients and many colors
- Background images
- Product photos
- When file size is more important than perfect quality
❌ Don't use JPG for:
- Logos or icons (use PNG or SVG)
- Images with text
- Images that need transparency
- Line drawings or illustrations with solid colors
- Images requiring sharp edges
PNG
PNG (Portable Network Graphics) uses lossless compression, preserving all image quality. It supports transparency, making it ideal for graphics and logos.
<img src="logo.png" alt="Company logo" width="300" height="100">
<img src="icon.png" alt="Download icon" width="64" height="64">Characteristics
- Compression: Lossless (no quality loss)
- Transparency: Supported (including alpha channel)
- Animation: Not supported
- Best for: Logos, icons, graphics, and images needing transparency
- File extension: .png
When to Use PNG
✅ Use PNG for:
- Logos and branding
- Icons and UI elements
- Graphics with text
- Images requiring transparency
- Screenshots
- Images with sharp edges or solid colors
❌ Don't use PNG for:
- Photographs (file sizes will be huge)
- Complex images with many colors
- When file size is critical
GIF
GIF (Graphics Interchange Format) is an older format that supports animation and transparency. It's limited to 256 colors, making it less suitable for modern photography.
<img src="animation.gif" alt="Loading spinner animation" width="100" height="100">
<img src="emoji.gif" alt="Waving hand animation" width="64" height="64">Characteristics
- Compression: Lossless (but limited to 256 colors)
- Transparency: Supported (but not alpha channel)
- Animation: Supported
- Best for: Simple animations and very simple graphics
- File extension: .gif
When to Use GIF
✅ Use GIF for:
- Simple animations (loading spinners, icons)
- Very simple graphics with few colors
- Memes and reaction images (tradition, but better alternatives exist)
❌ Don't use GIF for:
- Photographs (terrible quality with only 256 colors)
- Long or complex animations (use video instead)
- Modern web graphics (PNG or WebP are better)
SVG
SVG (Scalable Vector Graphics) is a vector format, not raster. It uses XML code to define shapes, which means it can scale to any size without losing quality.
<img src="logo.svg" alt="Company logo" width="300" height="100">
<img src="icon.svg" alt="Settings icon" width="32" height="32">Inline SVG
SVG can also be embedded directly in HTML:
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>Characteristics
- Type: Vector (not raster/pixel-based)
- Compression: Can be compressed with GZIP
- Scalability: Perfect at any size
- Animation: Supported (with CSS or JavaScript)
- Best for: Logos, icons, illustrations, and simple graphics
- File extension: .svg
When to Use SVG
✅ Use SVG for:
- Logos (scales perfectly for any screen)
- Icons and UI elements
- Illustrations and diagrams
- Graphs and charts
- Shapes and geometric designs
- Anything that needs to scale without quality loss
❌ Don't use SVG for:
- Photographs
- Complex images with many colors and details
- When file size becomes too large (very complex SVGs)
WebP
WebP is a modern image format developed by Google that provides superior compression compared to JPG and PNG. It supports both lossy and lossless compression, transparency, and animation.
<img src="photo.webp" alt="Mountain sunset" width="1200" height="800">
<img src="logo.webp" alt="Logo with transparency" width="300" height="100">Characteristics
- Compression: Both lossy and lossless options
- Transparency: Supported
- Animation: Supported
- Best for: Any type of image (when browser support allows)
- File size: 25-35% smaller than JPG/PNG
- File extension: .webp
When to Use WebP
✅ Use WebP for:
- Photographs (better than JPG)
- Graphics with transparency (better than PNG)
- Any image where file size matters
- Modern websites targeting recent browsers
Browser Support
WebP is supported in all modern browsers (Chrome, Firefox, Safari 14+, Edge). For older browsers, provide fallbacks using the <picture> element (we'll cover this in a later lesson).
Format Comparison Table
| Format | Best For | Transparency | Animation | File Size |
|---|---|---|---|---|
| JPG | Photographs | ❌ No | ❌ No | Small |
| PNG | Logos, Graphics | ✅ Yes | ❌ No | Large |
| GIF | Simple animations | ⚠️ Limited | ✅ Yes | Medium |
| SVG | Logos, Icons | ✅ Yes | ✅ Yes | Very Small |
| WebP | Everything | ✅ Yes | ✅ Yes | Very Small |
Quick Decision Guide
🎯 Quick Format Selection:
- Photo or complex image: JPG or WebP
- Logo or icon: SVG (if vector) or PNG
- Graphic with transparency: PNG or WebP
- Simple animation: GIF or WebP
- Scalable graphic: SVG
- Best performance: WebP (with fallback)
Practical Examples
Website Header
<header>
<!-- Logo - use SVG for perfect scaling -->
<img src="logo.svg" alt="Company Name" width="200" height="60">
<!-- Hero image - use WebP or JPG -->
<img src="hero.webp" alt="Modern office workspace" width="1920" height="800">
</header>Product Page
<section class="product">
<!-- Product photos - use JPG or WebP -->
<img src="product-main.jpg" alt="Blue ceramic mug" width="800" height="800">
<!-- Icons - use SVG -->
<img src="shipping-icon.svg" alt="Free shipping" width="32" height="32">
<img src="return-icon.svg" alt="Easy returns" width="32" height="32">
</section>Blog Article
<article>
<!-- Featured image - use WebP with JPG fallback -->
<img src="featured.webp" alt="Sunset photography" width="1200" height="800">
<!-- Screenshots - use PNG -->
<img src="screenshot.png" alt="Software interface" width="1000" height="600">
<!-- Diagrams - use SVG -->
<img src="diagram.svg" alt="Process flowchart" width="800" height="600">
</article>Optimization Tips
💡 Optimization Best Practices:
- Compress images before uploading
- Use appropriate dimensions (don't upload huge images)
- Consider using WebP for better compression
- Use SVG for logos and icons when possible
- Test image quality at different compression levels
- Use image optimization tools (TinyPNG, ImageOptim, Squoosh)
- Serve different formats based on browser support
Key Takeaways
- JPG: Best for photographs and complex images
- PNG: Best for graphics with transparency
- GIF: Best for simple animations (outdated for most uses)
- SVG: Best for logos, icons, and scalable graphics
- WebP: Modern format that outperforms others
- Choose format based on image type and requirements
- Always optimize images for web performance
- Consider using WebP with fallbacks for best results
What's Next?
Now that you understand image formats, you're ready to learn about semantic image containers. In the next lesson, we'll explore the figure and figcaption elements, which provide better structure and meaning for images with captions.