Deliver Perfect Images At Any Size
summary
Concrete workflow that delivers: generate multiple image widths (Shopify limits to 2048×2048), store them on a CDN, and let the browser pick with srcset and sizes so phones avoid 5,000px assets that can cost ~$18,000/month to serve. Use picturefill and lazysizes for IE/opera mini fallback and lazy loading, strip metadata and choose best format, and automate resizing with task runners like grunt or gulp or services such as adaptive-images/squeezer; caching and progressive enhancement actually make it fast and usable.
AI-written summary · about
chapters (20)
- 0:00Intro
- 0:48Key Order
- 1:50Our Goal
- 2:08Big Images
- 3:40High Quality
- 5:17Reduce Load Times
- 6:35Spoiler Alert
- 6:55Three Commandments
- 8:08Responsibilities
- 10:52The Future
- 14:16Caching
- 16:56Good
- 18:15How
- 20:02Image Sizes
- 22:57Browser Support
- 23:30Source Set
- 29:01Picture
- 31:45Cheap
- 34:47Lazy Sizes
- 36:59Final Thoughts
related talks
30mYour own 'Images as a Service'
45mThe image problem of the web and how to solve it…
36mFast and Beautiful: Modern Image Delivery Techniques
06mOvercoming the Challenges of Image Delivery
01h 00mResponsive Images
44mThe 5 Challenges to Images Delivery on the Web Today
30mFast and Beautiful: Modern Image Delivery Techniques
26mFast and Beautiful Modern Image Delivery Techniques