Click the edit button next to text-based files and images to open the asset editor.
Editing Text Files
Edit your text assets using the same CodePen editing experience you know & love! You can even edit Assets right within the Pen Editor:
Editing & Optimizing Images
Resize, rotate, and adjust quality in the new image editor without changing the original image! Make your tweaks then save as a new image or copy the optimized URL to get a dynamic served version of your image.
Image Transformations
You can manually add these URL parameters to your CodePen hosted images, or use the image editor to get great visual of the available URL parameters. The parameters can always be adjusted later in your code.
| Key | Value | Description |
|---|---|---|
width | Number | Desired width of the image |
height | Number | Desired height of the image |
fit | scale-down|cover|pad | Control how the image fits into the given width/height. scale-down keeps the aspect ratio. cover and pad size at the exact given width & height, with cover filling the whole canvas with the image and pad scaling the image down to fit within the canvas. |
rotate | 0|90|180|270 | Direction to rotate the image |
format | auto | Automatically convert the JPG, GIF and PNG images to WebP if the browser supports it, otherwise the original format is returned. |
quality | Number from 0 to 100 | Adjust the quality to get a smaller filesize through lossy compression. This setting only applies to JPEG, GIF, and WebP images. |