HTML5 Mastery: The Complete Web Foundation
HomeInsightsCoursesHTMLImage Formats (JPG, PNG, SVG, WebP)
Images & Graphics

Image Formats (JPG, PNG, SVG, WebP)

Choose the right image format for every situation. Learn the technical differences, compression methods, and use cases for JPEG, PNG, GIF, WebP, AVIF, and SVG.

Why Image Format Matters

Choosing the right image format affects file size, loading speed, visual quality, and user experience. Each format has specific strengths and ideal use cases.

70%

of average web page weight is images

25-35%

file size reduction with WebP vs JPEG

50%

smaller files with AVIF vs WebP

JPEG / JPG

Joint Photographic Experts Group - Lossy compression format ideal for photographs.

Technical Specifications:

  • Extension: .jpg, .jpeg
  • Compression: Lossy (DCT-based)
  • Color Support: 16.7 million colors (24-bit)
  • Transparency: ❌ No
  • Animation: ❌ No
  • Browser Support: ✅ Universal

How JPEG Compression Works:

  1. Color Space Conversion: RGB → YCbCr (luminance + chrominance)
  2. Chroma Subsampling: Reduces color information (human eye less sensitive)
  3. DCT Transform: Converts spatial data to frequency domain
  4. Quantization: Discards less important data (lossy step)
  5. Entropy Encoding: Huffman coding compresses remaining data

✅ Best For:

  • Photographs
  • Complex images with gradients
  • Images with many colors
  • Product photos
  • Blog post images

❌ Avoid For:

  • Text-heavy images (gets blurry)
  • Images requiring transparency
  • Logos and icons (artifacts appear)
  • Line drawings
  • Images with sharp edges
JPEG Usage
HTML
<!-- Standard JPEG --&gt;
<img src="photo.jpg" alt="Landscape photo" width="1200" height="800">

<!-- Progressive JPEG (better perceived loading) --&gt;
<img src="photo-progressive.jpg" alt="Photo" loading="lazy">

<!-- Quality recommendations: --&gt;
<!-- - 80-90% for high-quality photos --&gt;
<!-- - 60-80% for general web use --&gt;
<!-- - 40-60% for thumbnails --&gt;

PNG

Portable Network Graphics - Lossless format with transparency support.

Technical Specifications:

  • Extension: .png
  • Compression: Lossless (DEFLATE)
  • Color Support: Up to 16.7 million + alpha (32-bit)
  • Transparency: ✅ Yes (alpha channel)
  • Animation: ❌ No (APNG exists but limited support)
  • Browser Support: ✅ Universal

PNG Variants:

TypeColorsUse Case
PNG-8256 colorsSimple graphics, small file size
PNG-2416.7 millionFull-color images, no transparency
PNG-3216.7 million + alphaFull-color with transparency

✅ Best For:

  • Logos and branding
  • Icons
  • Screenshots
  • Images requiring transparency
  • Text-heavy images
  • Line art and diagrams

❌ Avoid For:

  • Photographs (large file size)
  • Complex images with gradients
  • When file size is critical
PNG Usage
HTML
<!-- PNG with transparency --&gt;
<img src="logo.png" alt="Company logo" width="200" height="100">

<!-- Optimize PNGs with tools like: --&gt;
<!-- - TinyPNG, ImageOptim, pngquant --&gt;
<!-- - Can reduce size by 50-80% without visible loss --&gt;

WebP

Google's modern format - Superior compression with transparency and animation support.

Technical Specifications:

  • Extension: .webp
  • Compression: Both lossy and lossless
  • Color Support: 16.7 million + alpha
  • Transparency: ✅ Yes
  • Animation: ✅ Yes
  • Browser Support: ✅ 95%+ (Chrome 32+, Firefox 65+, Edge 18+, Safari 14+)

Why WebP is Superior:

  • 25-35% smaller than JPEG at same quality
  • 26% smaller than PNG for lossless images
  • Supports transparency (unlike JPEG)
  • Supports animation (unlike PNG)
  • Faster loading times

✅ Best For:

  • All use cases (photos, graphics, logos)
  • Modern websites targeting performance
  • Progressive web apps
  • Mobile-first sites

⚠️ Considerations:

  • Always provide JPEG/PNG fallback for older browsers
  • Limited support in older iOS (pre-14)
WebP with Fallback
HTML
<picture>
    <!-- Try WebP first (modern browsers) --&gt;
    <source type="image/webp" srcset="image.webp">
    
    <!-- Fallback to JPEG (older browsers) --&gt;
    <img src="image.jpg" alt="Product photo" width="800" height="600">
</picture>

<!-- Or serve WebP conditionally from server based on Accept header --&gt;

AVIF

AV1 Image File Format - Next-generation format with best compression.

Technical Specifications:

  • Extension: .avif
  • Compression: Both lossy and lossless (AV1 codec)
  • Color Support: Up to 4.3 billion colors (HDR support)
  • Transparency: ✅ Yes
  • Animation: ✅ Yes
  • Browser Support: Chrome 85+, Firefox 93+, Safari 16+ (~80%)

Why AVIF is the Future:

  • 50% smaller than WebP at same quality
  • HDR and wide color gamut support
  • Better detail preservation
  • Open-source and royalty-free

✅ Best For:

  • Cutting-edge websites
  • Maximum performance optimization
  • High-quality images at small sizes
  • HDR content

