WordPress (PHP) / Utilities / Serve Imgix as a <img> or <picture> tag

get_imgix.php

/************************************
* Include Imgix image
* @param		array		$aImageScope		The image settings
* @param		array		$aClasses		Apply classes to the image (optional)

* Sandbox: https://sandbox.imgix.com/
* API Reference: https://docs.imgix.com/apis/rendering

* Notes:
- Do not include `dpr` param in `settings`, instead set a maximum DPR support in `max_dpr` parameter.
- Do not include `auto` param in `settings`, unless "Auto Format" & "Auto Compres" are disabled in Imgix settings (Media Cloud plugin).
- Ensure URLs follow the following format (notice params start with '?'): url.com?params&seperated&by&ampersand

* Example:
$aImage = [
	'image_url'						=> 'https://assets.imgix.net/examples/treefrog.jpg',
	'alt'							=> 'Alternative text',
	'picture_tag'						=> true,
	'settings'						=> '?w=640&ar=1%3A1.355&fit=crop', // Imgix paramaters.
	'attr'							=> 'data-scroll data-scroll-speed="-.5"',
	'max_dpr'						=> 3, // 1 = Standard res, 2 = Retina, 3 = Super retina.
	'sizes'							=> [ // 'picture_tag' must be set to true to use 'sizes'
		[
			'media_query'				=> '(min-width: 1200px)',
			'image_url'					=> 'https://assets.imgix.net/unsplash/windows.jpg',
			'settings'					=> '?w=1800&ar=1%3A1.355&fit=crop'
		], [
			'media_query'				=> '(min-width: 800px)',
			'image_url'					=> 'https://assets.imgix.net/unsplash/bear.jpg',
			'settings'					=> '?w=1200&ar=1%3A1.355&fit=crop'
		],
	]
]
get_imgix( $aImage, [ '-class1', '-class2' ] );

************************************/
function get_imgix( $aImageScope = [ 'picture_tag' => false, 'settings' => '?' ], $aClasses = [] ) {

	// Determine DPRs (defaults to retina)
	if ( ! isset( $aImageScope['max_dpr'] ) ) $aImageScope['max_dpr'] = 2;

	// Start <picture> tag if (`picture` is picture_tag)
	if ( isset( $aImageScope['picture_tag'] ) ) {

		// Start tag (with optional classes and smooth scroll)
		echo '<picture';
		if ( isset( $aImageScope['attr'] ) ) echo ' ' . $aImageScope['attr'];
		if ( ! empty( $aClasses ) ) echo ' class="' . implode( ' ', $aClasses ) . '"';
		echo '>';

		/**
		* Additional images based on viewport size
		*/
		if ( isset( $aImageScope['sizes'] ) ) {
			foreach( $aImageScope['sizes'] as $aSize ) {

				echo '<source srcset="';

					// Display image in every DPR
					foreach( range( 1, $aImageScope['max_dpr'] ) as $iImageDpr ) {
						echo ( isset( $aSize['image_url'] ) ? $aSize['image_url'] : $aImageScope['image_url'] );
						echo ( isset( $aSize['settings'] ) ? $aSize['settings'] : $aImageScope['settings'] );
						echo '&dpr=' . $iImageDpr . ' ' . $iImageDpr . 'x';
						if ( $iImageDpr != $aImageScope['max_dpr'] ) echo ', ';
					}

				echo '" media="' . $aSize['media_query'] . '" />';

			}
		}

	}

		/**
		* Default <img> tag (with optional classes and smooth scroll)
		*/
		echo '<img ';
		if ( ! isset( $aImageScope['picture_tag'] ) && isset( $aImageScope['attr'] ) ) echo ' ' . $aImageScope['attr'];
		if ( ! isset( $aImageScope['picture_tag'] ) && ! empty( $aClasses ) ) echo ' class="' . implode( ' ', $aClasses ) . '"';
		echo 'src="' . $aImageScope['image_url'] . $aImageScope['settings'] . '&dpr=1" ';
		if ( $aImageScope['max_dpr'] > 1 ) {
			echo 'srcset="';
				foreach( range( 1, $aImageScope['max_dpr'] ) as $iDefaultImageDpr ) {
					echo $aImageScope['image_url'] . $aImageScope['settings'] . '&dpr=' . $iDefaultImageDpr . ' ' . $iDefaultImageDpr . 'x';
					if ( $iDefaultImageDpr != $aImageScope['max_dpr'] ) echo ', ';
				}
			echo '"';
		}
		if ( isset( $aImageScope['alt'] ) ) echo 'alt="' . $aImageScope['alt'] . '" ';
		echo '/>';

	// Close tag
	if ( isset( $aImageScope['picture_tag'] ) ) echo '</picture>';

}

• Super-Retina support.
• Next-gen formats incl. WebP.
• Image modifications incl. aspect ratios, watermarks, cropping, masking, facial detection, blurs, duotones and more.
• Images are offloaded to AWS S3 automatically, with Transfer Acceleration.
• Faster uploads as thumbnails are no longer needed.
• Improved responsive, with the ability to different images at different sizes.
• Better for SEO due to speed, next-gen formats, compression, img/picture tags, CDNs, built-in alternative text etc.
• / can replace inline background images for better SEO using CSS object-fit (96.56% global support).
• has strong support (96.33% global support) and allows serving images at specific media queries.
• Easily attach data attributes and classes.