Provide fallback JPEG images in frontend when WebP is not supported by the browser

modules/images/webp-uploads/fallback.js

@@ -0,0 +1,67 @@
+( function( d ) {
+	window.webpUploadsFallbackWebpImages = function( media ) {
+		for ( var i = 0; i < media.length; i++ ) {
+			try {
+				var ext = media[i].media_details.sources['image/jpeg'].file.match( /\.\w+$/i );
+				if ( ! ext || ! ext[0] ) {
+					continue;
+				}
+
+				var images = d.querySelectorAll( 'img.wp-image-' + media[i].id );
+				for ( var j = 0; j < images.length; j++ ) {
+					images[j].src = images[j].src.replace( /\.webp$/i, ext[0] );
+					var srcset = images[j].getAttribute( 'srcset' );
+					if ( srcset ) {
+						images[j].setAttribute( 'srcset', srcset.replace( /\.webp(\s)/ig, ext[0] + '$1' ) );
+					}
+				}
+			} catch ( e ) {
+			}
+		}
+	};
+
+	var restApi = d.getElementById( 'webpUploadsFallbackWebpImages' ).getAttribute( 'data-rest-api' );
+
+	var loadMediaDetails = function( nodes ) {
+		var ids = [];
+		for ( var i = 0; i < nodes.length; i++ ) {
+			if ( nodes[i].nodeName !== "IMG" || ! nodes[i].src.match( /\.webp$/i ) ) {
+				continue;
+			}
+
+			var attachment = nodes[i].className.match( /wp-image-(\d+)/i );
+			if ( attachment && attachment[1] && ids.indexOf( attachment[1] ) === -1 ) {
+				ids.push( attachment[1] );
+			}
+		}
+
+		for ( var page = 0, pages = Math.ceil( ids.length / 100 ); page < pages; page++ ) {
+			var pageIds = [];
+			for ( var i = 0; i < 100 && i + page * 100 < ids.length; i++ ) {
+				pageIds.push( ids[ i + page * 100 ] );
+			}
+
+			var jsonp = d.createElement( 'script' );
+			jsonp.src = restApi + 'wp/v2/media/?_fields=id,media_details&_jsonp=webpUploadsFallbackWebpImages&per_page=100&include=' + pageIds.join( ',' );
+			d.body.appendChild( jsonp );
+		}
+	};
+
+	try {
+		// Loop through already available images.
+		loadMediaDetails( d.querySelectorAll( 'img' ) );
+
+		// Start the mutation observer to update images added dynamically.
+		var observer = new MutationObserver( function( mutationList ) {
+			for ( var i = 0; i < mutationList.length; i++ ) {
+				loadMediaDetails( mutationList[i].addedNodes );
+			}
+		} );
+
+		observer.observe( d.body, {
+			subtree: true,
+			childList: true,
+		} );
+	} catch ( e ) {
+	}
+} )( document );

modules/images/webp-uploads/load.php

@@ -573,3 +573,48 @@ function webp_uploads_update_featured_image( $html, $post_id, $attachment_id ) {
 	return webp_uploads_img_tag_update_mime_type( $html, 'post_thumbnail_html', $attachment_id );
 }
 add_filter( 'post_thumbnail_html', 'webp_uploads_update_featured_image', 10, 3 );
+
+/**
+ * Adds a fallback mechanism to replace webp images with jpeg alternatives on older browsers.
+ *
+ * @since n.e.x.t
+ */
+function webp_uploads_wepb_fallback() {
+	// Get mime type transofrms for the site.
+	$transforms = webp_uploads_get_upload_image_mime_transforms();
+
+	// We need to add fallback only if jpeg alternatives for the webp images are enabled for the server.
+	$preserve_jpegs_for_jpeg_transforms = isset( $transforms['image/jpeg'] ) && in_array( 'image/jpeg', $transforms['image/jpeg'], true ) && in_array( 'image/webp', $transforms['image/jpeg'], true );
+	$preserve_jpegs_for_webp_transforms = isset( $transforms['image/webp'] ) && in_array( 'image/jpeg', $transforms['image/webp'], true ) && in_array( 'image/webp', $transforms['image/webp'], true );
+	if ( ! $preserve_jpegs_for_jpeg_transforms && ! $preserve_jpegs_for_webp_transforms ) {
+		return;
+	}
+
+	$fallback_url = plugins_url( '/fallback.js', __FILE__ );
+
+	$script = <<<EOL
+( function( d, i, s, p ) {
+	s = d.createElement( s );
+	s.src = '{$fallback_url}';
+
+	i = d.createElement( i );
+	i.src = p + 'UklGRjIAAABXRUJQVlA4ICYAAACyAgCdASoCAAEALmk0mk0iIiIiIgBoSygABc6zbAAA/v56QAAAAA==';
+	i.onload = function() {
+		i.src = p + 'UklGRh4AAABXRUJQVlA4TBEAAAAvAQAAAAfQ//73v/+BiOh/AAA=';
+	};
+
+	i.onerror = function() {
+		d.body.appendChild( s );
+	};
+} )( document, 'img', 'script', 'data:image/webp;base64,' );
+EOL;
+
+	wp_print_inline_script_tag(
+		preg_replace( '/\s+/', '', $script ),
+		array(
+			'id'            => 'webpUploadsFallbackWebpImages',
+			'data-rest-api' => get_rest_url(),
+		)
+	);
+}
+add_action( 'wp_footer', 'webp_uploads_wepb_fallback' );