You’re going to want to use responsive images in WP 4.4. Not a heck of a lot of documentation out yet but refer to this WP Core article Responsive Images in WordPress 4.4.
Here is the example they give.
<?php
$img_src = wp_get_attachment_image_url( $attachment_id, 'medium' );
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
?>
<img src="https://wordpress.stackexchange.com/questions/211913/<?php echo esc_url( $img_src ); ?>"
srcset="https://wordpress.stackexchange.com/<?php echo esc_attr( $img_srcset ); ?>"
sizes="(max-width: 50em) 87vw, 680px" alt="A rad wolf">
If you go the lazy loading route check out lazySizes – bgset plugin / DEMO. That would reduce your code to:
<?php
$img_srcset = wp_get_attachment_image_srcset( $attachment_id, 'medium' );
?>
<div class="lazyload" data-bgset="<?php echo $img_srcset; ?>" data-sizes="auto">
This method ensures a smaller screen size won’t require a full image, thus reducing your page load and site speed.