New OptimizeImage component

[mike-bunce]

Problem Statement

• As a developer , I would like to have an OptimizeImage component , so that I can have a TDS image component that handles optimizing images - both making sure that the image sizes that are rendered are appropriate to the screen size, and that the optimized image format (currently webp) is used.

Recommendation

• it should take the basic structure of the current ResponsiveImage component in the redux-contentful package, and handle the appropriate image sizes.
• It should have a list of default image sizes for each screen size.
• It should also have image size props that can be passed in for each breakpoint if a developer or content editors wants to specify specific sizes.
• It should also serve the appropriate image quality and format from the image source.
• It will assume the images are served from Contentful.
• It should also focus on loading images as fast as possible with the smallest image size, and handle lazy loading.
• It could have a drop down to select the image context to know what size to render per screen (that's a nice to have),

Design intent

There is no design considerations for this other than ensuring that image quality is not impacted.

Designs

There is no visual design required, as images should continue to appear in the way they currently do to the end user.

Acceptance criteria

This section is intentionally left blank. See story writing process.

User stories

(This section is intentionally left blank. User stories and acceptance criteria go here.)

Example:

Scenario: Displaying the component

Given text is provided
Then the text is displayed as a child
And the text size matches core-text medium

Out of scope

(This section is intentionally left blank. Features or items that were deliberately left out of scope during design intent or may be mistaken as within scope are noted here. Link to related issues if possible.)

Meta

• Willing to design solution: Yes
• Willing to develop solution: Yes
• Has workaround: No
• Do any similar components already exist in TDS (core or community): No (Image component doesn't handle anything fancy)
• Does this pattern exist already but isn’t a community component? https://github.com/telus/redux-contentful/tree/master/src/components/ResponsiveImage - this is the closest thing, but it needs an overhaul
• Which teams/applications do you think would use this improvement? All teams
• High impact: Yes