DOCSEARCHbyAlgolia
Submit Docs

BugWz Responsive Image Manifest

website·Indexed 32 days ago

https://bugwz.com

A JSON manifest mapping image paths to dimensions and source variations, providing metadata such as width, height, and specific source URLs for resolutions including 160w, 320w, and 960w to manage responsive image assets across device sizes.

Tokens
907
Snippets
4
Records
4
Agent score
14%

What's inside BugWz

  1. Reference the responsive image manifest for asset dimensions

    The responsive-image-manifest.json file provides a mapping of image paths to their original dimensions (width and height) and a list of available source variations for different screen resolutions. This manifest is used to implement responsive images by selecting the appropriate source URL based on the required width.
    {
  "/assets/images/covers/topics/redis-cluster.webp": {
    "width": 1600,
    "height": 900,
    "sources": [
      { "src": "/assets/images/covers/topics/redis-cluster.160w.webp", "width": 160 },
      { "src": "/assets/images/covers/topics/redis-cluster.320w.webp", "width": 320 },
      { "src": "/assets/images/covers/topics/redis-cluster.960w.webp", "width": 960 },
      { "src": "/assets/images/covers/topics/redis-cluster.webp", "width": 1600 }
    ]
  }
}

  2. Use the responsive image manifest for asset mapping

    The responsive-image-manifest.json file provides a mapping of image paths to their original dimensions and a list of available responsive source variations. Each entry contains the base image's width and height, and a sources array containing alternative URLs (src) and their corresponding widths (width). This allows developers to implement responsive image loading (e.g., using srcset) by selecting the most appropriate image resolution for the user's device.
    {
  "/assets/images/covers/posts/agentfs.webp": {
    "width": 2048,
    "height": 1152,
    "sources": [
      { "src": "/assets/images/covers/posts/agentfs.160w.webp", "width": 160 },
      { "src": "/assets/images/covers/posts/agentfs.320w.webp", "width": 320 },
      { "src": "/assets/images/covers/posts/agentfs.960w.webp", "width": 960 },
      { "src": "/assets/images/covers/posts/agentfs.1920w.webp", "width": 1920 },
      { "src": "/assets/images/covers/posts/agentfs.webp", "width": 2048 }
    ]
  }
}

  3. Use the responsive image manifest for asset mapping

    The responsive-image-manifest.json file provides a mapping of original image paths to their dimensions and available resolution-specific source variations. This manifest allows developers to implement responsive images by selecting the appropriate source URL based on the target device's width. Each entry contains the original image's width and height, and a sources array containing objects with the src path and the corresponding width of that specific variation (e.g., 160w, 320w, 960w, 1920w).
    {
  "/assets/images/covers/posts/make-rpm.webp": {
    "width": 2686,
    "height": 1428,
    "sources": [
      { "src": "/assets/images/covers/posts/make-rpm.160w.webp", "width": 160 },
      { "src": "/assets/images/covers/posts/make-rpm.320w.webp", "width": 320 },
      { "src": "/assets/images/covers/posts/make-rpm.960w.webp", "width": 960 },
      { "src": "/assets/images/covers/posts/make-rpm.1920w.webp", "width": 1920 },
      { "src": "/assets/images/covers/posts/make-rpm.webp", "width": 2686 }
    ]
  }
}

  4. Reference the responsive image manifest for asset dimensions

    The responsive-image-manifest.json file provides a mapping of image paths to their original dimensions and available responsive source variations. Each entry contains the base image's width and height, along with a sources array listing specific URLs and widths (e.g., 160w, 320w, 960w, 1920w) for different device resolutions.
    {
  "/assets/images/covers/posts/snoopy.webp": {
    "width": 1920,
    "height": 1200,
    "sources": [
      { "src": "/assets/images/covers/posts/snoopy.160w.webp", "width": 160 },
      { "src": "/assets/images/covers/posts/snoopy.320w.webp", "width": 320 },
      { "src": "/assets/images/covers/posts/snoopy.960w.webp", "width": 960 },
      { "src": "/assets/images/covers/posts/snoopy.webp", "width": 1920 }
    ]
  }
}