DP-7363: Image srcset

[tnathanjames]

Any PRs being created needs a changelog.txt file before being merged into dev. See: Change Log Instructions

Description

As a part of the effort to improve images / incorporate responsive images, this updates the image pattern to allow for srcset and sizes and updates the Press Release with Image page to utilize the new image pattern.

Related Issue / Ticket

• DP-7363

Steps to Test

1. Checkout the branch and build mayflower locally.
2. Go to the Image pattern: Atoms->Media->Image
3. Confirm that this pattern has not changed.
4. In Chrome, go to the Image Responsive pattern: Atoms->Media->Image Responsive
5. Confirm that the 800x400 image shows for the "Full" breakpoint.
6. Open dev tools and go to the Network tab.
7. Check the box that says "Disable cache".
8. Type png in the box to filter for only network requests for png images.
9. If you are on a 1x display (You can check by typing window.devicePixelRatio in the console of the browser), when you go to a medium screen width and refresh the page, you should see the 700x350.png load in the network tab. On a 2x display, you will still see the 800x400 image.
10. If you are on 1x display, when you go to a small screen width and refresh the page, you should see the 400x200.png load in the network tab. On a 2x display, you will either see the 800x400 or possibly the 700x350 image load.
11. Go to the Press Release with Image page.
12. Repeating the tests on a 1x display, you should see the 565x282.png load on the smallest breakpoint, either the 820x460.png or the 835x467.png load on the medium breakpoint, and either the 820x460.png, 835x467.png or the 1670x835.png load on the large and full breakpoints.
13. Repeating the tests on a 2x display, the tests may be different based on the screen size, but you will likely see the 820x460.png on the smallest breakpoint and get the 1670x835.png on the large or full breakpoints. The medium will depend on your screen size and may be a variety of sizes.

Screenshots

Use something like licecap to capture gifs to demonstrate behaviors.

Additional Notes:

Anything else to add?

Impacted Areas in Application

@todo

Today I learned...

[clair0917]

looks good