Looking for a way to make Advanced Custom Fields (ACF) output responsive images.
My field is image as ID and are serving it using this snippet from ACF documentation:
<?php
$image = get_field('image');
$size = 'medium'; // (thumbnail, medium, large, full or custom size)
if( $image ) {
echo wp_get_attachment_image( $image, $size );
}
ACF states that "This function also generates the srcset attribute allowing for responsive images!" linking to wordpress documentation.
In the browser inspector/front-end the img output looks like this:
<img width="62" height="100" src="https://example.com/wp-content/uploads/2022/01/example-62x100.png"
class="attachment-medium size-medium" alt="" loading="lazy"
srcset="https://example.com/wp-content/uploads/2022/01/example-62x100.png 62w, https://example.com/wp-content/uploads/2022/01/example-246x400.png 246w, https://example.com/wp-content/uploads/2022/01/example.png 277w" sizes="(max-width: 62px) 100vw, 62px”>
But google PageSpeed says that images is not scaled for mobile.
How do I best show the image responsively? I have googled this a lot, but it’s hard to grasp the concept. Hope you can help! Thanks.