Provide low res image src for homepage images

[carterm]

The homepage contains multiple hi-fidelity images that should provide alternate smaller fidelity images for better mobile usability.

This can be accomplished by wrapping large img images with a <picture> tag that can provide a small mobile optimized version.

<picture>
  <source media="(max-width: 799px)" srcset="/images/caaba-example-low.jpg" />
  <img
    class="img-fluid"
    src="/images/caaba-example.jpg"
    width="950"
    style="aspect-ratio: 950 / 698"
    alt="Homepage screenshot of California's Abortion Access Portal website." />
</picture>

caaba-example.jpg is currently 125Kb, a large download for slow mobile connections.
https://template.webstandards.ca.gov/images/caaba-example.jpg

[extinah]

@sharon-rabang You created these. Can you work with Carter to get the optimal images for mobile?

@carterm Do you have a good example Sharon can follow?

[carterm]

@sharon-rabang is going to take some fresh screenshots based on our discussion. I will resize them for the appropriate devices.

[sharon-rabang]

@carterm Here are the fresh screenshots for testing. These images were cropped to their specified file sizes and retouched a bit, so they don't display any stray graphics. Let us know when they're ready for UX review, thanks! Figma has also been updated: Homepage

[carterm]

https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/1395

[carterm]

Updated release with new screenshots... https://github.com/Office-of-Digital-Services/California-State-Web-Template-Website/pull/1407