Responsive Images
Did you attend my talk on Responsive Images?
This repo is the demo code. The deployed demo can be found here.
You can find the slides here. They are provided as a convenience to the attendees, so please do not reuse them without my permission. To progress the slides, hit the "N" (for next). Hit "P" (previous) to go backwards.
Below are the resources I recommend plus additional sources I used for content.
Recommended Resources
- Responsive Images on MDN
- Image Performance, a short book by Mat Marquis (not free)
- Modern DevTools course by Umar Hansa (not free) and his weekly-ish newsletter (free!)
- RespImageLint bookmarklet for linting images for responsiveness - a great performance tool!
- Why art direction is critical to responsive design by Web Designer Depot staff
- Converting Images to webp by Jeremy Wagner. In addition to Photoshop and Sketch, he gives instructions on the
cwebpCLI tool too which is great if you can't those other tools like me. An added benefit is that the CLI tool is actually more flexible in controlling your desired output. More details in the docs oncwebphere. Or buy the full manual here (free for Smashing members). - Loading Images in Webpack on Survive JS by Juho Vepsäläinen.