Better, Faster, Responsive Images for Divi – Upload in Divi child theme.

functions.php

<?php
// ********** Faster, Better Divi images******
//Only run script when not logged
if (!wp_get_current_user()) {
  add_action('wp_footer', 'hb_responsive_bg_image', 10);
}

//add responsiveness for background images
function hb_responsive_bg_image() {
	global $wpdb;

	$css = ET_Builder_Element::get_style();
	//find the background-image css in the inline css
	if ( preg_match_all('/\.[_a-z0-9]+\.et_pb_fullwidth_header \{.*background-image.*\}/', $css, $matches ) ) {
		foreach( $matches[0] as $bg_css ) {
			if (preg_match('/\b(?:(?:https?|ftp|file):\/\/|www\.|ftp\.)[-A-Z0-9+&@#\/%=~_|$?!:,.]*[A-Z0-9+&@#\/%=~_|$]/i', $bg_css, $url_matches)) {
				$url = $url_matches[0];

				$wp_upload_dir = wp_upload_dir();


				$image_path = str_replace(trailingslashit(preg_replace("(^https?://)", "", $wp_upload_dir['baseurl'])), '', preg_replace("(^https?://)", "", $url ));

				$attachment = $wpdb->get_col($wpdb->prepare("SELECT post_id FROM $wpdb->postmeta WHERE meta_key='_wp_attached_file' AND BINARY meta_value='%s';", $image_path ));

				$bg_css = preg_replace('/background-color([^;]*);/', '', $bg_css, 1);

				if ($attachment) {
					$image_meta = wp_get_attachment_metadata($attachment[0]);

					$extra_css = '';
					//add fullsize background image style, fixing the problem of browser downloading overridden background image
					$extra_css .= '
						@media only screen and ( min-width: 1441px ) {
							' . $bg_css . '
						}';

					//add responsive background image for (non-retina) screen with max-width 1440px (use 1440px image), 1080px (use 1080px image), 768px (use 768px image)
					if ($image_meta['sizes']['image_1440']) {
						$extra_css .= '
						@media only screen and ( max-width: 1440px ) {
							' . str_replace(basename($url), $image_meta['sizes']['image_1440']['file'], $bg_css) . '
						}';
					}
					if ($image_meta['sizes']['et-pb-portfolio-image-single']) {
						$extra_css .= '
						@media only screen and ( max-width: 1080px ) {
							' . str_replace(basename($url), $image_meta['sizes']['et-pb-portfolio-image-single']['file'], $bg_css) . '
						}';
					}

					if ($image_meta['sizes']['medium_large']) {
						$extra_css .= '
						@media only screen and ( max-width: 768px ) {
							' . str_replace(basename($url), $image_meta['sizes']['medium_large']['file'], $bg_css) . '
						}';
					}


					//add responsive background image for retina screen with max-width 1440px (use fullsize image), 768px (use 1440px image), 540px (use 1080px image), 384px (use 768px image)
					$extra_css .= '
					@media
					only screen and ( max-width: 1440px ) and (-webkit-min-device-pixel-ratio: 2),
					only screen and ( max-width: 1440px ) and (   min--moz-device-pixel-ratio: 2),
					only screen and ( max-width: 1440px ) and (     -o-min-device-pixel-ratio: 2/1),
					only screen and ( max-width: 1440px ) and (        min-device-pixel-ratio: 2),
					only screen and ( max-width: 1440px ) and (                min-resolution: 192dpi),
					only screen and ( max-width: 1440px ) and (                min-resolution: 2dppx) {
						' . $bg_css . '
					}';
					if ($image_meta['sizes']['image_1440']) {
						$extra_css .= '
						@media
						only screen and ( max-width: 768px ) and (-webkit-min-device-pixel-ratio: 2),
						only screen and ( max-width: 768px ) and (   min--moz-device-pixel-ratio: 2),
						only screen and ( max-width: 768px ) and (     -o-min-device-pixel-ratio: 2/1),
						only screen and ( max-width: 768px ) and (        min-device-pixel-ratio: 2),
						only screen and ( max-width: 768px ) and (                min-resolution: 192dpi),
						only screen and ( max-width: 768px ) and (                min-resolution: 2dppx) {
							' . str_replace(basename($url), $image_meta['sizes']['image_1440']['file'], $bg_css) . '
						}';
					}
					if ($image_meta['sizes']['et-pb-portfolio-image-single']) {
						$extra_css .= '
						@media
						only screen and ( max-width: 540px ) and (-webkit-min-device-pixel-ratio: 2),
						only screen and ( max-width: 540px ) and (   min--moz-device-pixel-ratio: 2),
						only screen and ( max-width: 540px ) and (     -o-min-device-pixel-ratio: 2/1),
						only screen and ( max-width: 540px ) and (        min-device-pixel-ratio: 2),
						only screen and ( max-width: 540px ) and (                min-resolution: 192dpi),
						only screen and ( max-width: 540px ) and (                min-resolution: 2dppx) {
							' . str_replace(basename($url), $image_meta['sizes']['et-pb-portfolio-image-single']['file'], $bg_css) . '
						}';
					}
					if ($image_meta['sizes']['medium_large']) {
						$extra_css .= '
						@media
						only screen and ( max-width: 384px ) and (-webkit-min-device-pixel-ratio: 2),
						only screen and ( max-width: 384px ) and (   min--moz-device-pixel-ratio: 2),
						only screen and ( max-width: 384px ) and (     -o-min-device-pixel-ratio: 2/1),
						only screen and ( max-width: 384px ) and (        min-device-pixel-ratio: 2),
						only screen and ( max-width: 384px ) and (                min-resolution: 192dpi),
						only screen and ( max-width: 384px ) and (                min-resolution: 2dppx) {
							' . str_replace(basename($url), $image_meta['sizes']['medium_large']['file'], $bg_css) . '
						}';
					}

					?>
					<style type="text/css" id="responsive-bg-image-style">
					<?php echo $extra_css;?>
					</style>
					<?php
				}
			}
		}
	}
}
// **********End Faster, Better Divi images******

Had some issues with SEO DELUCKS plugin in the backend. So I added the following code

//Run script only when not logged in to prevent plugin issues, such as SEO DELUCKS if (!wp_get_current_user()) { add_action( 'wp_footer', 'hb_pb_maybe_add_advanced_styles', 9 ); add_action('wp_footer', 'hb_responsive_bg_image', 10); }

Added a function to check if it's an SVG file type. If so, img src set should not be created.
//Check if it's an svg function checkForSVG($src){ if (preg_match('/(\.svg)$/', $src)){ $src = true; } return $src; }

Since Divi 3.27 there is no need anymore to use this script for generating SRC Sets. However, the Divi theme still does not support background image optimization. So the above and updated script should be still useful.