responsive-loader

This has been a solved problem for years in some frameworks, e.g. all the major image upload handling libraries in Rails have this built in an it's very easy to use. There are also plenty of webpack plugins for static assets: https://github.com/metalabdesign/sharp-loader https://github.com/herrstucki/responsive-loader https://github.com/tcoopman/image-webpack-loader (and many more, just grabbing a few examples)

If you are using Webpack to build your application, you can take advantage of a fantastic loader called "responsive-loader" [0] which can automatically build smaller and smaller versions of an image which can be dumped into a srcSet automatically to give you a good amount of the benefits of responsive images without a ton of work customizing each <img> tag in your application. Combine that with my plugin "imagemin-webpack-plugin" [1] which will ensure they are all compressed as well as you want, and you can get a fairly drop-in solution to massively reduce the size of images downloaded while keeping extremely high resolutions for user agents that want it, and without a ton of manual work on your part! I've always wanted to look into taking this a step further and somehow determine the actual size of the image on the screen in various reso

Image compression is a great first step. Imagemin is a great javascript-based tool that lets you incorperate a bunch of optimization tools (mozjpeg, pngquant, jpegtran, optipng, gifsicle, etc...) all in one (if your project can easily use javascript modules...). And there is a plugin [0] (that I wrote) for webpack to make it happen without any thought. Another potentially massive step is to use the srcset [1] attribute of the <img> tag. It lets you provide a bunch of different resolutions for the same image, and the browser will choose the best one to download and render based on the physical screen pixel density, zoom level, and possibly in the future even things like bandwidth preferences or battery level. Combine the imagemin plugin with a webpack-loader [2] that will auto-generate 5-ish different downscaled versions of an image as src