responsive_images
Create srcset and picture HTML for responsive images from a base URL, generating multiple size variants and formats for adaptive web design.
Instructions
Generate srcset and element HTML for responsive images. Given a base image URL, produces multiple size variants with proper HTML markup for responsive design.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| alt | No | Alt text for the image | |
| sizes | No | CSS sizes attribute (default: '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw') | |
| widths | No | Array of widths to generate (default: [320, 640, 768, 1024, 1280, 1536, 1920]) | |
| baseUrl | Yes | Base image URL that accepts width/format query parameters | |
| formats | No | Image formats for <picture> sources (default: ['webp', auto-detected original format]) | |
| loading | No | Loading strategy: 'lazy' or 'eager' (default: lazy) | |
| className | No | CSS class name to add to the element |