Loadr is an efficient solution for seamlessly loading large images in HTML, with a minified size of under 1 KB.

[Demo](https://open-loadr.github.io/loadr/) ## Installation ### CDN Import Loadr using CDN. ```index.html``` ```html ``` #### 🚧 Specific Version ```html ``` ## Usage Add the ```hr-src``` to the HTML `````` element, This will be your high-res image. In the ```src``` attribute is the low-res version of your image. Loadr will load the high-res image in the background then update the ```src``` with its URL, Replacing the low-res image. ```index.html``` ```html ``` Call Loadr in your Javascript. That's it 🎉. ```index.html``` ```html ``` Check out the Demo on [Codepen.](https://codepen.io/GreenestGoat/pen/yLdRzPN) ### Extra step Lets add some styling to the `````` element. ```style.css``` ```css img { height: 300px; width: 300px; object-fit: cover; border-radius: 15px; overflow: hidden; } ``` ## Customization Loadr comes with variables that can be easily customized. ```index.html``` ```html ``` Check out the Customization Demo on [Codepen.](https://codepen.io/GreenestGoat/pen/BagqdNR) ## Copyright and license Licensed under the MIT License, Copyright © 2024-present open-loadr. See [LICENSE](https://github.com/open-loadr/loadr/blob/main/LICENSE) for more information.