ReactATL Talk: Progressive Imaging & Handling in WebPack

Lazy loading is a procedure that suspends the loading of non-critical resources at page load time, lazy loading of images, which can bring great savings in terms of speed, but it is also easy to execute incorrectly. fetching images and rendering to the client can be done in many ways but people often make lots of mistakes in this section.

Again, I will explain and describe some techniques to "occupy" space for an image before it is loaded, going from just displaying a blank area to displaying a progressive loading from a blurry image, exactly how Spotify, Google, and Facebook achieve this.

Lastly, we would go into analyzing the size of the image which would be rendered to the client using Webpack.

The major key takeaways from this session are, best-practices for fetching and rendering images, using intersession observer, auditing images, best practices in lazy-loading in relation to Spotify, Facebook & Google, and Analyzing images size using Webpack.