CodePen’s Asset Hosting is the easiest way to upload and use images in your code, and it’s available right inside the Pen Editor! Let us handle the storage and CDN delivery¹ and you let your creativity fly. We’ve just released another major upgrade to this feature!
Now your image assets are even better with dynamic editing and optimization! Resize, rotate, and adjust the quality in the new image editor without changing the original image. Here’s a video demonstrating:
Take advantage of the increased assets storage to upload full size, high-quality images then use the image editor to make a smaller, optimized version to fit exactly where you need. You can even match a new aspect ratio with Fit modes like Cover or Pad. Save your edits as a new image, or make changes on-the-fly with the fancy URL parameters!
For example, the URL to an asset might be:
The base URL is:
That will serve your image perfectly as it always has, but then see the URL parameters too:
Those will serve a manipulated version of the image based on those values, and still be fast, cached, global CDN served, and all that.
Here’s a workflow showing just how useful this on-the-fly editing can be!
This can be super useful for the responsive images syntax in HTML (recall our responsive art direction challenge), or anywhere changing an image via the URL would be handy. For example:
<img src="https://assets.codepen.io/3/wall-e.jpg?width=300&format=auto" srcset=" https://assets.codepen.io/3/wall-e.jpg?width=1200&format=auto 600w, https://assets.codepen.io/3/wall-e.jpg?width=2400&format=auto 1200w " alt="Wall-E Toy looking up and to the left" >
WebP can also dramatically decrease the file size while staying high quality, but manually converting to and working with WebP files can be a pain. Let us handle it for you! Drop in your JPG, GIF and PNG images and we can automatically serve a WebP image to supporting browsers with
You can get up to 20 GB of Asset Hosting on our PRO Plans, so sign up for PRO to get started. That extra storage might be helpful, as you might notice another feature in there: “Save As New Image” which allows you to store your manipulated image as a new copy of the image if you’d like to.
¹ We’ll even smooth out issues with CORS headers so you can drop those images in 2D canvas or WebGL without problem!