feat: add smart optimization to image instant optimization

src/admin/class-admin.php

@@ -137,6 +137,9 @@ public function register_settings() {
 								],
 
 								// Image Optimization settings
+								'smart_optimization' => [
+									'type' => 'integer',
+								],
 								'webp_quality' => [
 									'type' => 'integer',
 								],
@@ -322,6 +325,11 @@ public function sanitize_options( $options ) {
 				$sanitized['thumbnail_sizes'] = array_map( 'sanitize_text_field', $options['thumbnail_sizes'] );
 			}
 
+			// Sanitize smart optimization
+			if ( isset( $options['smart_optimization'] ) ) {
+				$sanitized['smart_optimization'] = $options['smart_optimization'] ? 1 : 0;
+			}
+
 			// Sanitize webp quality
 			if ( isset( $options['webp_quality'] ) ) {
 				$quality = absint( $options['webp_quality'] );

src/admin/class-meta-box.php

@@ -185,11 +185,20 @@ function cimo_get_media_type_label( $mimetype ) {
 
 							// Converted format
 							echo '<li class="cimo-converted">';
-							echo '🏞️ ' . sprintf(
-								/* translators: %s: converted format */
-								esc_html__( 'Converted to %s', 'cimo-image-optimizer' ),
-								'<span class="cimo-value">' . esc_html( $converted_format ) . '</span>'
-							);
+							$converted_format_markup = '<span class="cimo-value">' . esc_html( $converted_format ) . '</span>';
+							if ( ! empty( $cimo['smartOptimized'] ) ) {
+								echo '🏞️ ' . sprintf(
+									/* translators: %s: converted format */
+									esc_html__( 'Smart optimized to %s', 'cimo-image-optimizer' ),
+									$converted_format_markup
+								);
+							} else {
+								echo '🏞️ ' . sprintf(
+									/* translators: %s: converted format */
+									esc_html__( 'Converted to %s', 'cimo-image-optimizer' ),
+									$converted_format_markup
+								);
+							}
 							echo '</li>';
 
 							// Conversion time

src/admin/class-metadata.php

@@ -46,6 +46,7 @@ public function register_rest_route() {
 								'convertedFilesize',
 								'conversionTime',
 								'compressionSavings',
+								'smartOptimized',
 							];
 							if ( ! is_array( $value ) ) {
 								// translators: The %s is the parameter name.
@@ -85,6 +86,7 @@ public function register_rest_route() {
 								'convertedFilesize',
 								'conversionTime',
 								'compressionSavings',
+								'smartOptimized',
 							];
 							$sanitized = [];
 							if ( is_array( $value ) ) {
@@ -98,6 +100,8 @@ public function register_rest_route() {
 												$entry[ $key ] = intval( $item[ $key ] );
 											} elseif ( in_array( $key, [ 'conversionTime', 'compressionSavings' ], true ) ) {
 												$entry[ $key ] = floatval( $item[ $key ] );
+											} elseif ( $key === 'smartOptimized' ) {
+												$entry[ $key ] = ! empty( $item[ $key ] ) ? 1 : 0;
 											} else {
 												$entry[ $key ] = sanitize_text_field( $item[ $key ] );
 											}
@@ -137,6 +141,7 @@ public function save_metadata( $request ) {
 				'convertedFilesize',
 				'conversionTime',
 				'compressionSavings',
+				'smartOptimized',
 			];
 			$sanitized_metadata = [];
 			foreach ( $metadata_array as $item ) {
@@ -149,6 +154,8 @@ public function save_metadata( $request ) {
 							$entry[ $key ] = intval( $item[ $key ] );
 						} elseif ( in_array( $key, [ 'conversionTime', 'compressionSavings' ], true ) ) {
 							$entry[ $key ] = floatval( $item[ $key ] );
+						} elseif ( $key === 'smartOptimized' ) {
+							$entry[ $key ] = ! empty( $item[ $key ] ) ? 1 : 0;
 						} else {
 							$entry[ $key ] = sanitize_text_field( $item[ $key ] );
 						}

src/admin/class-script-loader.php

@@ -90,6 +90,9 @@ public static function enqueue_cimo_assets() {
 					'canManageOptions' => current_user_can( 'manage_options' ),
 					'optimizeAllMedia' => isset( $settings['optimize_all_media'] ) ? (int) $settings['optimize_all_media'] : 0,
 					'isPremium' => CIMO_BUILD === 'premium',
+					'smartOptimization' => CIMO_BUILD === 'premium'
+						? ( isset( $settings['smart_optimization'] ) ? (int) $settings['smart_optimization'] : 1 )
+						: 0,
 					'webpQuality' => ! empty( $settings['webp_quality'] ) ? (int) $settings['webp_quality'] : 80,
 					'maxImageDimension' => ! empty( $settings['max_image_dimension'] ) ? (int) $settings['max_image_dimension'] : 0,
 					'videoOptimizationEnabled' => isset( $settings['video_optimization_enabled'] ) ? (int) $settings['video_optimization_enabled'] : 1,

src/admin/css/admin-page.css

@@ -647,6 +647,26 @@
 	order: 1;
 }
 
+.cimo-smart-optimization-toggle {
+	order: 2;
+
+	~ .cimo-setting-field {
+		order: 3;
+	}
+
+	~ .cimo-webp-quality-range-control {
+		order: 1;
+	}
+
+	~ .cimo-reset-button {
+		order: 10;
+	}
+}
+
+.cimo-is-premium .cimo-smart-optimization-toggle {
+	order: 1;
+}
+
 @keyframes cimo-bulk-optimizer-blink {
 
 	0%, 100% { opacity: 1; }

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

@@ -110,7 +110,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/admin/js/media-manager/sidebar-info.js

@@ -194,9 +194,23 @@ function injectCimoMetadata( {
 	}
 
 	if ( ! isBulkOptimized ) {
+		const formatLabel = convertMimetypeToFormat( customMetadata.convertedFormat )
+		const convertedFormatSpan = `<span class="cimo-value">${ escape( formatLabel ) }</span>`
+		const convertedLineText = customMetadata.smartOptimized
+			? sprintf(
+				/* translators: %s: image format name (e.g. WebP) */
+				__( 'Smart optimized to %s', 'cimo-image-optimizer' ),
+				convertedFormatSpan
+			)
+			: sprintf(
+				/* translators: %s: image format name (e.g. WebP) */
+				__( 'Converted to %s', 'cimo-image-optimizer' ),
+				convertedFormatSpan
+			)
+
 		html += `
 			<li class="cimo-converted">
-				🏞️ Converted to <span class="cimo-value">${ escape( convertMimetypeToFormat( customMetadata.convertedFormat ) ) }</span>
+				🏞️ ${ convertedLineText }
 			</li>
 		`
 

src/admin/js/page/admin-settings.js

@@ -24,6 +24,7 @@ const AdminSettings = () => {
 		thumbnailSizes: [], // Stores DISABLED thumbnail sizes
 
 		// Image optimization settings
+		smartOptimization: 1,
 		webpQuality: 80,
 		maxImageDimension: '',
 
@@ -90,6 +91,7 @@ const AdminSettings = () => {
 				thumbnailSizes: cimoOptions.thumbnail_sizes || [],
 
 				// Image Optimization settings
+				smartOptimization: cimoOptions.smart_optimization !== undefined ? cimoOptions.smart_optimization : 1,
 				webpQuality: cimoOptions.webp_quality !== undefined ? cimoOptions.webp_quality : 80,
 				maxImageDimension: cimoOptions.max_image_dimension || '',
 
@@ -179,6 +181,7 @@ const AdminSettings = () => {
 		setSettings( settings => {
 			return {
 				...settings,
+				smartOptimization: 1,
 				webpQuality: 80,
 				maxImageDimension: 1920,
 			}
@@ -189,6 +192,7 @@ const AdminSettings = () => {
 		setSettings( settings => {
 			return {
 				...settings,
+				smartOptimization: 1,
 				webpQuality: '',
 				maxImageDimension: '',
 			}
@@ -295,6 +299,7 @@ const AdminSettings = () => {
 						thumbnail_sizes: settings.thumbnailSizes,
 
 						// Image Optimization settings
+						smart_optimization: settings.smartOptimization,
 						webp_quality: parseInt( settings.webpQuality ) || 0,
 						max_image_dimension: parseInt( settings.maxImageDimension ) || 0,
 
@@ -570,21 +575,46 @@ const AdminSettings = () => {
 							</Button>
 						</div>
 
-						<div className="cimo-setting-field">
-							<RangeControl
-								id="webpQuality"
-								label={ __( 'WebP Image Quality', 'cimo-image-optimizer' ) }
-								value={ settings.webpQuality || '' }
-								onChange={ value => handleInputChange( 'webpQuality', value || '' ) }
-								min="1"
-								max="100"
-								step="1"
-								__next40pxDefaultSize
-								allowReset
-								initialPosition={ 80 }
-								help={ __( 'Set the quality / compression level for generated .webp images. Default is 80%. Higher values mean better quality and larger file size; lower values reduce file size with more compression but lower quality.', 'cimo-image-optimizer' ) }
+						{ /* Smart Optimization */ }
+						<div className="cimo-setting-field cimo-smart-optimization-toggle">
+							<ToggleControl
+								__nextHasNoMarginBottom
+								label={
+									<span>
+										{ __( 'Smart Optimization', 'cimo-image-optimizer' ) }
+										{ buildType === 'free' && (
+											<span className="cimo-premium-tag">
+												{ __( 'Premium', 'cimo-image-optimizer' ) }
+											</span>
+										) }
+									</span>
+								}
+								checked={ buildType === 'free' ? false : ( settings.smartOptimization === 1 ) }
+								disabled={ buildType === 'free' }
+								onChange={ checked => handleInputChange( 'smartOptimization', checked ? 1 : 0 ) }
+								help={ __( 'Smart Optimization uses our advanced algorithms to choose the best compression and quality settings per image. This adds a small overhead to the upload process, but the results are even smaller file sizes and faster loading times.', 'cimo-image-optimizer' ) }
 							/>
 						</div>
+
+						{ /* WebP Image Quality */ }
+						{ ( buildType === 'free' || settings.smartOptimization === 0 ) && (
+							<div className="cimo-setting-field cimo-webp-quality-range-control">
+								<RangeControl
+									id="webpQuality"
+									label={ __( 'WebP Image Quality', 'cimo-image-optimizer' ) }
+									value={ settings.webpQuality || '' }
+									onChange={ value => handleInputChange( 'webpQuality', value || '' ) }
+									min="1"
+									max="100"
+									step="1"
+									__next40pxDefaultSize
+									allowReset
+									initialPosition={ 80 }
+									help={ __( 'Set the quality / compression level for generated .webp images. Default is 80%. Higher values mean better quality and larger file size; lower values reduce file size with more compression but lower quality.', 'cimo-image-optimizer' ) }
+								/>
+							</div>
+						) }
+
 						{ /* Maximum Image Dimension */ }
 						<div className="cimo-setting-field">
 							<TextControl

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

@@ -215,11 +215,10 @@ class ImageConverter extends Converter {
 
 	/**
 	 * Convert an image file to the desired format and options.
-	 * @param {boolean} [force=false] - Force conversion even if the file is already in the desired format.
-	 * @param {Object}  [options]     - Options for the conversion.
+	 * @param {Object} [options] - Options for the conversion.
 	 * @return {Promise<{file: File|Blob, metadata?: Object}>} Promise resolving to the converted file and optional metadata.
 	 */
-	async convert( force = false, options = {} ) {
+	async convert( options = {} ) {
 		const file = this.file
 		const {
 			quality = this.options?.quality || 0.8,
@@ -239,15 +238,7 @@ 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',
-			}
-		}
 
 		// Check if the browser supports the desired output format
 		const testCanvas = document.createElement( 'canvas' )
@@ -359,7 +350,31 @@ class ImageConverter extends Converter {
 	}
 
 	async optimize() {
-		return await applyFiltersAsync( 'cimo.imageConverter.optimize', this )
+		const smartOptimization =
+			Boolean( window.cimoSettings?.isPremium ) &&
+			String( window.cimoSettings?.smartOptimization ?? '1' ) !== '0'
+		let result = null
+
+		if ( smartOptimization ) {
+			result = await applyFiltersAsync( 'cimo.imageConverter.optimize', {
+				file: this.file,
+				metadata: null,
+				reason: 'no-optimizer',
+			}, this )
+		}
+
+		if ( ! result || result.reason === 'no-optimizer' ) {
+			result = await this.convert()
+		} else if ( result.metadata && typeof result.metadata === 'object' ) {
+			result = {
+				...result,
+				metadata: {
+					...result.metadata,
+					smartOptimized: 1,
+				},
+			}
+		}
+		return result
 	}
 }
 

src/shared/converters/index.js

@@ -38,13 +38,16 @@ 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,
 			} )