A runtime service to use live website screenshots on your site.
Read the Blog post: Building an Automated Screenshot Service on Netlify in ~140 Lines of Code.
Image URLs have the formats:
/:url/
/:url/:size/
/:url/:size/:aspectratio/
/:url/:size/:aspectratio/:zoom/
url
must be URI encoded.size
values:
small
: 375×___ (default)medium
: 650×___large
: 1024×___aspectratio
of 9:16
is not supported (throws an error)opengraph
: always 1200×630, works with zoom
aspectratio
is ignored (no errors thrown)aspectratio
values:
1:1
(default)9:16
zoom
values:
bigger
(1.4 devicePixelRatio
)smaller
(0.71 devicePixelRatio
)You can customize the conditions with which the headless browser will wait to take the screenshot. At a low level, this controls the waitUntil
property in Puppeteer’s goto
call. The options are:
wait:0
wait:1
(default)wait:2
wait:3
/:url/_wait:0/
/:url/_wait:1/
/:url/_wait:2/
/:url/_wait:3/
Number of seconds to wait before the request times out. We will attempt to simulate the stop button and return the screenshot that exists up to that point. Worst case, a default Eleventy logo is returned.
3
9
/:url/_timeout:3/
/:url/_timeout:9/
You can use any of these advanced options together, like /:url/_wait:0_timeout:2/
. Order only matters to the uniqueness of the URL caching on the CDN: /:url/_wait:0/
and /:url/_wait:0/
will be functionally equivalent but make two different screenshot requests.