HTML preprocessor that decorates img tags with base64 placeholders for faster perceived image loading.
Coloor is an HTML preprocessor that decorates image tags with data attributes containing base64-encoded placeholder versions of images. It solves the problem of slow perceived image loading by immediately showing a low-quality version while the full image loads in the background, improving user experience without requiring complex infrastructure.
Frontend developers and web performance engineers who need to optimize image loading patterns in static sites or server-rendered applications.
Developers choose Coloor because it provides a simple, lightweight solution for image placeholders that requires minimal client-side JavaScript and integrates easily with build tools like Gulp and Webpack.
Image preloading utility
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Embeds tiny base64-encoded image versions directly into HTML, eliminating extra HTTP requests for placeholders as demonstrated in the output example.
Falls back to standard image loading if canvas isn't supported, ensuring compatibility across browsers without breaking functionality.
Offers plugins for Gulp and a loader for Webpack, making it easy to integrate into modern development workflows for automated processing.
The client-side JavaScript is only 776 bytes minified, adding negligible performance overhead to page loads.
Requires manual calling of the Coloor function for client-rendered HTML, as noted in the README for frameworks like React, adding complexity.
Embedding base64 placeholders for each image bloats the HTML file, which can slow down initial parsing and increase bandwidth usage.
Focuses only on preloading placeholders and lacks support for modern image techniques like lazy loading, responsive images, or format optimization.