wordpress thumbnail image with picture tag html
<?php
// Get this attachment ID
$attachment_id = get_post_thumbnail_id( $post_id );
$image_large_src = wp_get_attachment_image_src( $attachment_id, 'large' );
?>
<picture>
<!-- Large art direction resolutions -->
<source media="(min-width: 50rem)"
srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'large' ); ?>"
sizes="(min-width: 60rem) 60rem, 100vw">
<!-- Small art direction resolutions -->
<source
srcset="<?php echo wp_get_attachment_image_srcset( $attachment_id, 'large-cropped' ); ?>"
sizes="100vw">
<!-- fallback -->
<img src="<?php echo $image_large_src[0]; ?>"
srcset="<?php echo wp_get_attachment_image_srcset( $image_large_id, 'large' ); ?>"
sizes="(min-width: 60rem) 60rem, 100vw"
alt="<?php get_post_meta( $attachment_id, '_wp_attachment_image_alt', true) ?>"
>
</picture>