DEV Community

Cover image for How to Smoothly Render Images in React App?

How to Smoothly Render Images in React App?

Sai Krishna on March 09, 2020

Improve your web apps UX by enhancing image render with React's onLoad event and simple SCSS. This article is cross-posted on Codebrahma and Medi...
Collapse
 
krrish96 profile image
Info Comment hidden by post author - thread only accessible via permalink
Sai Krishna • Edited

Tomasz Sterna

Interesting points to think about. Thanks!

Loading time can be reduced by caching/preloading the image - I will do another post on how to do this (Thanks for the idea).

When I started with this component my main focus was to keep it simple and beginner friendly.
So, I didn't pay much attention on "preview". With progressive encoding/loading UX would be lot better, best example here would be Medium.
I will add in later versions of the component.

Previously after loading some part of the image user could decide whether it is worth the wait. Now it just a meaningless placeholder.

Yes, this is one downside to having placeholder. But, without placeholder or progressive encoding, its a bad UX unless the network is fast enough to load images quickly.

Thanks!

Collapse
 
vaibhavkhulbe profile image
Vaibhav Khulbe

Great post. Will definitely use in one of my projects.

Collapse
 
krrish96 profile image
Sai Krishna

I am glad, it's helpful. Thank you.

Collapse
 
suvammishra9 profile image
suvammishra9

Interesting stuff. Great thinking.

Collapse
 
krrish96 profile image
Sai Krishna

Thank you.

Collapse
 
monfernape profile image
Usman Khalil

So cool.

Collapse
 
krrish96 profile image
Sai Krishna

Thank you.

Collapse
 
frempongandrews profile image
Andrews Frempong

great stuff

Collapse
 
krrish96 profile image
Sai Krishna

Thank you.

Collapse
 
fcfidel profile image
Fidel Castro

This awesome, thank you

Collapse
 
krrish96 profile image
Sai Krishna

Thank you.

Collapse
 
ahmedam55 profile image
Ahmed Mahmoud

That's such a great idea. Also using progressive images would be an elegant solution.

Collapse
 
krrish96 profile image
Sai Krishna

Yes, Thank you!

Some comments have been hidden by the post's author - find out more