I just can’t understand how add_image_size() and responsive images work.

So let’s say I have a thumbnail like 720×360.

So I’m assuming I need to add the size add_image_size('post-thumbnail', 720, 320, true) //hard crop

I upload image with the dimensions of 3000×2000 to accommodate for retina screens, etc.

Now I’m adding it to the page with the_post_thumbail('post-thumbnail') but it doesn’t build srcset at all!

If I’m using the_post_thumbail('full') it builds srcset but doesn’t preserve the aspect ratio.

So what I'm supposed to do now?

Do I need to add more sizes, starting from the largest? Like:

add_image_size('post-thumbnail', 3200, 1600, true); add_image_size('post-thumbnail-lg', 1600, 800, true); add_image_size('post-thumbnail-sm', 1200, 600, true); add_image_size('post-thumbnail-xs', 400, 200, true);

If not, how would I preserve the aspect ratio?

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

As outlined here: https://www.smashingmagazine.com/2015/12/responsive-images-in-wordpress-core/

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.