Set sizes attribute for responsive images and better performance in WordPress

theme-functions.php

<?php

/**
 * Set sizes attribute for responsive images and better performance
 *
 * @param  array        $attr       markup attributes.
 * @param  object       $attachment WP_Post image attachment post.
 * @param  string|array $size       named image size or array.
 * @return array        markup attributes
 */
function meta13_resp_img_sizes( $attr, $attachment, $size ) {
	if ( is_array( $size ) ) {
			$attr['sizes'] = $size[0] . 'px';
	} elseif ( $size == 'small-square' ) {
			$attr['sizes'] = '(min-width: 640px) 270px, 640px';
	} elseif ( $size == 'medium-square' ) {
			$attr['sizes'] = '(min-width: 640px) 512px, 1024px';
	} elseif ( $size == 'large-square' ) {
			$attr['sizes'] = '1200px';
	} elseif ( $size == 'xlarge-square' ) {
			$attr['sizes'] = '1440px';
	} elseif ( $size == 'small-crop' ) {
			$attr['sizes'] = '640px';
	} elseif ( $size == 'medium-crop' ) {
			$attr['sizes'] = '1024px';
	} elseif ( $size == 'large-crop' ) {
			$attr['sizes'] = '1200px';
	}
	return $attr;
}
add_filter( 'wp_get_attachment_image_attributes', 'meta13_resp_img_sizes', 25, 3 );