Create Responsive Image Variants

Modern responsive web design requires serving different image sizes to different devices. A 3000px hero image that looks sharp on a 4K monitor is wasteful on a mobile phone with a 375px viewport. Serving oversized images to mobile devices wastes bandwidth, increases load time, and hurts Core Web Vitals scores.

The solution is generating multiple variants of each image at different resolutions and using srcset or picture elements to let the browser pick the right one. But manually creating 3-5 variants of every image is impractical. ToolRouter's transform_image skill automates this by generating all the variants you need from a single high-resolution source.

A typical responsive image strategy might generate variants at 400px, 800px, 1200px, and 2400px widths from a single source image. Combined with format conversion (WebP for modern browsers, JPEG fallback), this ensures every visitor gets the optimal image for their device and connection speed. The result is faster page loads, lower bandwidth costs, and better Lighthouse performance scores.