The image problem of the web and how to solve it with AI
summary
The web’s biggest bloat is images: the average page is ~2.2 MB and many sites ship megabyte hero images that should be constrained. Practical fixes include using the picture element and srcset for responsive delivery, reading embedded EXIF + FileReader thumbnails client-side to show previews and avoid full uploads, running lossless pipelines like imageoptim to cut files (examples show tens of percent savings), and delegating cropping/tagging to cloud ML (Cloudinary, imagex, Project Oxford) for face/thumbnail/emotion detection and automated alt text.
AI-written summary · about
chapters (43)
- 0:00Intro
- 1:21The image problem
- 4:22We also became picture map
- 6:32Why does this happen
- 7:43Maintenance
- 8:57File formats
- 10:57Browsers
- 13:27Problems
- 14:53Responsive design
- 17:15The good news
- 17:40The biggest problem
- 18:57Supported browsers
- 19:51Responsive images
- 20:51WordPress Core
- 21:28Lossless Image Optimization
- 22:09Imageoptim
- 23:36Exif data
- 25:07flickr
- 25:18uploader
- 26:06how it uploads
- 27:03removephotodatacom
- 28:12fallback content
- 28:57blur up
- 30:24canvas
- 31:06code
- 31:48JS
- 32:22Color Thief
- 32:43Image Resizing
- 33:41Smart Crop JS
- 34:06Cloudinary
- 35:13ImageX
- 36:01Project Oxford
- 36:41Feature Analysis
- 38:58OCR Data
- 39:33Thumbnail API
- 40:46Face ID
- 41:34Visualizations
- 42:02Live demo
- 42:29Image sorting
- 43:16HowOldnet
- 43:57Facial recognition
- 44:50Mustache recognition
- 46:16Outro
related talks
45mThe image problem of the web and how to solve it…
38mFixing the Image Problems of the Web using Machine Learning
25mDelivering Fast and Beautiful Images and Video
48mShrink The Web: How To Get Happier By Removing Crap
01h 05mShrink The Web: How To Get Happier By Removing Crap
30mFast and Beautiful: Modern Image Delivery Techniques
36mFast and Beautiful: Modern Image Delivery Techniques
45mResponsible Responsive Images