The future of images in email - Litmus live London 2017
1 like2,015 views
The document discusses future image formats for use in email. It examines formats such as SVG, WEBP, and HEIF, providing information on their file sizes, browser support, and how to implement fallback options. The document also covers techniques for responsive images, image manipulation with CSS, and tips for image optimization and load performance. Overall, the document provides an overview of emerging and established image formats and how to use them effectively in email for smaller file sizes and wider browser support.
The future of images in email - Litmus live London 2017
- 1. THE FUTURE OF IMAGES IN EMAIL Mark Robbins REBEL @M_J_Robbins | @GoRebelmail
- 3. GIF est. 1987 Use for: at colours, animations, etc. JPG est. 1992 Use for: gradient colours, photos, etc. PNG est. 1995 Use for: transparent images, etc.
- 6. SVG Scalable Vector Graphic est. 1999
- 7. HOW TO ADD SVG Inline SVG <svg> <path d=""> </svg> Object SVG <object type="image/svg+xml" data=/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/"/image.svg"></object> Linked SVG <img src=/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/"/image.svg">
- 8. svg - 12.3kb png - 15.8kb SVG V'S PNG
- 9. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:66% Fallback:0% Unsupported:29% SVG SUPPORT IN TOP 10 CLIENTS
- 10. WEBP Developed by Google est. 2010
- 11. webp - 107kb jpg - 152kb WEBP V'S JPG
- 12. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:40% Fallback:0% Unsupported:56% WEBP SUPPORT IN TOP 10 CLIENTS
- 13. HEIF Developed by Apple est. 2015
- 14. SUPPORT... coming in iOS 11
- 15. ANIMATION
- 16. WHAT SHOULD WE USE FOR ANIMATION? gif or jif?
- 17. WHAT SHOULD WE USE FOR ANIMATION? gif or jif? svg, webP, HEIF or png
- 18. ANIMATED PNG Animated Portable Network Graphics est. 2008
- 19. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:66% Fallback:29% Unsupported:0% APNG SUPPORT IN TOP 10 CLIENTS
- 21. THE HATEFUL WEIGHT Henri Helvetica Litmus Live Boston 2017
- 22. QUICK OPTIMISATION TIPS Use image compression - ImageOptim, TinyPNG Use a CDN (Content Delivery Network) - Cloudinary, imgix Avoid unnecessary <img> tags
- 23. HOW TO REPLACE AN IMAGE Bad example <img src=/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/"/100kb.jpg" class="desktop"> <img src="/80kb.jpg" class="mobile" style="display:none">
- 24. HOW TO REPLACE AN IMAGE Load optimised example <img src=/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/"/100kb.jpg" class="desktop"> <div></div>
- 25. HOW TO REPLACE AN IMAGE Accessible example <img src=/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/"/100kb.jpg" class="desktop" alt="alt text"> <div role="img" aria-label="alt text" style="display:none"></div>
- 26. RESPONSIVE & RETINA IMAGES
- 27. BASIC RESPONSIVE RETINA IMAGE <img src=/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/"/200x1200/image.jpg" alt="alt text" height="100" width="600" style="height:auto;max-width:100%;" >
- 28. SRCSET <img src=/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/"//slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/100x600.jpg" srcset="/200x1200.jpg 2x, /300x1800.jpg 3x" alt="alt text" height= "100" width="600" style="height:auto;max-width:100%;">
- 29. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:58% Fallback:37% Unsupported:0% SRCSET SUPPORT IN TOP 10 CLIENTS
- 30. IMAGE-SET .image{ background-image: url(/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/&); background-image: -webkit-image-set(url('//slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/100x600.jpg') 1x, url(/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/&) 2x , url(/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/&) 3x); }
- 31. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:80% Fallback:3% Unsupported:12% IMAGE-SET SUPPORT IN TOP 10 CLIENTS
- 32. PICTURE <picture> <source media="(min-width: 650px)" srcset="img650.jpg"> <source media ="(min-width: 400px)" srcset="img400.jpg"> <img src=/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/"imgFallback.jpg" alt="alt text"> </picture>
- 33. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:58% Fallback:37% Unsupported:0% <PICTURE> SUPPORT IN TOP 10 CLIENTS
- 35. none multiply screen overlay darken lighten color-dodge saturation color luminosity background-blend-mode:none BACKGROUND-BLEND-MODE
- 36. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:80% Fallback:3% Unsupported:12% BACKGROUND-BLEND-MODE SUPPORT IN TOP 10 CLIENTS
- 37. none blur brightness contrast drop-shadow grayscale hue-rotate invert opacity saturate sepia filter:none FILTER
- 38. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:58% Fallback:37% Unsupported:0% FILTER SUPPORT IN TOP 10 CLIENTS
- 40. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:58% Fallback:37% Unsupported:0% IMAGE-RENDERING SUPPORT IN TOP 10 CLIENTS
- 41. BACK TO THE FUTURE (of new image formats in email)
- 42. SVG FALLBACK <img src=/slideshow/the-future-of-images-in-email-litmus-live-london-2017/79318082/"/logo.gif" srcset="/logo.svg 1x">
- 43. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:58% Fallback:37% Unsupported:0% SVG FALLBACL IN TOP 10 CLIENTS
- 44. WEBP FALLBACK Use a CDN and set it to auto generate the format
- 45. iOS Gmail iPad Applemail Outlook Samsung Outlook.com Android Yahoo Windows live Supported:40% Fallback:56% Unsupported:0% WEBP FALLBACK IN TOP 10 CLIENTS
- 46. WE DIDN'T HAVE TIME FOR... Multiple background images on single element Animating background images CSS images Inline SVG & Animating SVG < gure> & < gcaption> Dynamic alt text for dynamic images Image sprites Image fonts HTTP2 OS and Browser support
- 47. AND FINALLY...
- 48. THANK YOU Mark Robbins REBEL @M_J_Robbins | @GoRebelmail