feat: add avif support

package.json

@@ -36,6 +36,7 @@
 		"prettier": "^3.3.3"
 	},
 	"dependencies": {
+		"@jsquash/avif": "^2.1.1",
 		"@mediabunny/mp3-encoder": "^1.25.0",
 		"mediabunny": "^1.25.0"
 	}

src/admin/class-admin.php

@@ -56,6 +56,9 @@ public function register_settings() {
 						'schema' => [
 							'type' => 'object',
 							'properties' => [
+								'image_output_format' => [
+									'type' => 'string',
+								],
 								'webp_quality' => [
 									'type' => 'integer',
 								],
@@ -218,6 +221,11 @@ public function sanitize_options( $options ) {
 			$current = get_option( 'cimo_options', [] );
 			$sanitized = is_array( $current ) ? $current : [];
 
+			// Sanitize image output format
+			if ( isset( $options['image_output_format'] ) ) {
+				$sanitized['image_output_format'] = sanitize_text_field( $options['image_output_format'] );
+			}
+
 			// Sanitize webp quality
 			if ( isset( $options['webp_quality'] ) ) {
 				$quality = absint( $options['webp_quality'] );

src/admin/class-script-loader.php

@@ -84,6 +84,7 @@ public function enqueue_cimo_assets() {
 				[
 					'restUrl' => rest_url( 'cimo/v1/' ),
 					'nonce'   => wp_create_nonce( 'wp_rest' ),
+					'imageOutputFormat' => ! empty( $settings['image_output_format'] ) ? $settings['image_output_format'] : 'webp',
 					'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/js/page/admin-settings.js

@@ -15,6 +15,7 @@ const buildType = applyFilters( 'cimo.admin.settings.buildType', 'free' )
 
 const AdminSettings = () => {
 	const [ settings, setSettings ] = useState( {
+		imageOutputFormat: 'webp',
 		webpQuality: 80,
 		maxImageDimension: '',
 		disableWpScaling: 1,
@@ -71,6 +72,7 @@ const AdminSettings = () => {
 			const cimoOptions = data.cimo_options || {}
 			const fetchedSettings = {
 				// Image Optimization settings
+				imageOutputFormat: cimoOptions.image_output_format || 'webp',
 				webpQuality: cimoOptions.webp_quality !== undefined ? cimoOptions.webp_quality : 80,
 				maxImageDimension: cimoOptions.max_image_dimension || '',
 				disableWpScaling: cimoOptions.disable_wp_scaling !== undefined ? cimoOptions.disable_wp_scaling : 1,
@@ -132,6 +134,7 @@ const AdminSettings = () => {
 		setSettings( settings => {
 			return {
 				...settings,
+				imageOutputFormat: 'webp',
 				webpQuality: 80,
 				maxImageDimension: 1920,
 				disableWpScaling: 1,
@@ -145,6 +148,7 @@ const AdminSettings = () => {
 		setSettings( settings => {
 			return {
 				...settings,
+				imageOutputFormat: 'webp',
 				webpQuality: '',
 				maxImageDimension: '',
 				disableWpScaling: 1,
@@ -229,6 +233,7 @@ const AdminSettings = () => {
 				data: {
 					cimo_options: {
 						// Image Optimization settings
+						image_output_format: settings.imageOutputFormat,
 						webp_quality: parseInt( settings.webpQuality ) || 0,
 						max_image_dimension: parseInt( settings.maxImageDimension ) || 0,
 						disable_wp_scaling: settings.disableWpScaling,
@@ -397,6 +402,28 @@ const AdminSettings = () => {
 							</Button>
 						</div>
 
+						<div className="cimo-setting-field">
+							<ToggleGroupControl
+								__nextHasNoMarginBottom
+								__next40pxDefaultSize
+								label={ __( 'Image Output Format', 'cimo-image-optimizer' ) }
+								value={ settings.imageOutputFormat || 'webp' }
+								onChange={ value => handleInputChange( 'imageOutputFormat', value ) }
+								isBlock
+								help={ __( 'Set the resulting format of the optimized files.', 'cimo-image-optimizer' ) }
+							>
+								<ToggleGroupControlOption
+									value="webp"
+									label={ __( 'WebP', 'cimo-image-optimizer' ) }
+								/>
+								<ToggleGroupControlOption
+									value="avif"
+									label={ __( 'AVIF', 'cimo-image-optimizer' ) }
+									disabled={ buildType === 'free' }
+								/>
+							</ToggleGroupControl>
+						</div>
+
 						<div className="cimo-setting-field">
 							<RangeControl
 								id="webpQuality"

src/shared/converters/image-converter.js

@@ -1,10 +1,13 @@
 import { Converter } from './converter-abstract'
+import { encode as encodeAvif } from '@jsquash/avif'
+import { isFormatSupported } from './util'
 
 // Supported output formats
 const supportedFormats = [
 	{ value: 'webp', mimeType: 'image/webp' },
 	{ value: 'jpg', mimeType: 'image/jpeg' },
 	{ value: 'png', mimeType: 'image/png' },
+	{ value: 'avif', mimeType: 'image/avif' },
 ]
 
 /**
@@ -19,6 +22,7 @@ class ImageConverter extends Converter {
 			'image/png',
 			'image/webp',
 			'image/jpg',
+			'image/avif',
 		]
 	}
 
@@ -171,24 +175,36 @@ class ImageConverter extends Converter {
 
 				const format = supportedFormats.find( f => f.value === outputFormat )
 				// Only use quality for lossy formats
-				const q = ( outputFormat === 'webp' || outputFormat === 'jpg' ) ? quality : undefined
-
-				canvas.toBlob( function( blob ) {
-					// Clean up resources
-					URL.revokeObjectURL( objectUrl )
-					objectUrl = null
-
-					// Clear canvas to free memory
-					ctx.clearRect( 0, 0, canvas.width, canvas.height )
-					canvas.width = 0
-					canvas.height = 0
-
-					if ( blob ) {
-						resolve( blob )
-					} else {
-						reject( new Error( 'Failed to convert image' ) )
+				const q = ( outputFormat === 'webp' || outputFormat === 'jpg' || outputFormat === 'avif' ) ? quality : undefined
+
+				if ( outputFormat === 'avif' ) {
+					try {
+						const imageData = ctx.getImageData( 0, 0, width, height )
+						const avifQuality = Math.max( 1, Math.min( 100, Math.round( ( ( q ?? 0.5 ) * 100 ) ) ) )
+						const avifBuffer = await encodeAvif( imageData, { quality: avifQuality } )
+						const avifBlob = new Blob( [ avifBuffer ], { type: 'image/avif' } )
+						resolve( avifBlob )
+					} catch ( e ) {
+						reject( new Error( `Failed to encode AVIF: ${ e instanceof Error ? e.message : 'Unknown error' }` ) )
 					}
-				}, format.mimeType, q )
+				} else {
+					canvas.toBlob( function( blob ) {
+						// Clean up resources
+						URL.revokeObjectURL( objectUrl )
+						objectUrl = null
+
+						// Clear canvas to free memory
+						ctx.clearRect( 0, 0, canvas.width, canvas.height )
+						canvas.width = 0
+						canvas.height = 0
+
+						if ( blob ) {
+							resolve( blob )
+						} else {
+							reject( new Error( 'Failed to convert image' ) )
+						}
+					}, format.mimeType, q )
+				}
 			}
 
 			img.onerror = () => {
@@ -225,8 +241,7 @@ class ImageConverter extends Converter {
 		}
 
 		// Check if the browser supports the desired output format
-		const testCanvas = document.createElement( 'canvas' )
-		if ( formatInfo && ! testCanvas.toDataURL( formatInfo.mimeType ).startsWith( `data:${ formatInfo.mimeType }` ) ) {
+		if ( ! await isFormatSupported( format ) ) {
 			// If not supported, skip conversion and return the original file
 			// eslint-disable-next-line no-console
 			console.error( '[Cimo] ' + format + ' is not supported by the browser, please use another modern browser' )

src/shared/converters/index.js

@@ -1,6 +1,7 @@
 import { ImageConverter } from './image-converter'
 import { NullConverter } from './null-converter'
 import { applyFilters } from '@wordpress/hooks'
+import { isFormatSupported } from './util'
 
 /**
  * Get the file converter for the given file.
@@ -38,13 +39,14 @@ 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' ) ) {
+		const imageOutputFormat = window.cimoSettings?.imageOutputFormat || 'webp'
+		// If the browser doesn't support set output format, then we can't convert it.
+		if ( ! isFormatSupported( imageOutputFormat ) ) {
 			return new NullConverter( file )
 		}
 		if ( ImageConverter.supportsMimeType( file.type ) ) {
 			return new ImageConverter( file, {
-				format: 'webp',
+				format: imageOutputFormat,
 				quality: window.cimoSettings?.webpQuality || 0.8,
 				maxDimension: window.cimoSettings?.maxImageDimension || 0,
 			} )
@@ -67,41 +69,3 @@ export function requiresFileConversion( converters ) {
 	return ! converters.every( converter => converter.constructor.name === 'NullConverter' )
 }
 
-/**
- * Check if a specific image format is supported by the browser
- *
- * @param {string} format - Format name ('webp', 'jpg', 'png', 'avif') or MIME type ('image/webp')
- * @return {boolean} - True if format is supported, false otherwise
- */
-function isFormatSupported( format ) {
-	if ( ! format || typeof format !== 'string' ) {
-		return false
-	}
-
-	// Map format names to MIME types
-	const formatMap = {
-		webp: 'image/webp',
-		avif: 'image/avif',
-	}
-
-	// Get MIME type (either from map or use as-is if already a MIME type)
-	const mimeType = formatMap[ format.toLowerCase() ] || ( format.startsWith( 'image/' ) ? format : null )
-
-	if ( ! mimeType ) {
-		return false
-	}
-
-	// Create a test canvas and check if toDataURL supports the format
-	const canvas = document.createElement( 'canvas' )
-	canvas.width = 1
-	canvas.height = 1
-
-	try {
-		const dataUrl = canvas.toDataURL( mimeType )
-		// If the browser doesn't support the format, it falls back to image/png
-		// Check if the data URL starts with the requested mime type
-		return dataUrl.startsWith( `data:${ mimeType }` )
-	} catch ( e ) {
-		return false
-	}
-}

src/shared/converters/util.js

@@ -0,0 +1,76 @@
+// Cache for format support results to avoid redundant checks
+const formatSupportCache = {}
+
+/**
+ * Check if a specific image format is supported by the browser
+ *
+ * @param {string} format - Format name ('webp', 'jpg', 'png', 'avif') or MIME type ('image/webp')
+ * @return {boolean} - True if format is supported, false otherwise
+ */
+export async function isFormatSupported( format ) {
+	if ( ! format || typeof format !== 'string' ) {
+		return false
+	}
+
+	const key = format.toLowerCase()
+
+	// Return cached result if already checked
+	if ( key in formatSupportCache ) {
+		return formatSupportCache[ key ]
+	}
+
+	// Map format names to MIME types
+	const formatMap = {
+		webp: 'image/webp',
+		avif: 'image/avif',
+	}
+
+	// Get MIME type (either from map or use as-is if already a MIME type)
+	const mimeType =
+		formatMap[ key ] || ( key.startsWith( 'image/' ) ? key : null )
+
+	if ( ! mimeType ) {
+		formatSupportCache[ key ] = false
+		return false
+	}
+
+	let supported = false
+
+	// Check for AVIF decoding support first since it may not be supported even
+	// if the library can encode it. If the browser can't decode it, then
+	// it's not useful to convert to AVIF.
+	if ( key === 'avif' ) {
+		 supported = await supportsAvifDecode()
+	} else {
+		// Create a test canvas and check if toDataURL supports the format
+		const canvas = document.createElement( 'canvas' )
+		canvas.width = 1
+		canvas.height = 1
+
+		try {
+			const dataUrl = canvas.toDataURL( mimeType )
+			// If the browser doesn't support the format, it falls back to image/png
+			// Check if the data URL starts with the requested mime type
+			supported = dataUrl.startsWith( `data:${ mimeType }` )
+
+			return supported
+		} catch ( e ) {
+			supported = false
+		}
+	}
+
+	formatSupportCache[ key ] = supported
+	return supported
+}
+
+function supportsAvifDecode() {
+	return new Promise( resolve => {
+		const img = new Image()
+
+		img.onload = () => resolve( true )
+		img.onerror = () => resolve( false )
+
+		img.src =
+			'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A='
+	} )
+}