What size image should I use for featured images above the content and for backgrounds of Hero Unit elements?

When editing a post or page, you can select for a featured image to display above the content from the Post Options and Page Options meta boxes. This will display the image full-width of the browser window like this and this. And through the layout builder, you can setup awesome full-width hero units like this and this.

But when doing these things, what size should the images be? This depends on a few factors.
When dealing with images this large on the web, we're going to have to sacrifice a bit of quality; that's just the reality. If you're trying to upload images that are 2,880 pixels wide to look perfect on a MacBook Pro or 4,000 pixels wide for that new 4K monitor you just bought, your website is going to load slower than molasses.
We suggest using images that are somewhere between 1,400 to 1,600 pixels in width for all of these full-width image features. This will be somewhere in the middle of the vast amount of browser windows viewing your website on laptop and desktop computers.
And if you're worried about Hi-DPI devices like Retina screens and 4K monitors not displaying your images perfectly crisp, you really don't need to sweat too much over that. With smaller images like logos and icons, this can be really noticeable. However, with large background images this will be much less noticeable and is expected by the user.

Now that you're using an image that's about 1,400 to 1,600 pixels wide, how tall should it be? This will depend on the specific scenario.

Standard Images: If you're using the image as a featured image above the content that's not using the parallax effect like this or you're using a background for a hero unit that you haven't set to fill the height of the browser window, you'll want your image to be much shorter. We suggest an image that is roughly a 7:3 aspect ratio. So for example, 1400x600, 1500x640, and 1600x680 would all be good sizes to use that are all roughly a 7:3 aspect ratio.

Parallax Images: If you're using an image above the content that has the parallax effect applied like this or you're using a background for a hero unit that you've set to fill the full height of the browser window like this, you'll want to have your images a bit taller to show off that parallax effect. The taller the image, the more dramatic that parallax effect will be. But try not to get carried away with the parallax effect, and remember that keeping it subtle is usually much nicer. So we suggest to use roughly a 16:11 aspect ratio. So for example, 1400x960, 1500x1030, 1600x1100 would all be good sizes that are all roughly a 16:11 aspect ratio.