This post uses examples from the Modern Thumbnails of the Feast Plugin.
Here's a brief breakdown of how thumbnails work.
Let's say we have a 1200x1200px featured image:
Note: since the content width here is only 720px, it appears to be the same size as the original image. Actually, the originally 1200x1200 image is being displayed at 720x720px.
Vertical / Portrait thumbnails
And we have a vertical thumbnail selected in our "featured posts" widget at 720x960 and a hard crop. First, WordPress will resize to the longest size - 960px height in this case, then crop the shorter size (the width in this case) to meet the width requirement:
This 720px width image will fill the full width of our content, if we display it full-width on desktop.
Horizontal / Landscape thumbnail
Conversely, if we have a 4:3 (720x540) landscape thumbnail that needs to fill the 720px full width, we'll resize to 720px width and crop out whatever height is needed to achieve 540px height:
This size takes care of our full width desktop, but the majority of our pageviews are on mobile, which is 360px content width.
So we also want to register 360px width images. For vertical (3:4), this is 360x480 and for horizontal (4:3), this is 360x270.
But we now display mobile thumbnails at half-width by default, which means we're not done.
We also need thumbnail sizes for half of 360px, which is 180px. For vertical (3:4), this is 180x240, and for horizontal (4:3), this is 180x135.
Note how the width always stays consistent: 720px, 360px and 180px.
The width on screens is more or less fixed, while the height on screens is what we're accustomed to scrolling, so the height is the side that can be adjusted at will.
Google's Discover requirements state that the image must be 1200px width minimum. If our featured image is under 1200px, there's no way to up-size it to comply with this requirement.
Why 3:4 and 4:3?
4:3 (landscape) is Google's requirement for recipe + article schema.
Truthfully, we can use any ratio for vertical images, but for simplicity we decided to keep the ratio the same - so we get 3:4.
Work smarter, not harder.
Recipe plugin images
Recipe plugins use 3 sizes as defined by Google's recipe requirements:
When using the same image for the featured image and recipe card, you'll end up with auto-generated images for the recipe that look like:
This means that you have to select your featured images + recipe card images in a way that if you lose (approx.) 25% of the top and 25% of the bottom of the image, the finished recipe is still visible and useful to the reader.
Combining the fact that the recipe card's smallest image is 16:9 (horizontal), and we may want to use 3:4 (vertical) for thumbnails, we can create a "focus zone" by combining these options:
The part of the image outside of the "focus zone" should be considered sacrificial - it's not critical in conveying important information about the recipe.
In post images also register "thumbnails" using a "soft crop", which means that it resizes based on best fit. The in-post thumbnails registered in the Feast Plugin specify only a width, which means that it resizes the width and does not crop the height.
This keeps images proportional.