The future of images in email - Litmus live London 2017

329 views

Published on

This talk was built in HTML presented in Applemail.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
329
On SlideShare
0
From Embeds
0
Number of Embeds
51
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

The future of images in email - Litmus live London 2017

  1. 1. THE FUTURE OF IMAGES IN EMAIL Mark Robbins REBEL @M_J_Robbins  |  @GoRebelmail
  2. 2. IMAGE FORMATS The past
  3. 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.
  4. 4. IMAGE FORMATS The Future
  5. 5. SVG Scalable Vector Graphic est. 1999
  6. 6. HOW TO ADD SVG Inline SVG <svg>  <path d=""> </svg> Object SVG <object type="image/svg+xml" data="/image.svg"></object> Linked SVG <img src="/image.svg">
  7. 7. svg - 12.3kb png - 15.8kb SVG V'S PNG
  8. 8. ✔iOS ✘ Gmail ✔iPad ✔Applemail ✘ Outlook ✔Samsung ✔Outlook.com ✔Android ✔Yahoo ✘ Windows live Supported:66% Fallback:0% Unsupported:29% SVG SUPPORT IN TOP 10 CLIENTS
  9. 9. WEBP Developed by Google est. 2010
  10. 10. webp - 107kb jpg - 152kb WEBP V'S JPG
  11. 11. ✘ iOS ✔Gmail ✘ iPad ✘ Applemail ✘ Outlook ✔Samsung ✔Outlook.com ✔Android ✔Yahoo ✘ Windows live Supported:40% Fallback:0% Unsupported:56% WEBP SUPPORT IN TOP 10 CLIENTS
  12. 12. HEIF Developed by Apple est. 2015
  13. 13. SUPPORT... coming in iOS 11
  14. 14. ANIMATION
  15. 15. WHAT SHOULD WE USE FOR ANIMATION? gif or jif?
  16. 16. WHAT SHOULD WE USE FOR ANIMATION? gif or jif? svg, webP, HEIF or png
  17. 17. ANIMATED PNG Animated Portable Network Graphics est. 2008
  18. 18. ✔iOS 〜Gmail ✔iPad ✔Applemail 〜Outlook ✔Samsung ✔Outlook.com ✔Android ✔Yahoo 〜Windows live Supported:66% Fallback:29% Unsupported:0% APNG SUPPORT IN TOP 10 CLIENTS
  19. 19. IMAGE LOAD OPTIMISATION
  20. 20. THE HATEFUL WEIGHT Henri Helvetica Litmus Live Boston 2017
  21. 21. QUICK OPTIMISATION TIPS Use image compression - ImageOptim, TinyPNG Use a CDN (Content Delivery Network) - Cloudinary, imgix Avoid unnecessary <img> tags
  22. 22. HOW TO REPLACE AN IMAGE Bad example <img src="/100kb.jpg" class="desktop"> <img src="/80kb.jpg" class="mobile" style="display:none">
  23. 23. HOW TO REPLACE AN IMAGE Load optimised example <img src="/100kb.jpg" class="desktop"> <div></div>
  24. 24. HOW TO REPLACE AN IMAGE Accessible example <img src="/100kb.jpg" class="desktop" alt="alt text"> <div role="img" aria-label="alt text" style="display:none"></div>
  25. 25. RESPONSIVE & RETINA IMAGES
  26. 26. BASIC RESPONSIVE RETINA IMAGE <img src="/200x1200/image.jpg" alt="alt text" height="100" width="600" style="height:auto;max-width:100%;" >
  27. 27. SRCSET <img src="/100x600.jpg" srcset="/200x1200.jpg 2x, /300x1800.jpg 3x" alt="alt text" height= "100" width="600" style="height:auto;max-width:100%;">
  28. 28. ✔iOS 〜Gmail ✔iPad ✔Applemail 〜Outlook ✔Samsung 〜Outlook.com ✔Android 〜Yahoo 〜Windows live Supported:58% Fallback:37% Unsupported:0% SRCSET SUPPORT IN TOP 10 CLIENTS
  29. 29. IMAGE-SET .image{ background-image: url('100x600.jpg'); background-image: -webkit-image-set(url('/100x600.jpg') 1x, url('/200x1200.jpg') 2x , url('/300x1800.jpg') 3x); }
  30. 30. ✔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
  31. 31. PICTURE <picture> <source media="(min-width: 650px)" srcset="img650.jpg"> <source media ="(min-width: 400px)" srcset="img400.jpg"> <img src="imgFallback.jpg" alt="alt text"> </picture>
  32. 32. ✔iOS 〜Gmail ✔iPad ✔Applemail 〜Outlook ✔Samsung 〜Outlook.com ✔Android 〜Yahoo 〜Windows live Supported:58% Fallback:37% Unsupported:0% <PICTURE> SUPPORT IN TOP 10 CLIENTS
  33. 33. IMAGE MANIPULATION
  34. 34. none multiply screen overlay darken lighten color-dodge saturation color luminosity background-blend-mode:none BACKGROUND-BLEND-MODE
  35. 35. ✔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
  36. 36. none blur brightness contrast drop-shadow grayscale hue-rotate invert opacity saturate sepia filter:none FILTER
  37. 37. ✔iOS 〜Gmail ✔iPad ✔Applemail 〜Outlook ✔Samsung 〜Outlook.com ✔Android 〜Yahoo 〜Windows live Supported:58% Fallback:37% Unsupported:0% FILTER SUPPORT IN TOP 10 CLIENTS
  38. 38. auto pixelated crisp-edges image-rendering:auto IMAGE-RENDERING
  39. 39. ✔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
  40. 40. BACK TO THE FUTURE (of new image formats in email)
  41. 41. SVG FALLBACK <img src="/logo.gif" srcset="/logo.svg 1x">
  42. 42. ✔iOS 〜Gmail ✔iPad ✔Applemail 〜Outlook ✔Samsung 〜Outlook.com ✔Android 〜Yahoo 〜Windows live Supported:58% Fallback:37% Unsupported:0% SVG FALLBACL IN TOP 10 CLIENTS
  43. 43. WEBP FALLBACK Use a CDN and set it to auto generate the format
  44. 44. 〜iOS ✔Gmail 〜iPad 〜Applemail 〜Outlook ✔Samsung ✔Outlook.com ✔Android ✔Yahoo 〜Windows live Supported:40% Fallback:56% Unsupported:0% WEBP FALLBACK IN TOP 10 CLIENTS
  45. 45. 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
  46. 46. AND FINALLY...
  47. 47. THANK YOU Mark Robbins REBEL @M_J_Robbins  |  @GoRebelmail

×