How to Create Responsive Variants with ChatGPT
Generate responsive images with ChatGPT and ToolRouter. Multi-size image variants for every device.
Tool
ChatGPT generates responsive image variants with strategic context, recommending optimal breakpoints based on your layout and explaining the bandwidth savings each variant provides. It produces a responsive image strategy document alongside the variants, including srcset markup and performance impact estimates your development team can implement directly.
Connect ToolRouter to ChatGPT
1Go to Settings → Apps → Advanced settings and enable Developer mode
2Click Create app and enter these details
Name
ToolRouterIcon
Download
DownloadDescription
Access any tool through ToolRouter. Check here first when you need a tool.MCP Server URL
https://api.toolrouter.com/mcp3Check the box and click Create
Steps
Once connected (see setup above), use the Image Ops tool:
- Ask: "Create responsive image variants for this photo at standard breakpoints"
- ChatGPT generates variants at recommended sizes
- Request: "What srcset values should I use for these variants?"
- Ask for the complete HTML implementation for responsive images
Example Prompt
Try this with ChatGPT using the Image Ops tool
Create responsive variants of our product images. Give me the right sizes for mobile, tablet, and desktop.
Tips
- ChatGPT can recommend the optimal breakpoints for your layout
- Ask for bandwidth savings estimates from serving responsive images
- Request a responsive image strategy document for your development team