Cloudinary Webinar Responsive Images
0 likes•505 views
The document discusses the evolution, current state, and future potential of responsive images in web design, highlighting the significance of optimizing images for various devices. It covers technical aspects such as media queries, srcset, and image density, and provides resources for implementing responsive images effectively. Additionally, it references various tools and upcoming events related to image management, particularly focusing on the Cloudinary platform.
Cloudinary Webinar Responsive Images
- 5. SHIP HAPPENS
- 6. ★URBANA!
- 9. <img>
- 11. SURVEY! Who’s used these new features?
- 12. WHY? QUESTION #3
- 14. BITMAP IMAGES ARE THE BIGGEST PERFORMANCE BOTTLENECK ON THE RESPONSIVE WEB
- 18. iPhone7Plus2280 x 1242 (logical) 30”CinemaDisplay2560 x 1600
- 19. iPhone6Plus2280 x 1242 (logical) 30”CinemaDisplay2560 x 1600 RetinaiMac5120 x 2880
- 20. 1024 x768 32% 1280x800 23% 1280x1024 11% 1440x 900 10% 2009 OTHER 4% OTHER 24% 1366 x768 13% 1920x1080 9% 360x640 8% 768x 1024 7% 2015 http://statcounter.com
- 21. 1024 x768 32% 1280x800 23% 1280x1024 11% 1440x 900 10% http://statcounter.com 2009 OTHER 4% OTHER 32% 360x640 16% 1366 x678 14% 1920x1080 7% 375x 667 4% 2016
- 25. VIEWPORTWIDTH WASTEDIMAGEBYTES 360px 72% 760px 53% 1260px 42% http://timkadlec.com/2013/06/why-we-need-responsive-images/
- 27. TIM KADLEC: Mobile Image Processing VIDEO:https://www.youtube.com/watch?v=jP68rCjSSjM SLIDES:https://speakerdeck.com/tkadlec/mobile-image-processing-at-velocity-sc-2015
- 28. ADAPTABILITY PRESENTS NEW OPPORTUNITIES FOR VISUAL DESIGN
- 29. The day after the release of the original iPhone ~10 years later nytimes.com on a small screen
- 30. Cropping Some sort of… mammal? Look at that adorable Portuguese Water dog!
- 33. HOW? QUESTION #4
- 36. NO!
- 37. IF theuser’sdevicehasadevice-pixel-ratio>=2 THEN loadthisresource. NO EXCEPTIONS! MEDIAQUERIES:
- 41. resource width in pixels — <img>’s width on the layout inCSSpx = image density e.g.,2x . .
- 43. medium.jpgis640 pixelswide — its<img>hasawidthof640 pxonthelayout = medium.jpghasanimagedensityof 1x . .
- 44. large.jpgis1280pixelswide — its<img>hasawidthof640 pxonthelayout = large.jpghasanimagedensityof 2x . .
- 45. resource width in pixels — <img>’s width on the layout inCSSpx = image density e.g.,2x . .
- 49. TAYLORHUNT: When Responsive Images Get Ugly http://codepen.io/Tigt/blog/when-responsive-images-get-ugly
- 52. NOW!
- 53. X W+SIZES PICTURE CHROME 34+ 38+ 38+ OPERA 21+ 25+ 25+ FIREFOX 38+ 38+ 38+ IE Nope. EDGE 12+ 12+ 13+ SAFARI 7.1+ 9+ 9.1+
- 54. X W+SIZES PICTURE ANDROIDSTOCK 53+ 53+ 53+ CHROMEFORANDROID 44+ 44+ 44+ OPERAMINI Impossible? IEMOBILE Nada. EDGEMOBILE 12+ 13+ 13+ iOSSAFARI 8+ 9.2+ 9.3+
- 56. https://scottjehl.github.io/picturefill/ POLYFILL WHEN YOU NEED TO Picturefill!
- 57. srcset + sizes http://cloudinary.com/blog/responsive_images_with_srcset_sizes_and_cloudinary Art Direction http://cloudinary.com/blog/automatically_art_directed_responsive_images Breakpoints Generation http://www.responsivebreakpoints.com Client Hints http://cloudinary.com/blog/automatic_responsive_images_with_client_hints RESPONSIVE IMAGES WITH CLOUDINARY
- 58. Image Management — Buy vs. Build? Webinar Dec7th,2016 http://info.cloudinary.com/webinars.html ImageCon FirstEver ImageandVideoManagementConference March1st,2017inSanFrancisco https://events.bizzabo.com/imagecon2017 UPCOMING EVENTS
- 59. Q & A