Hello Image Opto!





Using Fastly Image optimization
This is an example of using Fastly's Image Optimization service to modify images in Glitch projects on the fly.
Every Glitch project's assets are cached by a Fastly service - assets added over the last few years produce links to the `cdn.glitch.global` domain, and if you're using a project that still has `cdn.glitch.com` assets you can change the url on those to `cdn.glitch.global` and benefit from Fastly's edge caches for your project's assets.
Even better, image assets are also cached by a separate Fastly service at `images.glitch.global` with the Fastly Image Optimizer enabled, which allows you to do all kinds of fun stuff like the images above from a single source image!
- I used saturation to acheive the greyscale image above
- height or width can be used to scale the image
- use orient to rotate or flip the image
- other functions to blur or add or remove a background are available
Fastly Image Optimizer handles any jpeg, png, gif, or webp image (it's not able to transform svgs, for example) and a variety of video formats and applies some transformations automatically (such as metadata stripping).