1. THE FUTURE OF IMAGES IN EMAIL
Mark Robbins
REBEL
@M_J_Robbins | @GoRebelmail

2. IMAGE FORMATS
The past

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.

5. IMAGE FORMATS
The Future

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="/image.svg"></object>
Linked SVG
<img src="/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

20. IMAGE LOAD OPTIMISATION

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="/100kb.jpg" class="desktop">
<img src="/80kb.jpg" class="mobile" style="display:none">

24. HOW TO REPLACE AN IMAGE
Load optimised example
<img src="/100kb.jpg" class="desktop">
<div></div>

25. 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>

26. RESPONSIVE & RETINA IMAGES

27. BASIC RESPONSIVE RETINA IMAGE
<img src="/200x1200/image.jpg" alt="alt text" height="100" width="600"
style="height:auto;max-width:100%;" >

28. 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%;">

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('100x600.jpg');
background-image: -webkit-image-set(url('/100x600.jpg') 1x,
url('/200x1200.jpg') 2x , url('/300x1800.jpg') 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="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

34. IMAGE MANIPULATION

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

39. auto pixelated
crisp-edges
image-rendering:auto
IMAGE-RENDERING

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="/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