Knowing the file size before fetching the content can drastically improve the user experience and save bandwidth.
Image urls returned from the
/api/image endpoint don’t allow HEAD requests.
As described on MDN, the HTTP HEAD Method can be used to do that. It will return the content-length:
Unfortunately the images served from S3 only allow GET requests.
Allow HEAD requests on the S3 image URLs
Another solution would be to provide the file size with the /api/image response, but this would change the output format and might not be desirable
To clarify, are you referring to the REST API image endpoint, or something else?
I’m referring to the actual image urls returned by the /image endpoint.
I want to know the file size of the image behind the url, before downloading it.
Instead of making a GET request which would download the actual image, I want to make a HEAD request to get the content-length.
This works if I make the request through PHP or Node, but my app is running in the browser and Figma’s image urls won’t allow these kind of HEAD requests from a browser.
Can I confirm that this is the problem you’re encountering?
- You’re using the GET /v1/images REST API call
- You’re attempting to make a
HEAD request from a browser request against one of the S3-hosted image URLs that are returned from the REST API call, and are running into a cross-origin error
Here’s the console.log() for the same code that is making HEAD requests for:
- Image URL from Figma → CORS
- Image URL from Unsplash
I wonder wether “HEAD” is not included in the “AllowedMethods” field of the CORS configuration of the S3 bucket?
Thanks for clarifying. I think either of your suggestions (allowing S3 HEAD requests and supplementing the /v1/images response) might be possible. We’ll log your request, it’s a good one!
Great, thanks for listening!