create a picture element from an either an array or URL. Useful for when one is using ACF for calling images instead of through native WP mechanism

better-acf-image.php

/* CREATE A PICTURE ELEMENT FROM AN ACF IMAGE FIELD, IF DATA IS either an array or URL
TO DO:
- pass src set for truly responsive images using the ID as the ACF data.
*/

// Check for .webp existence
function webp_exists($image_url) {
    $upload_dir = wp_upload_dir();
    $relative_path = str_replace($upload_dir['baseurl'], '', $image_url);
    $webp_path = $upload_dir['basedir'] . $relative_path . '.webp';
    return file_exists($webp_path);
}

function solo_acf_image($image, $classes='', $loading='lazy', $container_cols=1) {

	if( !empty( $image ) ) {

		if (is_array($image)) {
			$image_url = $image['url'];
			$image_alt = (!empty($image['alt']) ? $image['alt'] : $image['title']);
			$image_width = $image['width'];
			$image_height = $image['height'];
			$info = pathinfo($image_url);

			// If the uploaded image is an SVG, then we don't need to output the picture element
			if( strpos( $image_url, 'svg' ) !== false ) {
				echo '
				<img
					src="'.$image_url.'"
					alt="'.$image_alt.'"
					class="'.$classes.'"
					loading="'.$loading.'"
					width="'.$image_width.'"
					height="'.$image_height.'">';
			}
			else {

				$picture = '<picture>';

				// Generate srcset from ACF Sizes
				if(is_array($image['sizes'])){

						foreach(array('medium', 'medium_large', 'large') as $size){
			                $webp_exists = webp_exists($image['sizes'][$size]);

			                // Max width for all but the smallest included size is multiplied by default column count
			                $max_width = ($size === 'medium') ? $image['sizes'][$size.'-width'] : $image['sizes'][$size.'-width'] * $container_cols;

							$picture .= '
							<source
								media="(max-width: '.$max_width.'px)"
								height="'.$image['sizes'][$size.'-height'].'"
								width="'.$image['sizes'][$size.'-width'].'"
								srcset="'.($webp_exists ? $image['sizes'][$size] . '.webp' : $image_url).'">';
						}
				}
				if ($info["extension"] == "webp" || $webp_exists) {
					$picture .= '<source srcset="' . ($webp_exists ? $image_url . '.webp' : $image_url) . '" type="image/webp">';
				}
				$picture .= '<img
					src="'.($webp_exists ? $image_url . '.webp' : $image_url).'"
					height="'.$image['sizes'][$size.'-height'].'"
					width="'.$image['sizes'][$size.'-width'].'"
					alt="'.$image_alt.'">';
				$picture .= '</picture>';

				echo $picture;

			}
		}
		//if the image field is output just as a URL
		else {
			$info = pathinfo($image);

			if( strpos( $image, 'svg' ) !== false ) {
				// If the uploaded image is an SVG, then we don't need to output the picture element
				echo "<img src=\"$image\" loading=\"$loading\" alt=\"\" class=\"$classes\" />";
			}

			else {
                $webp_exists = webp_exists($image);
				// create a variable that strips the file name from the URL of $image
				$file = basename($image);
				// strips the file extension from the URL of $image
				$filename = pathinfo($file, PATHINFO_FILENAME);
				// strip out any underscore or dash from the file name and replace with a space, as well as strip out any string that starts with a number includes an 'x' and ends with a number
				$filename = str_replace(array('_', '-'), ' ', $filename);
				$filename = preg_replace('/[0-9]*x[0-9]*$/', '', $filename);
				// capitalize the first letter of each word in the file name
				$filename = ucwords($filename);

				echo "<picture>";
				if ($info["extension"] == "webp" || $webp_exists) {
					echo "<source srcset=\"" . ($webp_exists ? $image . '.webp' : $image) . "\" type=\"image/webp\">";
				}
				echo "<img src=\"$image\" loading=\"$loading\" class=\"$classes\" alt=\"$filename\"/>";
				echo "</picture>";
			};
		}
	}
	else {
		echo "<!-- the image isn't defined, or is not designated as an array in ACF -->";
	};
	//endif;
}


function solo_theme_image($url, $classes='', $loading='lazy') {
	$info = pathinfo($url);

	if( strpos( $url, 'svg' ) !== false ) {
		// If the uploaded image is an SVG, then we don't need to output the picture element
		echo "<img src=\"$url\" loading=\"$loading\" alt=\"\" class=\"$classes\" />";
	} else{

		echo "<picture>";
		if ($info["extension"] == "webp") {
			echo "<source srcset=\"$url\" type=\"image/webp\">";
		} else {
			echo "<source srcset=\"$url.webp\" type=\"image/webp\">";
		}
		echo "<img src=\"$url\" loading=\"$loading\" class=\"$classes\" />";
		echo "</picture>";
	}
}

/// you can then call your acf option images in your custom theme such as
solo_acf_image($variable_referencing_field['sizes']['medium']);
or