Skip to main content
GET
/
generate
/
srcset
Generate Srcset
curl --request GET \
  --url https://api.visionfly.ai/generate/srcset \
  --header 'X-API-KEY: <api-key>'
{
  "srcset": "",
  "sizes": "",
  "default": ""
}

​
Generate Srcset

The srcset generation endpoint helps you create responsive image source sets, which are essential for delivering optimized images across different devices and screen sizes.

​
Endpoint

GET /generate/srcset

​
Parameters

ParameterTypeRequiredDescriptionDefault
srcstringYesSource image URL-
wstringNoComma-separated list of widths-
fstringNoOutput formatauto
qintegerNoQuality (1-100)80
sizesstringNoSizes attribute for <img/> tag-

​
Example Requests

​
Basic Request

curl -X GET "https://api.visionfly.ai/generate/srcset?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=400,800,1200"

​
Request with Format and Quality

curl -X GET "https://api.visionfly.ai/generate/srcset?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=400,800,1200&f=webp&q=90"

​
Example Responses

​
Basic Response

{
  "srcset": "https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=400&f=auto&q=80 400w, https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=800&f=auto&q=80 800w, https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=1200&f=auto&q=80 1200w",
  "sizes": "(max-width: 1200px) 100vw, 1200px",
  "default": "https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=800&f=auto&q=80"
}

​
Response with Custom Sizes

{
  "srcset": "https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=400&f=auto&q=80 400w, https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=800&f=auto&q=80 800w, https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=1200&f=auto&q=80 1200w",
  "sizes": "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
  "default": "https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=800&f=auto&q=80"
}

​
HTML Implementation

​
Basic Implementation

VisionFly supports generating responsive images for HTML to optimize delivery across different device sizes. This can be achieved by:
  1. Making a request to the /generate/srcset endpoint to get optimized image URLs at various widths
  2. Using the JSON response to populate the srcset, sizes, and src attributes of your <img> tag
  3. Implementing the responsive image in your HTML as shown in the example below
<img
  srcset="
    https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=400&f=auto&q=80   400w,
    https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=800&f=auto&q=80   800w,
    https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=1200&f=auto&q=80 1200w
  "
  sizes="(max-width: 1200px) 100vw, 1200px"
  src="https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=800&f=auto&q=80"
  alt="Responsive image example"
/>

​
Implementation with Custom Sizes

<img
  srcset="
    https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=400&f=auto&q=80   400w,
    https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=800&f=auto&q=80   800w,
    https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=1200&f=auto&q=80 1200w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  src="https://api.visionfly.ai/transform?src=https://cdn.visionfly.ai/<user_id>/example.jpg&w=800&f=auto&q=80"
  alt="Responsive image example"
/>

​
Error Responses

​
400 Bad Request

{
  "type": "request_error",
  "msg": "Incorrect URL parameters",
  "status_code": 400
}

​
422 Unprocessable Entity

{
  "type": "image_processing_error",
  "msg": "Invalid url provided. Make sure url starts with https and is hosted on visionfly.ai",
  "status_code": 422
}

​
Use Cases

  • Responsive web design
  • Optimizing images for different screen sizes
  • Reducing bandwidth usage
  • Improving page load performance
  • Supporting high-DPI displays

​
Best Practices

  • Use appropriate width breakpoints for your design
  • Consider device pixel ratios
  • Implement proper caching strategies
  • Monitor image performance
  • Use modern image formats (WebP, AVIF)
  • Test across different devices and network conditions

Authorizations

​
X-API-KEY
string
header
required

Query Parameters

​
src
string
required

VisionFly CDN url

​
w
string
default:400,800,1200

Comma-separated list of widths, e.g. 400,800,1200

​
f
enum<string>
default:auto

Output format

Available options:
auto,
webp,
avif,
jpeg,
jpg,
png
​
q
integer
default:80

Quality (1-100)

Response

Successfully generated srcset for responsive images

Response model for generating responsive image source sets.

Contains the srcset string, sizes attribute, and default image URL for responsive image implementation.

​
srcset
string
default:""

Comma-separated list of image URLs with their respective widths

Example:

"https://cdn.visionfly.ai/images/image_400.webp 400w, https://cdn.visionfly.ai/images/image_800.webp 800w"

​
sizes
string
default:""

Sizes attribute for responsive images

Example:

"(max-width: 1200px) 100vw, 1200px"

​
default
string<uri>
default:""

Default image URL to use when srcset is not supported

Required string length: 1 - 2083
Example:

"https://cdn.visionfly.ai/images/image_800.webp"