How to make new WP responsive image to choose images by filename and add them to srcset without checking aspect ratio?

I have my own sizes:

add_image_size( 'l', 992, 500, array( 'center', 'center' ) );
add_image_size( 'm', 768, 500, array( 'center', 'center' ) );
add_image_size( 'sm', 450, 300, array( 'center', 'center' ) );

And I want to use them in srcset.


You shouldn't.

srcset is used for when you want to optimise the quality for different devices by serving different sizes of the same image. If you want to serve different crops, you should be using the picture element instead.

For example, if the intention of your image sizes is to serve a 'small' version to 'mobile' devices, using srcset won't achieve that. For example, an iPhone 6, despite only being 414px wide, would serve your large 992x500 image due to being 3x retina quality.

  • Good point. I'm not using Apple products and I'm always forgeting about them. But I think that picture element isn't solution for retina display (caniuse.com/#search=picture). I need different crop for different devices. Object-fit for img isn't working for any MS browsers same as object-fit polyfill. I don't want to use images as background-size: cover, because site would have many big size images and making queries and manually adding them would be a nightmare. Any suggestions how can I achieve it? – cgslav Dec 10 '15 at 1:20
  • 1
    scrset is for serving the same image in different sizes. The picture element is for art direction. Everything else is a hacky workaround and wrong. – kraftner Dec 10 '15 at 15:35

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.