Simple demo of various techniques/tools to performantly load images on The Web. Based on my blog post on the same subject.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build-utils
src
.gitignore
LICENSE
README.md
index.html
package-lock.json
package.json
webpack.config.js

README.md

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 webp format using a Webpack plugin
  • lazy loading
  • supporting no-JS browsers

This project is also live here.

Install

$ npm install

Scripts

Resize images

npm run resize-images

This will resize all the images inside the original-images folder and output the result into src/images.

Development

npm run dev

Then navigate to localhost:8080

Production

npm run prod

Hope it help. Cheers! 🥂

Made with ❤ by Pava