Skip to content

Commit

Permalink
Merge pull request #1421 from adamsilverstein/add/png-conversion
Browse files Browse the repository at this point in the history 
Convert uploaded PNG files to AVIF or WebP
  • Loading branch information
@adamsilverstein
adamsilverstein authored Sep 4, 2024
2 parents bbd874d + 74003e0 commit 9d93a06
Show file tree
Hide file tree
Showing 4 changed files with 22 additions and 14 deletions.
10 changes: 7 additions & 3 deletions plugins/webp-uploads/helper.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
*
* @since 1.0.0
* @since 2.0.0 Added support for AVIF.
* @since n.e.x.t Added support for PNG.
*
* @return array<string, array<string>> An array of valid mime types, where the key is the mime type and the value is the extension type.
*/
Expand All @@ -29,12 +30,14 @@ function webp_uploads_get_upload_image_mime_transforms(): array {
'image/jpeg' => array( 'image/' . $output_format ),
'image/webp' => array( 'image/webp' ),
'image/avif' => array( 'image/avif' ),
'image/png' => array( 'image/' . $output_format ),
);

// Check setting for whether to generate both JPEG and the modern output format.
if ( webp_uploads_is_jpeg_fallback_enabled() ) {
if ( webp_uploads_is_fallback_enabled() ) {
$default_transforms = array(
'image/jpeg' => array( 'image/jpeg', 'image/' . $output_format ),
'image/png' => array( 'image/png', 'image/' . $output_format ),
'image/' . $output_format => array( 'image/' . $output_format, 'image/jpeg' ),
);
}
Expand Down Expand Up @@ -393,17 +396,18 @@ function webp_uploads_sanitize_image_format( $image_format ): string {
* @return bool True if the option is enabled, false otherwise.
*/
function webp_uploads_is_picture_element_enabled(): bool {
return webp_uploads_is_jpeg_fallback_enabled() && (bool) get_option( 'webp_uploads_use_picture_element', false );
return webp_uploads_is_fallback_enabled() && (bool) get_option( 'webp_uploads_use_picture_element', false );
}

/**
* Checks if the `perflab_generate_webp_and_jpeg` option is enabled.
*
* @since 2.0.0
* @since n.e.x.t Renamed to webp_uploads_is_fallback_enabled().
*
* @return bool True if the option is enabled, false otherwise.
*/
function webp_uploads_is_jpeg_fallback_enabled(): bool {
function webp_uploads_is_fallback_enabled(): bool {
return (bool) get_option( 'perflab_generate_webp_and_jpeg' );
}

Expand Down
2 changes: 1 addition & 1 deletion plugins/webp-uploads/readme.txt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ Converts images to more modern formats such as WebP or AVIF during upload.

This plugin adds WebP and AVIF support for media uploads within the WordPress application. By default, AVIF images will be generated if supported on the hosting server, otherwise WebP will be used as the output format. When both formats are available, the output format can be selected under `Settings > Media`. Modern images will be generated only for new uploads, pre-existing images will only converted to a modern format if images are regenerated. Images can be regenerated with a plugin like [Regenerate Thumbnails](https://wordpress.org/plugins/regenerate-thumbnails/) or via WP-CLI with the `wp media regenerate` [command](https://developer.wordpress.org/cli/commands/media/regenerate/).

By default, only modern image format sub-sizes will be generated for JPEG uploads - only the original uploaded file will still exist as a JPEG image, generated image sizes use be WebP or AVIF files. To change this behavior, there is a checkbox in `Settings > Media` "Also output JPEG" that - when checked - will result in the plugin generating both JPEG and WebP or AVIF images for every sub-size (noting again that this will only affect newly uploaded images, i.e. after making said change).
By default, only modern image format sub-sizes will be generated for JPEG or PNG uploads - only the original uploaded file will still exist as a JPEG/PNG image, generated image sizes will be WebP or AVIF files. To change this behavior, there is a checkbox in `Settings > Media` "Output fallback images" that - when checked - will result in the plugin generating both the original format as well as WebP or AVIF images for every sub-size (noting again that this will only affect newly uploaded images, i.e. after making said change).

_This plugin was formerly known as WebP Uploads._

Expand Down
20 changes: 10 additions & 10 deletions plugins/webp-uploads/settings.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,10 +86,10 @@ function webp_uploads_add_media_settings_fields(): void {
return;
}

// Add JPEG Output settings field.
// Add fallback image output settings field.
add_settings_field(
'perflab_generate_webp_and_jpeg',
__( 'Also output JPEG', 'webp-uploads' ),
__( 'Output fallback images', 'webp-uploads' ),
'webp_uploads_generate_webp_jpeg_setting_callback',
'media',
'perflab_modern_image_format_settings',
Expand Down Expand Up @@ -145,7 +145,7 @@ function webp_uploads_generate_avif_webp_setting_callback(): void {
<label for="perflab_modern_image_format">
<?php esc_html_e( 'Generate images in this format', 'webp-uploads' ); ?>
</label>
<p class="description" id="perflab_modern_image_format_description"><?php esc_html_e( 'Select the format to use when generating new images from uploaded JPEGs.', 'webp-uploads' ); ?></p>
<p class="description" id="perflab_modern_image_format_description"><?php esc_html_e( 'Select the format to use when generating new images from uploaded images.', 'webp-uploads' ); ?></p>
<?php if ( ! $avif_supported ) : ?>
<br />
<div class="notice notice-warning inline">
Expand All @@ -172,9 +172,9 @@ function webp_uploads_generate_webp_jpeg_setting_callback(): void {
?>
<label for="perflab_generate_webp_and_jpeg">
<input name="perflab_generate_webp_and_jpeg" type="checkbox" id="perflab_generate_webp_and_jpeg" aria-describedby="perflab_generate_webp_and_jpeg_description" value="1"<?php checked( '1', get_option( 'perflab_generate_webp_and_jpeg' ) ); ?> />
<?php esc_html_e( 'Output JPEG images in addition to the modern format', 'webp-uploads' ); ?>
<?php esc_html_e( 'Also generate fallback images in the original upload format', 'webp-uploads' ); ?>
</label>
<p class="description" id="perflab_generate_webp_and_jpeg_description"><?php esc_html_e( 'Enabling JPEG output can improve compatibility, but will increase the filesystem storage use of your images.', 'webp-uploads' ); ?></p>
<p class="description" id="perflab_generate_webp_and_jpeg_description"><?php esc_html_e( 'Enabling fallback image output can improve compatibility, but will increase the filesystem storage use of your images.', 'webp-uploads' ); ?></p>
<?php
}

Expand All @@ -186,7 +186,7 @@ function webp_uploads_generate_webp_jpeg_setting_callback(): void {
function webp_uploads_use_picture_element_callback(): void {
// Picture element support requires the JPEG output to be enabled.
$picture_element_option = 1 === (int) get_option( 'webp_uploads_use_picture_element', 0 );
$jpeg_fallback_enabled = webp_uploads_is_jpeg_fallback_enabled();
$jpeg_fallback_enabled = webp_uploads_is_fallback_enabled();
$picture_element_hidden_id = 'webp_uploads_use_picture_element_hidden';
?>
<style>
Expand All @@ -196,7 +196,7 @@ function webp_uploads_use_picture_element_callback(): void {
}
</style>
<div id="webp_uploads_picture_element_notice" class="notice notice-info inline" <?php echo $jpeg_fallback_enabled ? 'hidden' : ''; ?>>
<p><?php esc_html_e( 'This setting requires JPEG also be output as a fallback option.', 'webp-uploads' ); ?></p>
<p><?php esc_html_e( 'This setting requires fallback image output to be enabled.', 'webp-uploads' ); ?></p>
</div>
<div id="webp_uploads_picture_element_fieldset" class="<?php echo ! $jpeg_fallback_enabled ? 'disabled' : ''; ?>">
<label for="webp_uploads_use_picture_element" id="webp_uploads_use_picture_element_label">
Expand Down Expand Up @@ -228,9 +228,9 @@ function webp_uploads_use_picture_element_callback(): void {
?>
<em><?php esc_html_e( '(experimental)', 'webp-uploads' ); ?></em>
</label>
<p class="description" id="webp_uploads_use_picture_element_description"><?php esc_html_e( 'The picture element serves a modern image format with a fallback to JPEG. Warning: Make sure you test your theme and plugins for compatibility. In particular, CSS selectors will not match images when using the child combinator (e.g. figure > img).', 'webp-uploads' ); ?></p>
<p class="description" id="webp_uploads_use_picture_element_description"><?php esc_html_e( 'The picture element serves a modern image format with a fallback to the original upload format. Warning: Make sure you test your theme and plugins for compatibility. In particular, CSS selectors will not match images when using the child combinator (e.g. figure > img).', 'webp-uploads' ); ?></p>
<div id="webp_uploads_jpeg_fallback_notice" class="notice notice-info inline" <?php echo $picture_element_option ? '' : 'hidden'; ?>>
<p><?php esc_html_e( 'Picture elements will only be used when JPEG fallback images are available. So this will not apply to any images you may have uploaded while the "Also generate JPEG" setting was disabled.', 'webp-uploads' ); ?></p>
<p><?php esc_html_e( 'Picture elements will only be used when fallback images are available. So this will only apply to images you have uploaded while the "Also generate fallback images" setting was enabled.', 'webp-uploads' ); ?></p>
</div>
</div>
<script>
Expand All @@ -239,7 +239,7 @@ function webp_uploads_use_picture_element_callback(): void {
document.getElementById( 'webp_uploads_jpeg_fallback_notice' ).hidden = ! this.checked;
} );

// Listen for clicks on the JPEG output checkbox, enabling/disabling the
// Listen for clicks on the fallback output checkbox, enabling/disabling the
// picture element checkbox accordingly.
document.getElementById( 'perflab_generate_webp_and_jpeg' ).addEventListener( 'change', function () {
document.querySelector( '.webp-uploads-use-picture-element' ).classList.toggle( 'webp-uploads-disabled', ! this.checked );
Expand Down
4 changes: 4 additions & 0 deletions plugins/webp-uploads/tests/test-helper.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -367,12 +367,14 @@ public function test_it_should_return_default_transforms_when_filter_returns_non
'image/jpeg' => array( 'image/avif' ),
'image/webp' => array( 'image/webp' ),
'image/avif' => array( 'image/avif' ),
'image/png' => array( 'image/avif' ),
);
} else {
$default_transforms = array(
'image/jpeg' => array( 'image/webp' ),
'image/webp' => array( 'image/webp' ),
'image/avif' => array( 'image/avif' ),
'image/png' => array( 'image/webp' ),
);
}

Expand Down Expand Up @@ -431,6 +433,7 @@ public function test_it_should_return_jpeg_and_webp_transforms_when_option_gener
$this->assertSame(
array(
'image/jpeg' => array( 'image/jpeg', 'image/avif' ),
'image/png' => array( 'image/png', 'image/avif' ),
'image/avif' => array( 'image/avif', 'image/jpeg' ),
),
$transforms
Expand All @@ -439,6 +442,7 @@ public function test_it_should_return_jpeg_and_webp_transforms_when_option_gener
$this->assertSame(
array(
'image/jpeg' => array( 'image/jpeg', 'image/webp' ),
'image/png' => array( 'image/png', 'image/webp' ),
'image/webp' => array( 'image/webp', 'image/jpeg' ),
),
$transforms
Expand Down

0 comments on commit 9d93a06

Please sign in to comment.