feat: add smart optimization to image instant optimization

src/admin/js/media-manager/drop-zone.js

@@ -109,7 +109,7 @@ function addDropZoneListenerToMediaManager( targetDocument ) {
 		const optimizedResults = await Promise.all(
 			fileConverters.map( async converter => {
 				try {
-					const result = await converter.convert()
+					const result = await converter.optimize()
 					if ( result.error ) {
 						// eslint-disable-next-line no-console
 						console.warn( result.error )

src/admin/js/media-manager/select-files.js

@@ -89,7 +89,7 @@ function addSelectFilesListenerToFileUploads( targetDocument ) {
 		const optimizedResults = await Promise.all(
 			fileConverters.map( async converter => {
 				try {
-					const result = await converter.convert()
+					const result = await converter.optimize()
 					if ( result.error ) {
 						// eslint-disable-next-line no-console
 						console.warn( result.error )

src/shared/converters/converter-abstract.js

@@ -96,6 +96,15 @@ class Converter {
 		throw new Error( 'convert() must be implemented by subclass' )
 	}
 
+	/**
+	 * Perform smart optimization.
+	 * If a subclass has not implemented this method, perform regular conversion.
+	 * @return {Promise<{file: File|Blob, metadata?: Object}>} Promise resolving with the converted file and optional metadata.
+	 */
+	async optimize() {
+		return await this.convert()
+	}
+
 	/**
 	 * Cancel the current conversion.
 	 * Subclasses should override this to implement actual cancellation logic.

src/shared/converters/image-converter.js

@@ -241,13 +241,13 @@ class ImageConverter extends Converter {
 
 		// Skip if already the desired format
 		const formatInfo = supportedFormats.find( f => f.value === formatTo )
-		if ( ! force && formatInfo && file.type === formatInfo.mimeType ) {
-			return {
-				file,
-				metadata: null,
-				reason: 'same-format',
-			}
-		}
+		// if ( ! force && formatInfo && file.type === formatInfo.mimeType ) {
+		// 	return {
+		// 		file,
+		// 		metadata: null,
+		// 		reason: 'same-format',
+		// 	}
+		// }
 
 		// Check if the browser supports the desired output format
 		const testCanvas = document.createElement( 'canvas' )
@@ -359,7 +359,16 @@ class ImageConverter extends Converter {
 	}
 
 	async optimize() {
-		return await applyFiltersAsync( 'cimo.imageConverter.optimize', this )
+		let result = await applyFiltersAsync( 'cimo.imageConverter.optimize', {
+			file: this.file,
+			metadata: null,
+			reason: 'no-optimizer',
+		}, this )
+
+		if ( result.reason === 'no-optimizer' || ! result.metadata ) {
+			result = await this.convert()
+		}
+		return result
 	}
 }
 

src/shared/converters/index.js

@@ -38,15 +38,19 @@ export const getFileConverter = _file => {
 	}
 
 	if ( file.type.startsWith( 'image/' ) ) {
-		// If the browser doesn't support webp, then we can't convert it.
-		if ( ! isFormatSupported( 'webp' ) ) {
-			return new NullConverter( file )
+		let format = 'webp'
+
+		// If webp is not supported, use the same format of the file.
+		if ( ! isFormatSupported( format ) ) {
+			format = file.type
 		}
+
 		if ( ImageConverter.supportsMimeType( file.type ) ) {
 			return new ImageConverter( file, {
-				format: 'webp',
+				format,
 				quality: window.cimoSettings?.webpQuality || 0.8,
 				maxDimension: window.cimoSettings?.maxImageDimension || 0,
+				initialQuality: 1, // Initial quality for smart optimization.
 			} )
 		}
 	}