Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The image problem of the web and how to solve it…

1,119 views

Published on

meh

Published in: Automotive
  • Be the first to comment

The image problem of the web and how to solve it…

  1. 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. 2. ( ⨉ 1) > ($WORD ⨉ 1000) 🖼
  3. 3. THE PROBLEM IS, THAT WE’VE BECOME PICTURE MAD ON THE WEB… 📸
  4. 4. 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
  5. 5. INSPIRATIONAL OBESITY…
  6. 6. WHY DID THIS HAPPEN? ⁉
  7. 7. MOBILE, TABLETS GREAT HARDWARE AND FAST CONNECTIONS… 🚤
  8. 8. MAINTENANCE… ⛏
  9. 9. 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
  10. 10. WE NEED TO WORK ON THIS RIGHT NOW…
  11. 11. THE WEB WORLD IS MUCH BIGGER THAN OUR ENVIRONMENT AND GROWTH HAPPENS OUTSIDE IT…
  12. 12. SURGICAL SOLUTIONS: PROXY BROWSERS AND CLOUD SERVICES https://www.flickr.com/photos/89306448@N00/334479803 {Guerrilla Futures | Jason Tester}
  13. 13. HERE ARE SOME THINGS YOU CAN DO…
  14. 14. THE PROBLEMS: • Huge images for everybody • Unoptimised images • No alternative content • No training or incentive to add content in CMS
  15. 15. 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
  16. 16. BETTER BROWSERS WITH RESPONSIVE IMAGE SUPPORT
  17. 17. MEDIA QUERIES LOAD EVERYTHING 😦 https://www.christianheilmann.com/2012/12/19/ conditional-loading-of-resources-with- mediaqueries/
  18. 18. BROWSERS CHANGED A LOT. EVERGREEN, CAPABLE AND OPEN!
  19. 19. THIS IS A GREAT TIME TO CHANGE OUR WAYS!
  20. 20. PICTURE ELEMENT AND SRCSET… 🖼
  21. 21. HOORAY FOR SUPPORT!
  22. 22. IN DEPTH INFO… https://jakearchibald.com/2015/anatomy-of- responsive-images/
  23. 23. LIVE DEMO… https://dev.windows.com/en-us/microsoft-edge/ testdrive/demos/picture/
  24. 24. HOORAY WORDPRESS! https://www.smashingmagazine.com/2015/12/ responsive-images-in-wordpress-core/
  25. 25. AUTOMATED TOOLS FOR LOSSLESS IMAGE OPTIMISATION
  26. 26. IMAGEOPTIM… https://imageoptim.com/ PNGOUT, Zopfli, Pngcrush, AdvPNG, extended OptiPNG, JpegOptim, MozJPEG ( jpegtran & jpegrescan), Gifsicle.
  27. 27. FILE LEVEL ACCESS ON IMAGES TO EXTRACT METADATA
  28. 28. EXIF - THE HIDDEN GEMS http://code.flickr.net/2012/06/01/parsing- exif-client-side-using-javascript-2/
  29. 29. EXIF - THE HIDDEN GEMS http://code.flickr.net/2012/06/01/parsing- exif-client-side-using-javascript-2/
  30. 30. EXIF - THE HIDDEN GEMS http://code.flickr.net/2012/06/01/parsing- exif-client-side-using-javascript-2/
  31. 31. REMOVING EXIF DATA… http://removephotodata.com/
  32. 32. WHERE? http://removephotodata.com/image-to-map.html
  33. 33. SCRIPTING SOLUTIONS FOR FALLBACK CONTENT http://www.datapointed.net/2010/01/crayola-crayon-color-chart/
  34. 34. BLUR-UP TECHNIQUE AND LAZY LOADING… https://css-tricks.com/the-blur-up- technique-for-loading-background-images/
  35. 35. COUNTING PIXELS… https://codepo8.github.io/canvas-images-and-pixels/ http://colorify.rocks/index.html
  36. 36. COUNTING PIXELS… https://codepo8.github.io/canvas-images-and-pixels/
  37. 37. COLORIFY.JS http://colorify.rocks
  38. 38. COLOR THIEF https://github.com/jwagner/smartcrop.js/ http://lokeshdhakar.com/projects/color-thief/
  39. 39. SCRIPTING SOLUTIONS FOR ALTERNATIVE CONTENT INTELLIGENT IMAGE RESIZING BY HAND OR WITH CLOUD SERVICES
  40. 40. SMARTCROP.JS https://github.com/jwagner/smartcrop.js/
  41. 41. INTELLIGENT RESIZING http://cloudinary.com/blog/ automatically_art_directed_responsive_images
  42. 42. INTELLIGENT RESIZING http://cloudinary.com/blog/ automatically_art_directed_responsive_images
  43. 43. HIGH CONTRAST TRICKS https://blog.imgix.com/2015/10/21/automatic- point-of-interest-cropping-with-imgix.html
  44. 44. PROJECT OXFORD https://www.projectoxford.ai
  45. 45. AUTOMATED TAGGING USING MACHINE LEARNING CLOUD SERVICES
  46. 46. FEATURE ANALYSIS https://www.projectoxford.ai
  47. 47. FACIAL DETECTION AND RECOGNITION…
  48. 48. EMOTION RECOGNITION…
  49. 49. BONUS ROUND DEMOS USING THESE SERVICES…
  50. 50. http://how-old.net/
  51. 51. http://mymoustache.net/
  52. 52. TWINS OR NOT? https://www.twinsornot.net
  53. 53. IT IS UP TO YOU TO KEEP THE WEB EXCITING AND USABLE FOR THE NEXT GENERATION OF USERS.
  54. 54. AND IT IS NOT ABOUT WHO IS THE PRETTIEST…
  55. 55. 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…
  56. 56. THANK YOU! CHRIS HEILMANN @CODEPO8

×