Different ways of pulling in images through Wordpress and ACF

WP Image - Image ID.html

/**
* Based off of image ID.
*
* You can use this method to pull in several different crops for responsive.
* The crop can be custom, or one of WP default ones, or leave empty.
*
* wp_get_attachment_image_src( $attachment_id, $size, $icon )
* http://codex.wordpress.org/Function_Reference/wp_get_attachment_image_src
*/

// Define variables
$image_id  = $field['custom_filed'];
$image_alt = get_post_meta( $image_id, '_wp_attachment_image_alt', true );
$image     = wp_get_attachment_image_src( $image_id, 'crop_name' );

// Markup
<img src="<?php echo $image[0]; ?>" 
     width="<?php echo $image[1]; ?>" 
     height="<?php echo $image[2]; ?>"
     alt="<?php echo $image_alt; ?>" />

// Other ways to pull in ID.
wp_get_attachment_image_src( get_post_thumbnail_id(), 'crop_name' );
wp_get_attachment_image_src( get_field('image_field'), 'crop_name' );

// Responsive Markup Sample
<figure>
  <img class="responsive"
       src="<?php echo $media_sml[0]; ?>"
       data-mq-large-src="<?php echo $media_lrg[0]; ?>"
       width="<?php echo $media_lrg[1]; ?>"
       height="<?php echo $media_lrg[2]; ?>"
       alt="<?php echo $media_alt; ?>" />
  <figcaption>
    <?php echo $media_alt; ?>
  </figcaption>
</figure>

WP Image - Object or Array.php

/**
* Pull image through object/array.
*
* This method is similar to pulling through the WP ID function. You do
* end up getting access to more object information, however it's quite a bit
* more writing you have to do.
*
* http://www.advancedcustomfields.com/resources/image/
*/

// Pull image from ACF field.
$image = get_field('image_field');

// Pull object data.
$url     = $image['url'];
$title   = $image['title'];
$alt     = $image['alt'];
$caption = $image['caption'];

// Define image size through crop.
$size    = 'thumbnail';
$src     = $image['sizes'][ $size ];
$width   = $image['sizes'][ $size . '-width' ];
$height  = $image['sizes'][ $size . '-height' ];

// Markup
<img src="<?php echo $src; ?>" 
     alt="<?php echo $alt; ?>" 
     width="<?php echo $width; ?>" 
     height="<?php echo $height; ?>" />

WP Image - WP Function.php

/**
* Generate image markup through WP function.
*
* Requires ACF setting of ID.
* The crop can be custom, or one of WP default ones, or leave empty.
*
* This method does not work great with Media Query Sync. However, this method
* allows you to define custom settings, and the width, height, and alt tags will
* be auto generated for you. Which is great for semantics.
*
* wp_get_attachment_image( $attachment_id, $size, $icon, $attr );
* http://codex.wordpress.org/Function_Reference/wp_get_attachment_image
*/

<?php echo wp_get_attachment_image( $image_field, 'image_crop', '0', array('class' => '') ); ?>

WP Image.php

/**
* Pull Featured Image
*
* This method only pulls the featured image.
*
* the_post_thumbnail( $size, $attr );
* http://codex.wordpress.org/Function_Reference/the_post_thumbnail
*/

<?php
  if ( has_post_thumbnail() ) {
    the_post_thumbnail( 'large', array('class' => '') );
  }
?>

// Default WP image crops.
thumbnail  -- Thumbnail (default 150px x 150px max)
medium     -- Medium resolution (default 300px x 300px max)
large      -- Large resolution (default 640px x 640px max)
full       -- Full resolution (original size uploaded)