When you save a Pen, it enters a queue for a screenshot. It’s not instant, but it shouldn’t take too long. We generate two screenshot sizes for your Pen.

You can access them at a URL structure like this:

Large Image Preview

https://codepen.io/chriscoyier/pen/NWGpvKm/image/large.png

Small Image Preview

https://codepen.io/chriscoyier/pen/NWGpvKm/image/small.png

Note those are just examples. You’d replace the username and slug for any given Pen.

Those image preview URLs will redirect to where the images are actually stored. If you are counting on getting an image back, use the URL in the format above. Where it redirects to may change (if the Pen changes and is resaved) but those URLs should always resolve to a real image.

Things Screenshots Are Used For

1. Served to mobile devices, instead of <iframe>s for Pen Thumbnails
2. Users can opt-in (in User Settings) to browse the site with images instead of <iframe>s
3. RSS feeds
4. Social Media “cards” (metadata URLs)

PRO members can set a custom screenshot for Pens. Custom screenshots replace the auto-generated screenshot everywhere screenshots are shown.