The above react component will render different elements based on the user's connection quality:

offline:
placeholder with alt text
2g:
low resolution image
3g:
high resolution image
4g:
video player
chrome devtools network tab
Try setting different connection speeds in devtools > network tab

It uses the Network Information API, which currently is only supported in Chrome. Read more about this on my blog.