Inkito Update - Image processing

in #hive2 years ago (edited)

Capture d'écrans_20211122-195528.png

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.

imageOpti.gif

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

Sort:  

!discovery 15

Congratulations @inkito! You have completed the following achievement on the Hive blockchain and have been rewarded with new badge(s):

You received more than 1000 upvotes.
Your next target is to reach 1250 upvotes.

You can view your badges on your board and compare yourself to others in the Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

Check out the last post from @hivebuzz:

Hive Power Up Month - Feedback from Day 21
Hive Power Up Month - Feedback from Day 18

I have little idea about web development, but I can imagine it's challenging, especially if you need to load a lot of images. It may be worth talking to some of the developers behind Hive dapps who you can find in the appropriate Discord channels.

!PIZZA

Hehe no worries, I'll figure it out. Image optimization is pretty common even outside crypto dapps. Thanks for your message. I'm happy you still have interest in the project.

PIZZA! PIZZA!

PIZZA Holders sent $PIZZA tips in this post's comments:
@dibblers.dabs(8/20) tipped @inkito (x1)
steevc tipped inkito (x1)

You can now send $PIZZA tips in Discord via tip.cc!


This post was shared and voted inside the discord by the curators team of discovery-it
Join our community! hive-193212
Discovery-it is also a Witness, vote for us here
Delegate to us for passive income. Check our 80% fee-back Program

Is inkito still in development?

It is unfortunately not in development at the moment. I reached out to creators outside of the Hive ecosystem but no one was interested in trying out the prototype.

I have been spending my development time in the NFT space which is booming at the moment. Working on an NFT platform and a P2E game. ;-)

That's a real shame! I think the prototype you've built is really interesting and could be a cool addition to the hive ecosystem- regardless of whether external users are very interested! I am currently working on a creative writing community and a project like inkito would be really interesting for the community to use/post to!

I'm glad to hear you would be interested.

I can maybe revisit the idea to appeal to a larger public on Hive. I'm thinking something like as a tool to organize a series of posts.

Webcomics are just too quiet right now.

That would be awesome- stop by the Scholar and Scribe community sometime- we have a group of authors posting serialized pieces there at the moment that would likely be interested in something like this! I also have tokens that are in final stages to prepare for staking and curation that will be linked to the community. It would be awesome to have a frontend like inkito focused on written pieces that would enable us to more easily view/read serialized content and curate it.

I've been running an ongoing collaborative story called Tale of Two Pizzas for half a year now and would love to make it easier for people to read the whole thing from the beginning!

!PIZZA