Generate responsive images in WordPress using the wp_get_attachment_image() function.

functions.php

<?php

// Add a custom image size using the following function.
add_image_size( 'image-size-name', $imageWidthInPixels);

// Examples:

// Resized to 300px wide by proportionbal height.
add_image_size('headshot', 300);

// Hard cropped image resize to 300px wide x 400px tall wide.
add_image_size('headshot-cropped', 300, 400, true);

// After creating new image sizes, new images need to be generated.
// Use this tool to generate the thumbnails: wordpress.org/plugins/regenerate-thumbnails/

?>

some-theme-file.php

<?php

// Use an image ID to generate a responsive image in a theme file.
echo wp_get_attachment_image('12');

// Capture the image ID using ACF's image field. Make sure that the value returned in the field's settings is the image ID.
// Especialy useful in the loop.
$imageID = get_field('your_custom_field');
echo wp_get_attachment_image($imageID);

// Choose the maximum image size loaded by using the size parameter in the function.
// Size options are 'thumbnail', 'medium', 'large', and 'full'. Default size is 'thumbnail'.
echo wp_get_attachment_image($imageID, 'thumbnail');

// Add a class to the generated img element by adding an attribute array. (Keep the 3rd parameter blank.)
echo wp_get_attachment_image($imageID, 'thumbnail', '', array( "class" => "your-class-name" ));

?>