Convert PNG to AVIF/WebP on upload

[mxbclang]

As noted in this support topic, add the ability to automatically convert PNG images to WebP.

[erikyo]

I think it's definitely a good idea 💯
if jpgs are not always the ideal source for webp encoding, because the result vary depending on the source quality, pngs would give amazing results -- especially considering that a lossy webp weighs up to 20 times less than a png (png -> webp lossy). This would be a nice performance boost!
Another advantage is that in this case there we have generation loss so, at the same SSIM, the images will weight about the 30% compared to a standard jpg.

there would be two options:

• convert the png to lossy
• convert the png to lossless

My vote goes for png->lossy because the images of websites aren't intended to be 1:1 with the original so we can take the advantage of the compression techniques like chroma subsampling that decimates the image filesize.

Another suggestion is to use the png as the source image and not to create the subsizes in png.
I currently use exactly this way: I upload png images that I keep it only as source in order to create the copy and subsizes in webp. In this way I get much higher quality than a jpg, it takes up less space, and I only have one extra image (the source png).

EDIT: the bug of the webp missing transparency is related to versions before gd 2.1.1 (6 years ago, php 5.6)... I forgot to mention about, but i guess actually isn't a real issue since it's deprecated. here more info

[maisondasilva]

@felixarntz Any news about this, I loved the plugin, but most of my images are .png and that would be very good, I did an online conversion test and saw that the images would be half the size!

Thanks

[nikolasholm]

Any update on this yet?

[ficod]

Any plans on this feature? First post in this thread is dated Jun 13, 2022...
Is there any progress made or it's just "planned for the future"?

[predaytor]

@ficod, yeah, I decided to convert them manually with Imagick:

<?php

namespace App\Media;

/**
 * Set image quality based on mime type.
 *
 * @param int    $quality    The image quality level.
 * @param string $mime_type  The mime type of the image.
 *
 * @return int The modified image quality level.
 */
function set_image_quality($quality, $mime_type)
{
    // Check if the mime type is 'image/webp'
    if ('image/webp' === $mime_type) {
        // Set a higher quality level for 'image/webp'
        return 86;
    }

    // Return the original quality level for other mime types
    return $quality;
}

// Add a filter to set image quality
add_filter('wp_editor_set_quality', __NAMESPACE__ . '\\set_image_quality', 10, 2);

///

/**
 * Scale down and optimize uploading image.
 *
 * @param array $file The uploading file information.
 * @return array The modified file information.
 */
function resize_preupload_image($file)
{
	$allowed_types = array('image/png', 'image/bmp', 'image/jpeg', 'image/jpg', 'image/webp');

	// Check mime type
	// Check if Imagick extension is available
	if (!in_array($file['type'], $allowed_types) || !class_exists('Imagick', false) || !class_exists('ImagickPixel', false)) {
		return $file;
	}

	// Check size limit
	$limit = 24000;
	$size = $file['size'] / 1024;

	if ($size > $limit) {
		$file['error'] = "Image files must be smaller than {$limit}kb";
		return $file;
	}

	// Get the temporary image path
	$filepath = $file['tmp_name'];

	// Get the file's dimensions
	list($image_width, $image_height) = @getimagesize($filepath);

	// Calculate the new dimensions for scaling
	$max_width = <YOUR_MAX_WIDTH_NUMBER>;
	$max_height = intval($image_height * ($max_width / $image_width));

	// Create a new Imagick object from the uploaded image
	$image = new \Imagick($filepath);

	// Get original image size
	$original_size = strlen($image->getImageBlob());

	// Check if image already has webp format (do not change quality)
	if ('image/webp' === $file['type']) {
		$image->setImageCompressionQuality(100);
	} else {
		// Set webp format (support transparency)
		$image->setImageFormat('webp');
		// Set image compression quality
		$image->setImageCompressionQuality(86);
	}

	// Scale down the image to the new dimensions
	$image->resizeImage(min($image_width, $max_width), min($image_height, $max_height), \Imagick::FILTER_CATROM, 1);

	// Get resized (webp converted) image size
	$resized_size = strlen($image->getImageBlob());

	// Check if the resized image has a larger file size than the original
	if ($resized_size >= $original_size) {
		// Original image has smaller or equal size, so keep it
		$image->clear();
		return $file;
	}

	// Save the resized image, overwrite the original file
	$image->writeImage($filepath);
	$file['size'] = $resized_size;
	$image->clear();

	// Return result
	return $file;
}
add_action('wp_handle_upload_prefilter', __NAMESPACE__ . '\\resize_preupload_image', 10, 1);

[adamsilverstein]

Now that we have landed AVIF support in core, the current "WebP Uploads" image plugin could be expanded to include support for AVIF. This would also be good opportunity to add some more flexibility around input formats we handle, or progressive encoding (also new in 6.5).

@ficod, yeah, I decided to convert them manually with Imagick:

@predaytor - Here is are some alternate approaches:

To filter the mime types that the WebP Uploads plugin transforms, use the webp_uploads_upload_image_mime_transforms filter:

add_filter( 'webp_uploads_upload_image_mime_transforms', function( $transforms ) {
	$transforms['image/png'] = array( 'image/png', 'image/webp' );
	return $transforms;
} );

To leverage the core filter directly:

add_filter( 'image_editor_output_format', function( $mappings ) {
	$mappings['image/png'] = 'image/webp';
	return $mappings;
} );

[ficod]

@adamsilverstein @predaytor Thank you all for your replies.

What I don't understand is why this plugin can't receive an official update to solve the issue.
This issue is totally not taken care of, is it considered not important or the project is not being actively developed?

I ended up preferring another plugin: WebP Express

[benoitfouc]

AVIF do not support transparency like the PNG format.

AVIF is a good alternative for JPEG files
And WebP is the best alternative for PNG files because WebP support transparency.

So, this plugin being to be useless since the AVIF is now supported by the core and since this plugin do not support convert PNG files to WebP.

We just need a new plugin to convert automaticly WEBP, JPEG and PNG files into AVIF

[erikyo]

Sorry but this is wrong! avif image format fully support alpha channel (the transparency)
https://avif.io/blog/faq/avif-transparency/

Addy Osmani has written a nice book on the argument, recommended
https://www.smashingmagazine.com/2021/09/modern-image-formats-avif-webp/

[benoitfouc]

Now that the Modern Images Formats plugin will support AVIF format (output), thanks to @adamsilverstein on #1151.
I think the next logical evolution is to support more input like the PNG format.

Adam make this one, for his plugin, what do you think about that setting page ?

Leave the choice for users to convert a JPEG input into AVIF, PNG input into WebP, and WebP input into AVIF (for example) that can be a great evolution for our Modern Images Formats plugin and it will be more consistent with the new plugin name 😉