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. |