Scotts Web Dev Banner
Did you notice... every article on this site has an associated video? Consider subscribing to Scotts Web Dev on YouTube! :)

Best Way To Display ACF Images

Are you writing the HTML to display your ACF images? Writing out the attributes and referencing the Advanced Custom Fields array values for the attribute values?

I used to do it that way, too. But, there’s a better way

Use Built-In WordPress Function To Display ACF Images

You can use a built-in wordpress function to generate the HTML for you. Not only that, but this HTML will include the srcset so that your image displays the appropriate size for the screen it’s being used on.

Use wp_get_attachment_image()

Example Code For Displaying ACF Images Using wp_get_attachment_image

// grab image from acf
$image = get_field('image');

// and display it, letting WordPress generate the HTML
if ($image) {
  echo wp_get_attachment_image($image['ID'], 'large');
}

// add classes or attributes if necessary
// echo wp_get_attachment_image($image['ID'], 'large', false, ['class' => 'your-class', 'id' => 'your-id', 'loading' => 'lazy']);  

More Advanced Custom Fields

See the Introduction To Advanced Custom Fields.