Adopt lazy loading for Pic component

[kimberlyohq]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• Others, please explain:

Resolves #1559

Overview of changes:
Use loading=lazy attribute to defer loading of images for Pic components

Image is only loaded lazily as seen in the video
https://user-images.githubusercontent.com/60393696/124390276-5bde0880-dd1d-11eb-9cc9-f972f4995ad0.mp4

Anything you'd like to highlight / discuss:
In the issue description, it was mentioned that the height/width resolution might have to be moved accordingly. I tried a few examples and it seems to work as normal on my side. Is this concern regarding the computeWidth function? From what I googled online, the images are loaded once it reaches calculated distance from the viewport. (Source: https://web.dev/browser-level-image-lazy-loading/)
Testing instructions:

Proposed commit message: (wrap lines at 72 characters)

Adopt lazy loading for Pic component

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No blatantly unrelated changes
• Pinged someone for a review!

[ang-zeyu]

Is this concern regarding the computeWidth function? From what I googled online, the images are loaded once it reaches calculated distance from the viewport. (Source: https://web.dev/browser-level-image-lazy-loading/)

Thanks for investigating this. My concern was indeed around whether naturalWidth / Height would be populated correctly or at all if using the lazy attribute. Good to hear its unfounded 😀

Other than that, wondering if we should document that lazy loading is used by default and provide a simple prop to disable this behaviour. Sometimes it might be preferable to load all the images in the document in one go for better ux.

[kimberlyohq]

Other than that, wondering if we should document that lazy loading is used by default and provide a simple prop to disable this behaviour. Sometimes it might be preferable to load all the images in the document in one go for better ux.

Sounds good to me! WDYT about adding a eager prop if user wants to load images eagerly?

[ang-zeyu]

sounds good!

[ang-zeyu]

Lgtm otherwise! 👍