Inkito Update - Image processing

Hello everyone,

Quick Inkito update on my weekly progress. I was able to withstand my daily routine of waking up an hour early to work on this project.

Wait... You don't know what Inkito is? It's a little website I'm currently making to read comics fom Hive. The first design is here and the current redesign is here.

Now, back to business. Last week's goal was to improve image loading time. This would have had two benefits:

• Improving the site's perceived speed.
• Reduce data consumption on mobile.

My plan was to create a new image element, passing an url as prop and requesting the new processed image from the backend. The backend would process and send back a stream of the result, starting with a low quality image and progressively sending a better one.

I set up this test page to compare the usual loading to the new way. On the left the image being processed at low and then high quality. I added a delay of 1 second between the two versions for demonstration purposes.

Unfortunately the results were not as expected. The processed image actually took longer to load because of the request to the backend and the initial process took too much time.

I tried two different processing dependencies (Jimp and sharp) but I never reached the speed of an unprocessed image.

I then studied sites that actually achieve this such as my competitor tapas.io which loads a blurred black and white image before the final one arrives. I believe they are storing all images in different versions and can fetch one after the other instead of processing on the go like I did.

The good news is that the second goal is still achieved as the data consumed on the client side still reduces with a resized or low quality image. That could be helpful for thumbnails or avatars.

I'll run some more tests to see if that's worth the deploy. In the mean time, I'll think of other ways I could improve image loading time without storing any copies of the files.

On this bitter results, I wrapped up last week with bug fixing, and especially @steevc's feedback on image loading in the reader. Basically loading was not working when reaching the third episode. I haven't pushed the changes to the prototype but was able to fix the problem by forcing the component update when reading the previous page.

I'll continue improving the lazy loading this week (loading what you see only). I'll probably redesign and bring back the homepage as loading was the most intense in that page.

Of course, I'll continue thinking about better image processing and let you know if I come up with anything.

Thanks for passing by.

See you on the other side,

Jrej