I am trying to use the_post_thumbnail to place an image I’ve defined as ‘medium’ size on the site, but it is using a ‘medium-large’ image instead.

In Settings > Media I have defined ‘Medium size’ as Max Width: 470 and Max Height: 470.

I am using the following code to place a medium-sized image on a page:

<?php the_post_thumbnail('medium'); ?>

However it is placing the ‘medium-large’ size image instead. Although the image occupies 470px-wide box, the file loaded is 768×512.

This is the code being produced:

<img width="470" height="313" src="https://(path-to-image)/HiRes-470x313.jpg" class="attachment-medium size-medium wp-post-image" alt="Image alt" decoding="async" srcset="https://(path-to-image)/HiRes-470x313.jpg 470w, https://(path-to-image)/HiRes-208x138.jpg 208w, https://(path-to-image)/HiRes-768x512.jpg 768w, https://(path-to-image)/HiRes-1536x1024.jpg 1536w, https://(path-to-image)/HiRes.jpg 1920w" sizes="(max-width: 470px) 100vw, 470px">

As the src refers to an image which is 470px wide I don’t understand why the larger image is appearing instead. How can I correct this so it isn’t needlessly loading a larger image than the page requires?