Edit & Optimize Image Assets

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:

https://assets.codepen.io/3/image.png?width=310&height=436&format=auto

The base URL is:

https://assets.codepen.io/3/image.png

That will serve your image perfectly as it always has, but then see the URL parameters too:

?width=310&height=436&format=auto

Those will serve a manipulated version of the image based on those values, and still be fast, cached, global CDN served, and all that.

width	width of image. Positive integer. Cannot increase size of original.
height	height of image. Positive integer. Cannot increase size of original.
format	auto will attempt to serve the image as WebP if the requesting browser supports it.
fit	scale-down is the default. cover will make sure the image covers the dimensions without squishing (it may crop your image!) pad will make sure the image covers the dimensions without squishing (it may leave white edges!)
quality	0 - 100. If the image is GIF, JPG, or WebP (No PNG), this will do lossy compression reducing the file size.
rotate	90, 180, or 270

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 format=auto.

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.

---

The post Edit & Optimize Image Assets appeared first on CodePen Blog.