@elementor/editor-audits 4.4.0-1107 → 4.4.0-1109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elementor/editor-audits",
-  "version": "4.4.0-1107",
+  "version": "4.4.0-1109",
   "private": false,
   "author": "Elementor Team",
   "homepage": "https://elementor.com/",
@@ -39,21 +39,21 @@
     "dev": "tsup --config=../../tsup.dev.ts"
   },
   "dependencies": {
-    "@elementor/editor": "4.4.0-1107",
-    "@elementor/editor-mcp": "4.4.0-1107",
-    "@elementor/editor-app-bar": "4.4.0-1107",
-    "@elementor/editor-elements": "4.4.0-1107",
-    "@elementor/editor-floating-panels": "4.4.0-1107",
-    "@elementor/editor-notifications": "4.4.0-1107",
-    "@elementor/editor-props": "4.4.0-1107",
-    "@elementor/editor-styles": "4.4.0-1107",
-    "@elementor/editor-v1-adapters": "4.4.0-1107",
-    "@elementor/events": "4.4.0-1107",
-    "@elementor/http-client": "4.4.0-1107",
+    "@elementor/editor": "4.4.0-1109",
+    "@elementor/editor-mcp": "4.4.0-1109",
+    "@elementor/editor-app-bar": "4.4.0-1109",
+    "@elementor/editor-elements": "4.4.0-1109",
+    "@elementor/editor-floating-panels": "4.4.0-1109",
+    "@elementor/editor-notifications": "4.4.0-1109",
+    "@elementor/editor-props": "4.4.0-1109",
+    "@elementor/editor-styles": "4.4.0-1109",
+    "@elementor/editor-v1-adapters": "4.4.0-1109",
+    "@elementor/events": "4.4.0-1109",
+    "@elementor/http-client": "4.4.0-1109",
     "@elementor/icons": "~1.77.0",
-    "@elementor/locations": "4.4.0-1107",
-    "@elementor/session": "4.4.0-1107",
-    "@elementor/store": "4.4.0-1107",
+    "@elementor/locations": "4.4.0-1109",
+    "@elementor/session": "4.4.0-1109",
+    "@elementor/store": "4.4.0-1109",
     "@elementor/ui": "1.37.5"
   },
   "peerDependencies": {

package/src/audits/images-inefficient-format.ts

@@ -0,0 +1,67 @@
+import { __ } from '@wordpress/i18n';
+
+import { type Audit, type AuditViolation, type ElementSnapshotNode } from '../types';
+import { walkAtomicBackgroundImageSources } from '../utils/atomic-background-image-sources';
+import { walkAtomicImageSources } from '../utils/atomic-image-sources';
+import { walkBackgroundImageSources } from '../utils/background-image-sources';
+import { type ImageLikeMedia, walkImageLikeSources } from '../utils/image-like-sources';
+import { buildImageSizeKey } from '../utils/image-size-key';
+
+const LEGACY_RASTER_MIME_TYPES = new Set( [ 'image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/tiff' ] );
+
+export const audit: Audit = {
+	id: 'audits/images-inefficient-format',
+	title: __( 'Inefficient image format', 'elementor' ),
+	description: __( "Image isn't served in a modern, efficient format like WebP or AVIF.", 'elementor' ),
+	fixHint: __( 'Convert the image to a modern format like WebP or AVIF, or enable image optimization.', 'elementor' ),
+	categories: [ 'performance' ],
+	severity: 'info',
+	weight: 1,
+	evaluate: ( ctx ) => {
+		const offendingElementIds = new Set< string >();
+		let hasAnyImage = false;
+		let inefficientImageFormatCount = 0;
+
+		const evaluateSource = ( node: ElementSnapshotNode, media: ImageLikeMedia ) => {
+			if ( media.id || media.url ) {
+				hasAnyImage = true;
+			}
+
+			const id = media.id;
+
+			if ( ! id ) {
+				return;
+			}
+
+			const mime = ctx.pageContext.image_sizes[ buildImageSizeKey( { id, size: media.size } ) ]?.mime;
+
+			if ( ! mime || ! LEGACY_RASTER_MIME_TYPES.has( mime ) ) {
+				return;
+			}
+
+			inefficientImageFormatCount++;
+			offendingElementIds.add( node.id );
+		};
+
+		walkImageLikeSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkBackgroundImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkAtomicImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+		walkAtomicBackgroundImageSources( ctx.elements.tree, ( { node, media } ) => evaluateSource( node, media ) );
+
+		if ( ! hasAnyImage ) {
+			return { status: 'skipped', reason: __( 'No images', 'elementor' ) };
+		}
+
+		const violations: AuditViolation[] = Array.from( offendingElementIds ).map( ( elementId ) => ( {
+			auditId: audit.id,
+			elementId,
+			targetHint: 'element-settings' as const,
+			label: __( "Image isn't served in a modern format like WebP or AVIF.", 'elementor' ),
+			externalUrl: ctx.pageContext.image_optimization_plugin_url,
+		} ) );
+
+		return violations.length === 0
+			? { status: 'pass' }
+			: { status: 'fail', violations, metadata: { inefficientImageFormatCount } };
+	},
+};

package/src/register-audits.ts

@@ -9,6 +9,7 @@ import * as googleConsentMode from './audits/google-consent-mode';
 import * as headingStructure from './audits/heading-structure';
 import * as hiddenElements from './audits/hidden-elements';
 import * as imagesAltText from './audits/images-alt-text';
+import * as imagesInefficientFormat from './audits/images-inefficient-format';
 import * as imagesTooLarge from './audits/images-too-large';
 import * as nestedBoxedContainers from './audits/nested-boxed-containers';
 import * as pageExcerpt from './audits/page-excerpt';
@@ -45,6 +46,7 @@ const AUDITS: Audit[] = [
 	headingStructure.audit,
 	imagesAltText.audit,
 	imagesTooLarge.audit,
+	imagesInefficientFormat.audit,
 
 	robotsNoindex.audit,
 

package/src/register-promotions.ts

@@ -80,4 +80,27 @@ export const PROMOTIONS: PromotionConfig[] = [
 		},
 		getCtaUrl: firstFailExternalUrl,
 	},
+	{
+		auditId: 'audits/images-inefficient-format',
+		icon: ShieldHalfFilledIcon,
+		ctaLabel: __( 'Optimize all', 'elementor' ),
+		formatSubtitle: ( run ) => {
+			if ( run.result.status !== 'fail' ) {
+				return null;
+			}
+
+			const count = run.result.metadata?.inefficientImageFormatCount ?? 0;
+
+			if ( count === 0 ) {
+				return null;
+			}
+
+			return sprintf(
+				/* translators: %d: number of images served in an inefficient format. */
+				_n( '%d image', '%d images', count, 'elementor' ),
+				count
+			);
+		},
+		getCtaUrl: firstFailExternalUrl,
+	},
 ];

package/src/types.ts

@@ -23,6 +23,7 @@ export type AuditRun = {
 export type AuditFailMetadata = {
 	missingAltImageCount?: number;
 	oversizedImageCount?: number;
+	inefficientImageFormatCount?: number;
 };
 
 export type AuditResult =