Responsive Images with art direction

The ‘picture’ element supports min-width and max-width.

If the image is a featured image then wp_get_attachment_image_src is what you would use:

// open the picture element
<picture>

// use this image if the width of a screen does not go over 599px
<source srcset="https://wordpress.stackexchange.com/https://wordpress.stackexchange.com/https://wordpress.stackexchange.com/<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'whatever add_image_size you want to use', false )[0] ?>" media="(max-width: 599px)">

// call an image
<source srcset="https://wordpress.stackexchange.com/https://wordpress.stackexchange.com/https://wordpress.stackexchange.com/<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'whatever add_image_size you want to use', false )[0] ?>">

// fall back for older browsers
<img srcset="https://wordpress.stackexchange.com/https://wordpress.stackexchange.com/https://wordpress.stackexchange.com/<?php echo wp_get_attachment_image_src( get_post_thumbnail_id(), 'whatever add_image_size you want to use', false )[0] ?>">

// close the picture element
</picture>

You can have as many as you want

tech