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/progress-modal.js

@@ -9,18 +9,34 @@ class ProgressModal {
 		this.interval = null
 		this.modal = null
 		this.progressBars = []
-		this._setupModal()
+		this.delayTimeout = null
 	}
 
 	open() {
-		if ( ! this.modal ) {
-			return
-		}
 		if ( this.converters.length === 0 ) {
 			return
 		}
-		this.modal.style.display = 'flex'
-		this._startInterval()
+
+		const delays = this.converters
+			.map( c => c?.progressDelay )
+			.filter( v => typeof v === 'number' && v > 0 )
+
+		// Only delay if all converter opt to delay, to allow
+		// big media files like video to show the progress modal immediately.
+		const shouldDelay = delays.length === this.converters.length
+		const delay = shouldDelay ? Math.max( ...delays ) : 0
+
+		const start = () => {
+			this._setupModal()
+			this.modal.style.display = 'flex'
+			this._startInterval()
+		}
+
+		if ( delay > 0 ) {
+			this.delayTimeout = setTimeout( start, delay )
+		} else {
+			start()
+		}
 	}
 
 	_handleCloseClick() {
@@ -37,6 +53,10 @@ class ProgressModal {
 	}
 
 	close() {
+		if ( this.delayTimeout ) {
+			clearTimeout( this.delayTimeout )
+			this.delayTimeout = null
+		}
 		if ( ! this.modal ) {
 			return
 		}

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

@@ -68,6 +68,17 @@ class Converter {
 		return this._progress
 	}
 
+	/**
+	 * Set the current progress value for this converter. Should be a value
+	 * between 0 and 1 inclusive. Consumers can set this to update progress
+	 * indicators.
+	 *
+	 * @param {number} value - Value between 0 and 1 inclusive.
+	 */
+	set progress( value ) {
+		this._progress = Math.min( 1, Math.max( 0, value ) )
+	}
+
 	/**
 	 * Whether to show a progress indicator for this converter.
 	 *
@@ -79,14 +90,42 @@ class Converter {
 
 	/**
 	 * Instance alias for the showProgress flag so consumers don't need to reach
-	 * into the constructor directly.
+	 * into the constructor directly. Can be overridden by subclasses to allow instance-level
+	 * control over progress display.
 	 *
 	 * @return {boolean} True if this instance should show progress, false otherwise.
 	 */
 	get showProgress() {
+		if ( typeof this.options.showProgress === 'boolean' ) {
+			return this.options.showProgress
+		}
 		return this.constructor.showProgress
 	}
 
+	/**
+	 * Delay before showing the progress indicator, in milliseconds. If the conversion is expected to be very fast
+	 * the delay allows the progress modal to be skipped.
+	 *
+	 * @return {number} Delay in milliseconds before showing the progress indicator.
+	 */
+	static get progressDelay() {
+		return 0
+	}
+
+	/**
+	 * Instance alias for the progressDelay so consumers don't need to reach
+	 * into the constructor directly. Can be overridden by subclasses to allow instance-level
+	 * control over progress delay.
+	 *
+	 * @return {number} Delay in milliseconds before showing the progress indicator.
+	 */
+	get progressDelay() {
+		if ( typeof this.options.progressDelay === 'number' ) {
+			return this.options.progressDelay
+		}
+		return this.constructor.progressDelay
+	}
+
 	/**
 	 * Perform conversion/optimization.
 	 * Subclasses must implement this method.
@@ -96,6 +135,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.