Fragments 2019

State of mobile engineering, state of platforms, hardware and user research.

Tickets

Image uploads for mobile web

Submitted by Abinash Mohapatra (Engineering - Platform Engineering) (@twistedfork88) on Friday, 1 February 2019

Technical level: Advanced

View proposal in schedule

Abstract

Uploading images to user reviews came up as yet another task. But once I delved into the challenges and areas of improvement, I found it to be quite challenging. EXIF, resampling, encoding to other formats all on the client !!! And doing all of this while keeping the main thread free, thats the challenge I’m solving. Bonus: some WebAssembly magic too !!

Outline

I wanted the process of uploading images on the web to be as good as native in terms of capability and smooth/performant as well. Based on our requirements, when we upload an image, the application was supposed to show a thumbnail which should take into account the EXIF orientation factor so that the thumbnail is shown in thr correct orientation. The next big challenge was to reduce the overall upload size during submitting the file to the server. Here we resorted to a Hermite resample filter that allowed us to further reduce the payload size. Since a user could upload maximum of 5 images in one go, we wanted to keep the main thread as free as possible so all of the above-mentioned tasks actually run in a worker. Using transferrables to reduce the time invokved in an othetwise structure clone postMessage was another area of investment. Moving all work into. a worker gave us the opportunity to work on the new amazing OffscreenCanvas API which enabled us to move all computations to the worker thread. Finally a final optimisation (WIP) is to encode our images to webp format to check if the payload size could be further reduced. Since browsers do not support encoding of images as a native construct, we resorted to Webassembly for achieving the desired result.

Requirements

JavaScript, Web Worker, PostMessage, Canvas, Browser APIs performance costs

Speaker bio

I work as a senior enginner in Flipkart Lite team. I love experiments and performance.

Links

Comments

  • Janet Jackson (@janetjackson) 8 months ago

    Apple’s iOS is additional general mobile OS, and it’s likely you’ll need to distinguish how to code image uploads if you want to shape multi-platform mobile apps that spread as many users as likely. Here are some approaches for iOS image upload. https://www.divinedesignupholstery.com/

  • Acacia Hary (@minion89) 2 months ago

    Your article is very meaningful, content is interesting and impressive, I hope in the near future you will have many good and meaningful articles to bring to readers.
    https://templerun.co

Login with Twitter or Google to leave a comment