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