An introduction to how one can modify the images being served to the users of a website based on their current network condition or bandwidth available. The technique can be extended to other items on the page like JS, CSS (and even the HTML). It helps speed up page load time by reducing the amount of data that has to be downloaded on the user's device on slow networks.

1. Network-based image
optimization with
Service Workers
using ImageKit.io

2. More than 55% of all usage on the
internet is from mobile
In India, 78% of all usage is from
mobile.
Source -
Times of India Report

3. Mobile Networks can be
Slow & Inconsistent
Data representing number of users
on different network speeds as
reported in Chrome using NetInfo
API
Collected in partnership with 91mobiles.com

4. Average page size
increased almost 3x in
the last 6 years
Source - SpeedCurve.com

6. CONTENT SHOULD ADAPT TO
THE CURRENT NETWORK SPEED
Build for everyone - Not just your fastest users

7. Our Target
Optimize
images based
on network
More than 50% of the
page weight

8. Requirements
in real-time
1. Detect network changes
2. Change image size

9. Real-time network information
Network Information API
var effectiveType = navigator.connection.effectiveType
- Browser determines this using a combination of recently
observed round-trip times and downlink values
//Returns “4g”, “3g”, “2g” or “slow-2g”

10. Deliver lighter images
on slower networks
4G > 3G > 2G > Slow
2GFastest
=
Max.
image size
Slowest
=
Min. image
size
Covers WiFi
speeds as
well

11. Image
Quality
Image
Size
%age
reductio
n
Network
Type
90 47KB - 4G
70 28KB 40% 3G
55 18KB 61% 2G
40 13KB 72% Slow 2G
How to get a lighter (smaller) image?
We can control image
quality

12. Real-time quality change -
ImageKit.io - real-time image optimization product

13. How do we detect network type for a
request and handle that in our code?

14. Using
Service Workers
Proxy between web browser, application
server and network / cache.

15. Modifying URLs based on
Network Condition
https://ik.imagekit.io/demo/img/sw_demo/image1.jpeg
Image URL from ImageKit.io
4G
image1.jpeg?tr=q-90
3G
image1.jpeg?tr=q-70
Slow 2G
image1.jpeg?tr=q-40
2G
image1.jpeg?tr=q-55

16. Code Sample
The standard image tag - no code
change
In website’s HTML - index.html

17. Code Sample
Installing a Service Worker
In website’s HTML - index.html

18. Code Sample
Intercepting and modifying requests

19. Demo
https://imagekit.io/demo/sw-opt-1
Throttle the network using Chrome DevTools

20. Taking it further
Problem with browser-caching
- Browser doesn’t know that the URL changed in
the service worker
- Will cache a low quality response as well

21. Taking it further
Implement Network-based caching
- Do not rely on browser cache; Skip it completely
- Different caches for different network types
- Waterfall-like cache lookup; prefer better cached
image

22. Code Sample
Network-based cache maintenance
The ‘returnURL’ should be such that it responds with
cache-control: max-age=0; to skip browser cache
Respond with a cache
lookup instead of return
URL

23. If found, return from
cache
Get from network, add to
cache

24. Demo
https://imagekit.io/demo/sw-opt-1
Start with a slow network using Chrome
DevTools, keep improving the network to see
improvement in quality

25. - If we are adding objects to cache, we are
responsible for clearing them as well
- Use max cache time and max object count for
each network type cache
- Cache clear based on above rules regularly
Last Step
Cache Management using Google
Workbox

26. Code Sample
Cache Expiry Managers

27. Code Sample
Updating cache put time and expiry
Expire cache entries
regularly
Update cache
time

28. - Content must adapt to network
speed
- Images is the easiest to optimize &
biggest contributor to page size
Other content can be changed as well using this idea
Summary

29. Summary
A real-time network detection & cache
response & maintenance process
- Network Information API
- Service Workers
- Cache Storage

30. A real-time image optimization & transformation
product
ImageKit.io (https://imagekit.io)
- 30% bandwidth reduction (image optimization) in minutes
- Real-time resizing, cropping, face detection, overlays etc.
- Integrated CDN and storage
- Can use with own server or storage as well
Summary

31. Links related to this talk
Demo
https://imagekit.io/demo/sw-opt-1
Code
https://github.com/imagekit-developer/network-
based-image-optimization

32. Contact Information
Email - rahul@imagekit.io
Twitter - @rnanwani

33. Questions
?