Design screenshots followup

[lsl]

Following on from #43428 there are a few things outstanding before we can launch the mshots implementation.

• The vertically oriented screenshots aren't quite how we'd like them, some of the viewport height based elements appear stretched vertically a little bit more than desired. This may or may not be a deal-breaker. This could be achieved by setting custom viewport sizes per design in available-designs-config.json. (Thanks @deBhal) - switching to landscape New Onboarding: show design previews in landscape #49170
• Currently the image file size is a bit too much greater than the existing webp approach. Separately to this PR we're proposing adding in a quality param for mShots to support smaller file sizes. Calypso only suggestion here. - reducing image HxW params fixes this New Onboarding: show design previews in landscape #49170
• The logic to keep the image hidden until really loaded is a bit hacky and relies on a hard-coded URL. Is this safe enough, and does it hold up to testing when generating new screenshots? Is there a reliable way to test this, or write a test for it? - tests using image heights, has caveats but seems to work well enough.
• Are we caching correctly? If a user goes back and forward between steps, does the browser re-download the images, or does it correctly cache them? We should ensure that the images aren't being re-downloaded multiple times. - mshots images get cached
• Implement max reload attempt counts Replace design screenshots with mShots in New Onboarding #43428 (comment) done in Replace design screenshots with mShots in New Onboarding #43428
• Look at loading images in a non-visible location in earlier steps then moving them in later without re-creating the html image elements. This should work in theory but may be too difficult to work into current step architecture. Suggest: mess with absolute positioning off screen.
  Related to Gutenboarding: i18n #37665
• Change design layout to incorporate different height designs: Add Balan and Pollard site designs to Gutenboarding #48727 See: New Onboarding: show design previews in landscape #49170 and discussion in Add Balan and Pollard site designs to Gutenboarding #48727
• Handle 404 gracefully - less of an issue for the previews, more of an issue for the MShotsImage component for reuse.
• Clean up sizing of images / breakpoints New Onboarding: show design previews in landscape #49170 (comment) tracked: New Onboarding: Improve design preview layout #49382
• Merge mShots Docker setup
• Merge mShots quality option

[simison]

Clean up sizing of images / breakpoints

@lsl this would prolly be good to track as its own issue since it's more about UI and less about the infra-work in mshots.

[lsl]

#49382 is tracking the UI change moving forward and I've moved the mShots issues into our board backlog.