Advanced Image Optimization in React: Leveraging Intersection Observer
1. Existing Image Optimization with React Router
Reac...
For further actions, you may consider blocking this person and/or reporting abuse
That is why I love Nextjs Image component.. it optimizes everything and there is a bot on GitHub: github.com/marketplace/imgbot .. that raise a PR with optimized images used in the codebase. It's free for public repos!
Very Nice, Thanks for sharing.
Even if you set the image size (which is truly recommended), this does not compress your source image. Images directly stored from camera usually have 1-2 MB, which can break any web page. Done right, a small image might be reduced to have 20 kB only, but therefore this image needs to be physically resized. It is most important that this is done before the image is sent over the internet, using the exact resolution they will have on page.
But what to do, if you have a dynamic page which shows the image differently on different devices? CMS like Directus can resize your image on the fly, so you can retrieve any image in just the exact size the page needs. To reduce the server workload, reduced images are cached and can be delivered much faster the second time they are used in that exact resolution.
Hope I clarify your queries, For more detail you can check the MDN link shared in the above article.
Thank you for asking. I'm happy to help.
These are all great tips, but I'd still highly recommend using an image CDN for resizing and compressing images on the fly.
This we can add, to the above list.
Thanks Ashutosh!
Hey, why not use the built in img attribute
loading="lazy"to defer loading of the image until it is close to the users view port? What are the advantages of doing this in JS?Yes, this also we can use, but as per the article with intersection Observer, you can have more flexibility around when you want to load, rather than Browser decide the appropriate time to load.
But in General purpose we can useit. Nice Suggestion.
nice article
the demo in this blog was really helpful. nice write!
Generally, best practice is to serve up different sized images if they are displayed at different sizes even if they’re the same image. It’s annoying and tedious but worth it.
Hello @ashutoshsarangi, thank you so much for sharing, Image Optimization in Web Apps should help improve LCP scores.
Thank you, Always happy to help.
Yes, Not only LCP score, but it will off load the initial API calls, now with http1 we can hit around 6 parallel hits, after that we need to wait in queue.
More detail article on HTTP is coming soon.
Thanks again @ashutoshsarangi, that's nice to know
Great!