The image problem of the web and how to solve it…
2 likes1,605 views
The document discusses the problem of websites using large, unoptimized images that slow down loading times. It provides solutions like responsive images, automated image optimization tools, extracting metadata from images, intelligent resizing with cloud services, and machine learning for tasks like facial recognition and tagging to improve the image experience on the web. The key is for browsers, tools, and developers to work together to make images lightweight and adaptive while still high quality.
The image problem of the web and how to solve it…
- 1. THE IMAGE PROBLEM OF THE WEB AND HOW TO SOLVE IT… CHRIS HEILMANN (@CODEPO8), JFOKUS, STOCKHOLM, FEBRUARY 2016 https://www.flickr.com/photos/69135870@N00/4465772463
- 2. ( ⨉ 1) > ($WORD ⨉ 1000) 🖼
- 5. THE PROBLEM IS, THAT WE’VE BECOME PICTURE MAD ON THE WEB… 📸
- 6. Type Size (kB) Images 1426 Scripts 357 Video 174 Fonts 123 Stylesheets 76 HTML 67 Other 4 Total 2232 kB THE AVERAGE WEB SITE… http://www.httparchive.org/interesting.php#bytesperpage
- 9. MOBILE, TABLETS GREAT HARDWARE AND FAST CONNECTIONS… 🚤
- 10. MAINTENANCE… ⛏
- 11. 1426 KB OF IMAGES… • Wrong file formats • Delivering scaled hi-res images to everybody • No automatic conversion and optimisation steps • Hero image instead of text content
- 12. WE NEED TO WORK ON THIS RIGHT NOW…
- 13. THE WEB WORLD IS MUCH BIGGER THAN OUR ENVIRONMENT AND GROWTH HAPPENS OUTSIDE IT…
- 14. SURGICAL SOLUTIONS: PROXY BROWSERS AND CLOUD SERVICES https://www.flickr.com/photos/89306448@N00/334479803 {Guerrilla Futures | Jason Tester}
- 15. HERE ARE SOME THINGS YOU CAN DO…
- 16. THE PROBLEMS: • Huge images for everybody • Unoptimised images • No alternative content • No training or incentive to add content in CMS
- 17. OUR ARSENAL: • Better browsers with responsive image support • Automated, loss-less image optimisation tools • File level access to images to extract metadata • Scripting solutions to offer alternative content • Cloud services with machine learning APIs for intelligent resizing • Machine learning for tagging
- 18. BETTER BROWSERS WITH RESPONSIVE IMAGE SUPPORT
- 19. MEDIA QUERIES LOAD EVERYTHING 😦 https://www.christianheilmann.com/2012/12/19/ conditional-loading-of-resources-with- mediaqueries/
- 20. BROWSERS CHANGED A LOT. EVERGREEN, CAPABLE AND OPEN!
- 21. THIS IS A GREAT TIME TO CHANGE OUR WAYS!
- 27. AUTOMATED TOOLS FOR LOSSLESS IMAGE OPTIMISATION
- 28. IMAGEOPTIM… https://imageoptim.com/ PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, MozJPEG ( jpegtran & jpegrescan), Gifsicle.
- 29. FILE LEVEL ACCESS ON IMAGES TO EXTRACT METADATA
- 30. EXIF - THE HIDDEN GEMS http://code.flickr.net/2012/06/01/parsing- exif-client-side-using-javascript-2/
- 31. EXIF - THE HIDDEN GEMS http://code.flickr.net/2012/06/01/parsing- exif-client-side-using-javascript-2/
- 32. EXIF - THE HIDDEN GEMS http://code.flickr.net/2012/06/01/parsing- exif-client-side-using-javascript-2/
- 33. REMOVING EXIF DATA… http://removephotodata.com/
- 34. WHERE? http://removephotodata.com/image-to-map.html
- 35. SCRIPTING SOLUTIONS FOR FALLBACK CONTENT http://www.datapointed.net/2010/01/crayola-crayon-color-chart/
- 36. BLUR-UP TECHNIQUE AND LAZY LOADING… https://css-tricks.com/the-blur-up- technique-for-loading-background-images/
- 41. SCRIPTING SOLUTIONS FOR ALTERNATIVE CONTENT INTELLIGENT IMAGE RESIZING BY HAND OR WITH CLOUD SERVICES
- 47. AUTOMATED TAGGING USING MACHINE LEARNING CLOUD SERVICES
- 49. FACIAL DETECTION AND RECOGNITION…
- 51. BONUS ROUND DEMOS USING THESE SERVICES…
- 54. TWINS OR NOT? https://www.twinsornot.net
- 55. IT IS UP TO YOU TO KEEP THE WEB EXCITING AND USABLE FOR THE NEXT GENERATION OF USERS.
- 56. AND IT IS NOT ABOUT WHO IS THE PRETTIEST…
- 57. IT IS ABOUT WHO PERFORMS BEST, IS MOST ACCESSIBLE AND IS USABLE BY ALL KIND OF PEOPLE - NOT THE ONES WHO ARE ALREADY BORED OF IT…
- 58. THANK YOU! CHRIS HEILMANN @CODEPO8