Implement Progressive Image Loading

[revanth0212]

Is your feature request related to a problem? Please describe. Images in the gallery page only have 2 states, load full image or don't load at all.

Describe the solution you'd like Load images progressively.

1. UI Requests image.
2. Service Worker intercepts the image request. If the image is present in the cache or a better image is present in the cache, return it.
3. If there is a low res version of it is available in the cache, return it and fetch a high res version in the background. Once it is returned by the server, send a message to the UI component to update to get the new version.
4. If no version of this image is present in the cache, fetch and return ultra low res version and also fetch high res version. Once the high res is available, send a message to the UI component to update.

Describe alternatives you've considered Doing the same on UI but this puts a load on the main thread.

Additional context This is similar to what Medium does. The important word is similar, not the same.

Please let us know what packages this feature is in regards to:

• [ ] venia-concept
• [x] venia-ui
• [ ] pwa-buildpack
• [x] peregrine
• [ ] pwa-devdocs
• [ ] upward-js
• [ ] upward-spec
• [ ] create-pwa

[awilcoxa]

Should also account for offline image, see previous issue: https://github.com/magento/pwa-studio/issues/493

[awilcoxa]

@revanth0212 to clarify scope of issue, is this specific to only progressive image loading?

[awilcoxa]

Marked as P3S3

[sirugh]

@magento export issue to JIRA project PWA as Story

[github-jira-sync-bot]

:white_check_mark: Jira issue (https://jira.corp.magento.com/browse/PWA-1472) is successfully created for this issue.