Reduce responsive image variants

[nick-mon1]

Summary

Updates code to only generate and serve mobile (800) and desktop (1200) responsive sizes.

Preview

pages that display 800 or 1200
it-warning-banners-how-gsa-is-working-to-stop-unnecessarily-frightening-users
evaluating-your-agency-accessibility-just-got-a-whole-lot-easier-with-gsa-openacr-editor
a-successful-vibrant-productive-career-for-federal-employees
making-gsa-public-art-collection-more-accessible

Note

For some pages, there is only one variant, see below

pages that display other sizes
event/2020/01/14/socialgov-winter-meeting/ (only displays 200px)

Solution

Simplified responsive variants from 4 to 2 sizes. Serving one size for mobile and desktop will not impact performance and quality.

viewport	size
mobile/tablet	800
desktop/large scree	1200

What you should see in network panel

Updates the file-process.js to generate the above two sizes.
Updates img.html partial/short code to display above two sizes.

Other variant sizes will be served if the 800 or 1200 is not present.

How To Test

1. Visit a preview page above
2. Change viewport from desktop to mobile to see only two sizes loaded
3. When an image has no 800 or 1200 size, other image size is served

[github-actions]

🔍 Preview in Federalist

[RileySeaburg]

@nick-mon1 did you test upload with this?

[RileySeaburg]

I only get one file, and the file is blank.

https://s3.amazonaws.com/digitalgov/image-test-rs-9-13.png

[nick-mon1]

Thought

@RileySeaburg This is probably not be related to these code changes for displaying and generating the same image types. Still need to address async issues with gulp file upload scripts.

[RileySeaburg]

Thought

@RileySeaburg This is probably not be related to these code changes for displaying and generating the same image types. Still need to address async issues with gulp file upload scripts.

@nick-mon1 I would agree completely if the image upload didn't already work. But I do agree this is an async issue.