JSFoo 2018

On JavaScript and Security

Using Service Workers to improve dynamic image delivery in the browser

Submitted by Rahul Nanwani (@rahulnanwani) on Sep 3, 2018

Technical level: Intermediate Status: Confirmed & scheduled

Abstract

As mobile data and mobile devices become more and more accessible in India, we need to build experiences not just for the high-end users but also vary our content dynamically to cater to users with slower devices or poor network connectivity. Images being the single largest contributor to page size provide a great, yet simple, opportunity to optimize for a faster experience to all the users.

Key Takeaways - Using service workers to dynamically adapt image content on a web page on the basis of network speed - Important points to consider while using this technique - An inexpensive way to achieve capabilities that are usually restricted to expensive infrastructure providers

Intended Audience - Front-end developers keen on using modern technology to deliver a faster user experience for their website’s users

Outline

  • What is meant by dynamic image delivery
  • Why is it important now and what are the different types on which it can vary.
  • What is network-based dynamic image delivery
  • Why use Service Workers for it?
  • How to use a Service Worker to detect network type / speed
  • How to intercept image requests and modify them on the basis of the detected network speed
  • How to use real-time image transformations using URLs to achieve this
  • Caching of modified responses

Speaker bio

I am the Co-founder at ImageKit.io. I have worked in the past with PayPal and ixigo.com as a backend and a frontend/full-stack developer respectively. Currently, I mostly deal with technology-related stuff at ImageKit.io. Passionate about delivering high-performance user experience on websites.

Slides

https://docs.google.com/presentation/d/1yvIGsgX7Ga9YMqFc8FlfehxDJZGC-roaMb7KSahSodY/edit?usp=sharing

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('You need to be a participant to comment.') }}

{{ formTitle }}
{{ gettext('Post a comment...') }}
{{ gettext('New comment') }}

{{ errorMsg }}