Make ACF Image Responsive

When using ACF Image field, it’s a good idea to set the images to be responsive.

In the Field Group – set the image field to Image Array.

Add this to the template file:

<?php while( have_rows('FIELD NAME') ): the_row();
        $image = get_sub_field('FIELD NAME'); ?>
        <li><?php $img_src = wp_get_attachment_image_url( $image['id'], 'full' );
        $img_srcset = wp_get_attachment_image_srcset( $image['id'], 'full' ); ?>
        <img src="<?php echo esc_url( $img_src ); ?>" srcset="<?php echo esc_attr( $img_srcset ); ?>" sizes="(max-width: 100vw) 300px" alt="<?php echo $image['alt']; ?>">

Finally, set this to your preferred max width:

sizes="(max-width: 100vw) 300px"