When you save a Pen, CodePen automatically takes a screenshot of your Pen. Screenshots are used for:

1. Shown in the grid for Pens that are determined to be non-animated (Classic Pens) or always for 2.0 Pens.
2. Always on mobile devices (instead of the default <iframe>s for animated Classic Pens)
3. Users can opt in (in User Settings) to browse the site with images instead of <iframe>s
4. RSS feeds
5. Social Media “cards” (metadata URLs)

You can access them at a URL structure like this:

Large Image Preview

https://codepen.io/chriscoyier/pen/01a0aa73-7436-7412-bee2-9c8bc77fd6f1/image/large.png

Small Image Preview

https://codepen.io/chriscoyier/pen/01a0aa73-7436-7412-bee2-9c8bc77fd6f1/image/small.png

Note that 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 receiving an image, 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.

Custom Screenshots

PRO members can override the default screenshot by uploading a still image file named screenshot.jpg (or .png, .webp, or .avif) to the root of the Pen. You and others see the custom screenshot when browsing, searching, and sharing Pens.

We’ll automatically size it, but 1280×720 is recommended. Animated screenshots are not supported.