JSFoo 2018

JSFoo 2018

On JavaScript and Security

Rahul Nanwani

@rahulnanwani

Using Service Workers to improve dynamic image delivery in the browser

Submitted Sep 3, 2018

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('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}