Image quality and next-gen formats

By default, the VIP File System automatically converts and serves all images located in a site’s /uploads/ directory as next-gen formats (including *.webp files) to compatible browsers.

Only browsers that have webp in their Accept header are compatible with *.webp files. Requests for *.jpg, *.png, or *.gif in compatible browsers will be served a *.webp format of the image file in the response. As a result, uploading *.webp files is not necessary, nor is it necessary to explicitly reference them in application code.

In addition, a *.webp file that was uploaded to a WordPress site will be automatically converted and served in *.jpg format to a browser that does not have webp in the Accept header. 

Image quality and file formats

The effectiveness of the quality parameter on an image file is dependent on its image file format.

• Image file formats such as PNG and GIF have lossless compression which prevents the file from being further compressed and protects the visual quality of the image.
• JPGs have lossy compression which allows the file to be further compressed but compromises the visual quality of the image as a result.
• The more modern WebP and AVIF file formats can be either lossless or lossy.

The quality parameter is only effective when applied to a lossy image file format and when combined with other transformation parameters.

Override the default quality parameter value

Default values for the quality parameter that is applied to image file types:

• JPEG 89%
• PNG 80%
• WebP 80%

The default value for quality can be overridden with the vip_go_image_resize_pre_args filter. This filter should be added to a plugin in client-mu-plugins/ so that it loads as early as possible, but the filter can also be located in plugins/ or themes/.

This code example demonstrates how to override the default quality parameter value for all images with 75 (75%):

function my_image_quality_filter( $args ) {
	$args['quality'] = 75;
	return $args;
}
add_filter( 'vip_go_image_resize_pre_args', 'my_image_quality_filter', 999 );