⚠️ Limitations:

  • Encoding is slow (use for static content)
  • Not supported in older browsers
  • Always need fallbacks
Progressive Enhancement: AVIF → WebP → JPEG
HTML
<picture>
    <!-- Try AVIF first (best compression) --&gt;
    <source type="image/avif" srcset="image.avif">
    
    <!-- Try WebP (good compression, better support) --&gt;
    <source type="image/webp" srcset="image.webp">
    
    <!-- Fallback to JPEG (universal) --&gt;
    <img src="image.jpg" alt="Photo" width="1200" height="800">
</picture>

SVG

Scalable Vector Graphics - XML-based vector format, resolution-independent.

Technical Specifications:

  • Extension: .svg
  • Format: Vector (XML-based)
  • Scalability: ✅ Infinite (no pixelation)
  • File Size: Usually very small
  • Editing: Can edit with text editor
  • CSS/JS: Can style and animate
  • Browser Support: ✅ Universal

✅ Best For:

  • Logos and icons
  • Illustrations
  • Charts and graphs
  • Responsive designs (scales perfectly)
  • Animations

❌ Not For:

  • Photographs
  • Complex images with many colors
SVG Usage
HTML
<!-- External SVG --&gt;
<img src="logo.svg" alt="Logo" width="200" height="100">

<!-- Inline SVG (can style with CSS) --&gt;
<svg width="100" height="100" viewBox="0 0 100 100">
    <circle cx="50" cy="50" r="40" fill="#007bff"/>
    <text x="50" y="55" text-anchor="middle" fill="white" font-size="20">SVG</text>
</svg>

<!-- SVG as background (CSS) --&gt;
<style>
.icon {
    width: 24px;
    height: 24px;
    background-image: url('icon.svg');
}
</style>

GIF

Graphics Interchange Format - Legacy format supporting animation.

Technical Specifications:

  • Extension: .gif
  • Colors: Maximum 256 colors (8-bit)
  • Transparency: ✅ Yes (binary, not alpha)
  • Animation: ✅ Yes
  • Compression: Lossless (LZW)
  • Browser Support: ✅ Universal

✅ Use For:

  • Simple animations (prefer video/WebP now)
  • Legacy support

❌ Better Alternatives:

  • For animations: Use MP4 video or WebP animation (much smaller)
  • For graphics: Use PNG (better quality)
  • For photos: Use JPEG/WebP
⚠️ GIF is Outdated: Modern alternatives (WebP animation, MP4 video) provide better quality and much smaller file sizes. Use GIF only for legacy support.

Format Comparison Table

FormatTypeTransparencyAnimationBest ForFile Size
JPEGRaster (Lossy)❌❌PhotosSmall
PNGRaster (Lossless)✅❌Graphics, LogosLarge
WebPRaster (Both)✅✅EverythingVery Small
AVIFRaster (Both)✅✅EverythingSmallest
SVGVector✅✅Icons, LogosTiny
GIFRaster (Lossless)✅✅LegacyLarge

Choosing the Right Format

Quick Decision Guide:

  1. Is it a vector graphic (logo/icon)? → Use SVG
  2. Is it a photograph?
    • Modern browser? → AVIF > WebP > JPEG
    • Universal support needed? → JPEG
  3. Need transparency?
    • Modern browser? → WebP > PNG
    • Universal support? → PNG
  4. Simple animation?
    • Best: Short MP4 video (smaller than GIF)
    • Alternative: WebP animation
    • Legacy: GIF (last resort)

Practical Implementation

Complete Progressive Enhancement
HTML
<!-- Photos: AVIF &gt; WebP &gt; JPEG --&gt;
<picture>
    <source type="image/avif" srcset="photo.avif">
    <source type="image/webp" srcset="photo.webp">
    <img src="photo.jpg" alt="Photo" width="1200" height="800" loading="lazy">
</picture>

<!-- Graphics with transparency: WebP &gt; PNG --&gt;
<picture>
    <source type="image/webp" srcset="logo.webp">
    <img src="logo.png" alt="Logo" width="200" height="100">
</picture>

<!-- Icons: SVG (vector, tiny size) --&gt;
<img src="icon.svg" alt="Icon" width="24" height="24">

<!-- Animation: MP4 video (not GIF) --&gt;
<video autoplay loop muted playsinline width="400" height="300">
    <source src="animation.mp4" type="video/mp4">
    <source src="animation.webm" type="video/webm">
</video>

Conversion Tools

  • Online: Squoosh.app (Google), TinyPNG, CloudConvert
  • CLI Tools: ImageMagick, cwebp, avifenc, svgo
  • Build Tools: imagemin, sharp (Node.js)
  • CDN: Cloudinary, Imgix (automatic format conversion)

Best Practices Summary

✅ Do

  • Use WebP/AVIF for modern browsers
  • Provide fallbacks for older browsers
  • Use SVG for logos and icons
  • Compress all images before upload
  • Choose format based on content type
  • Test file sizes for each format
  • Use progressive JPEG for photos

❌ Don't

  • Use PNG for photographs
  • Use JPEG for logos/icons
  • Use GIF for animations (use video)
  • Serve only WebP without fallback
  • Skip image compression
  • Use wrong format for content type
  • Ignore browser support

What's Next?

Now that you understand image formats, let's learn about responsive images with srcset and picture elements.

Next: Responsive Images →