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/media-manager/drop-zone.js

@@ -34,8 +34,8 @@ function addDropZoneListenerToMediaManager( targetDocument ) {
 		}
 
 		// Get the file converters for the incoming files.
-		const fileConverters = Array.from( event.dataTransfer.files )
-			.map( file => getFileConverter( file ) )
+		const files = Array.from( event.dataTransfer.files )
+		const fileConverters = await Promise.all( files.map( file => getFileConverter( file ) ) )
 
 		// Do not continue if we do not need to convert any files.
 		if ( ! requiresFileConversion( fileConverters ) ) {

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

@@ -34,8 +34,8 @@ function addSelectFilesListenerToFileUploads( targetDocument ) {
 		}
 
 		// Get the file converters for the incoming files.
-		const fileConverters = Array.from( event.target.files )
-			.map( file => getFileConverter( file ) )
+		const files = Array.from( event.target.files )
+		const fileConverters = await Promise.all( files.map( file => getFileConverter( file ) ) )
 
 		// Do not continue if we do not need to convert any files.
 		if ( ! requiresFileConversion( fileConverters ) ) {

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,12 @@
 import { Converter } from './converter-abstract'
+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 +21,7 @@ class ImageConverter extends Converter {
 			'image/png',
 			'image/webp',
 			'image/jpg',
+			'image/avif',
 		]
 	}
 
@@ -171,24 +174,37 @@ 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 { encode: encodeAvif } = await import( '@jsquash/avif' )
+						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,14 +1,15 @@
 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.
  *
  * @param {File} _file - The file to get the converter for.
  * @return {Converter} - The file converter.
  */
-export const getFileConverter = _file => {
+export const getFileConverter = async _file => {
 	let file = _file
 	// In some cases (e.g., when called from an iframe), the File object may come from a different window context,
 	// so instanceof File can fail even if it's a valid File. Instead, check for file-like shape.
@@ -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 ( ! await 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
-	}
-}