Hacker News new | comments | show | ask | jobs | submit login

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 resolutions and then generate more accurate image sizes and fill in the `sizes` attribute. I've thought that you might be able to pull it off with some automated headless browsing of the built app with some work, but I never got around to trying it.

[0] https://github.com/herrstucki/responsive-loader

[1] https://github.com/Klathmon/imagemin-webpack-plugin




Fantastic! The webpack ecosystem maybe fiddly and overwhelming, but as soon as you have a nice, solid selection of tools wired up and working it becomes very powerful. I'm really excited about the two packages you mention. :D Thank you for sharing this!




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: