FireSize
FireSize copied to clipboard
cloudflare-apps
Automatically optimize every image on your website.
FireSize + Javascript
This project uses the fantastic FireSize to automatically optimize images on an existing website. This is a community project, not affiliated with the FireSize team.
The upper timeline is optimized with FireSize, the lower is not.
Usage
Add optimize.js to the <head> of your site. Done!
How It Works
We use a MutationObserver
to detect when <img> elements are parsed by the browser, and update the src
to an optimized version before the browser begins to download the original image.
If the image loading errors for any reason, the image will automatically be reverted to it's original src.
It wouldn't be possible without the flexability of the FireSize project.
Optimizations
We shrink the size of the image if we are able to determine at least one of the dimentions. To do this, the element must have a defined height or width (either as an attribute or in CSS).
If we don't have size information, we still will optimize the image to use the FireSize CDN, which can have a significant performance improvement.
Options
If you don't wish for a specific image to be optimized, add the no-firesize class to it.
Cavets
- Doesn't optimize images inserted by JavaScript dynamically.
Errata
This project is released under the MIT license.
We aren't affiliated with FireSize.
Please contribute by opening an Issue or Pull Request.
Metadata
Owner
cloudflare-apps
Metadata
Automatically optimize every image on your website.