YAML

Image File Formats - YAML

Image file formats are standard formats for storing, displaying, and transferring digital image data on computers. Various formats exist depending on usage and characteristics, including JPEG, PNG, GIF, BMP, SVG, WebP, and AVIF. Each has distinct features regarding compression methods, transparency, animation support, and color depth. Choosing the appropriate format is essential for purposes such as web display, printing, photo storage, and icon creation. In recent years, next-generation formats like WebP and AVIF, which offer high compression with high quality, are becoming increasingly popular.

image format JPEG PNG GIF WebP AVIF SVG web development graphics

- code: "01"
  slug: "jpeg"
  name: "JPEG"
  fullName: "Joint Photographic Experts Group"
  extensions:
    - ".jpg"
    - ".jpeg"
    - ".jpe"
    - ".jif"
    - ".jfif"
  mimeType: "image/jpeg"
  compression: "Lossy compression (DCT-based)"
  transparency: false
  animation: false
  description: "Lossy compression format optimized for photographic images."
  useCases:
    - "Photographs"
    - "Web display"
    - "Digital cameras"
    - "Print images"
  browserSupport: "Universal (all browsers)"
- code: "02"
  slug: "png"
  name: "PNG"
  fullName: "Portable Network Graphics"
  extensions:
    - ".png"
  mimeType: "image/png"
  compression: "Lossless compression (DEFLATE)"
  transparency: true
  animation: false
  description: "Format supporting lossless compression and full alpha transparency."
  useCases:
    - "Screenshots"
    - "Logos and icons"
    - "Transparent images"
    - "Charts and diagrams"
  browserSupport: "Universal (IE9+)"
- code: "03"
  slug: "gif"
  name: "GIF"
  fullName: "Graphics Interchange Format"
  extensions:
    - ".gif"
  mimeType: "image/gif"
  compression: "Lossless compression (LZW)"
  transparency: true
  animation: true
  description: "Format supporting animation and 1-bit transparency."
  useCases:
    - "Simple animations"
    - "Small icons"
    - "Logos"
    - "Shapes"
  browserSupport: "Universal (all browsers)"
- code: "04"
  slug: "bmp"
  name: "BMP"
  fullName: "Bitmap"
  extensions:
    - ".bmp"
    - ".dib"
  mimeType: "image/bmp"
  compression: "Uncompressed or lossless compression"
  transparency: false
  animation: false
  description: "Standard bitmap image format for Windows."
  useCases:
    - "Windows applications"
    - "Intermediate format for image editing"
    - "System resources"
  browserSupport: "Universal (limited use)"
- code: "05"
  slug: "svg"
  name: "SVG"
  fullName: "Scalable Vector Graphics"
  extensions:
    - ".svg"
    - ".svgz"
  mimeType: "image/svg+xml"
  compression: "XML-based (HTTP compressible)"
  transparency: true
  animation: true
  description: "XML-based scalable vector graphics format."
  useCases:
    - "Icons and logos"
    - "Charts and diagrams"
    - "UI elements"
    - "Print graphics"
  browserSupport: "IE9+, Chrome 4+, Firefox 3+, Safari 3.2+, Edge 12+"
- code: "06"
  slug: "webp"
  name: "WebP"
  fullName: "WebP"
  extensions:
    - ".webp"
  mimeType: "image/webp"
  compression: "Lossy and lossless (VP8-based)"
  transparency: true
  animation: true
  description: "Next-generation web image format developed by Google."
  useCases:
    - "Web image optimization"
    - "Animation"
    - "Transparent images"
    - "Responsive images"
  browserSupport: "Chrome 23+, Firefox 65+, Safari 14+, Edge 18+, Opera 12.1+"
- code: "07"
  slug: "avif"
  name: "AVIF"
  fullName: "AV1 Image File Format"
  extensions:
    - ".avif"
    - ".avifs"
  mimeType: "image/avif"
  compression: "Lossy and lossless (AV1-based)"
  transparency: true
  animation: true
  description: "Next-generation image format using AV1 codec."
  useCases:
    - "Highly compressed web images"
    - "HDR images"
    - "High-quality photos"
    - "Next-gen web development"
  browserSupport: "Chrome 85+, Firefox 93+, Safari 16+, Opera 71+, Edge (Chromium-based)"