---
title: ToolRouter — Agent Use Case Guide
description: Step-by-step guide for completing a task with a specific AI agent using ToolRouter.
url: https://toolrouter.com/tools/image-ops/use-cases/create-responsive-variants/chatgpt
---
# How to Create Responsive Variants with ChatGPT

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.

## Setup

{"mcpServers":{"toolrouter":{"command":"npx","args":["-y","toolrouter-mcp"]}}}

## Steps

1. Configure ToolRouter in ChatGPT
2. Ask: "Create responsive image variants for this photo at standard breakpoints"
3. ChatGPT generates variants at recommended sizes
4. Request: "What srcset values should I use for these variants?"
5. Ask for the complete HTML implementation for responsive images

## Example Prompt

```
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
