Loading images on The Web
Hi! This is a simple demo of the techniques and tools I describe in my article regarding performantly loading images on The Web.
Basically, here are actual code examples on:
- responsive images from HTML as well as CSS
- automating responsive images creation
- compressing to
webpformat using a Webpack plugin
- lazy loading
- supporting no-JS browsers
This project is also live here.
$ npm install
npm run resize-images
This will resize all the images inside the
original-images folder and output the result into
npm run dev
Then navigate to localhost:8080
npm run prod
Hope it help. Cheers!
Made with ❤ by Pava