Changeset 54086

Timestamp:

09/06/2022 09:13:17 PM (4 years ago)

Author:

adamsilverstein

Message:

Media: Output WebP by default when uploading JPEGs.

Uploaded JPEGs will automatically be converted to WebP sub-sizes instead of JPEG, saving space and making sites faster.

The original JPEG upload is always retained and can be accessed by calling wp_get_original_image_url.

Props azaozz, flixos90.
Fixes #55443.

Location:

trunk

Files:

• src/wp-admin/includes/admin-filters.php (modified) (1 diff)
• src/wp-admin/includes/image-edit.php (modified) (1 diff)
• src/wp-admin/includes/media.php (modified) (1 diff)
• src/wp-includes/class-wp-image-editor.php (modified) (2 diffs)
• tests/phpunit/tests/image/editor.php (modified) (2 diffs)
• tests/phpunit/tests/image/editorGd.php (modified) (2 diffs)
• tests/phpunit/tests/image/editorImagick.php (modified) (2 diffs)
• tests/phpunit/tests/image/functions.php (modified) (1 diff)
• tests/phpunit/tests/image/intermediateSize.php (modified) (2 diffs)
• tests/phpunit/tests/image/resize.php (modified) (1 diff)
• tests/phpunit/tests/media.php (modified) (3 diffs)
• tests/phpunit/tests/post/attachments.php (modified) (1 diff)
• tests/phpunit/tests/rest-api/rest-attachments-controller.php (modified) (2 diffs)

trunk/src/wp-admin/includes/admin-filters.php

@@ -37 +37 @@
 
 add_filter( 'media_upload_tabs', 'update_gallery_tab' );
+
+add_filter( 'image_editor_output_format', 'wp_default_image_output_mapping' );
 
 // Admin color schemes.

trunk/src/wp-admin/includes/image-edit.php

@@ -918 +918 @@
 
         // Save the full-size file, also needed to create sub-sizes.
-        if ( ! wp_save_image_file( $new_path, $img, $post->post_mime_type, $post_id ) ) {
+        $saved = wp_save_image_file( $new_path, $img, $post->post_mime_type, $post_id );
+        if ( ! $saved ) {
                 $return->error = esc_js( __( 'Unable to save the image.' ) );
                 return $return;
         }
+        $new_path = $saved['path'];
 
         if ( 'nothumb' === $target || 'all' === $target || 'full' === $target || $scaled ) {

trunk/src/wp-admin/includes/media.php

@@ -3844 +3844 @@
         }
 }
+
+/**
+ * Filters the default image output mapping.
+ *
+ * With this filter callback, WebP image files will be generated for certain JPEG source files.
+ *
+ * @since 6.1.0
+ *
+ * @param array $output_mapping Map of mime type to output format.
+ * @retun array The adjusted default output mapping.
+ */
+function wp_default_image_output_mapping( $output_mapping ) {
+        $output_mapping['image/jpeg'] = 'image/webp';
+        return $output_mapping;
+}

trunk/src/wp-includes/class-wp-image-editor.php

@@ -425 +425 @@
         }
 
-        /**
-         * Builds an output filename based on current file, and adding proper suffix
-         *
-         * @since 3.5.0
-         *
-         * @param string $suffix
-         * @param string $dest_path
-         * @param string $extension
-         * @return string filename
+                /**
+         * Builds an output filename based on current file, and adding proper suffix.
+         *
+         * @since 3.5.0
+         * @since 6.1.0 Skips adding a suffix when set to an empty string. When the
+         *              file extension being generated doesn't match the image file extension,
+         *              add the extension to the suffix
+         *
+         * @param string $suffix    Optional. Suffix to add to the filename. The default null
+         *                          will result in a 'widthxheight' suffix. Passing
+         *                          an empty string will result in no suffix.
+         * @param string $dest_path Optional. The path to save the file to. The default null
+         *                          will use the image file path.
+         * @param string $extension Optional. The file extension to use. The default null
+         *                          will use the image file extension.
+         * @return string filename The generated file name.
          */
         public function generate_filename( $suffix = null, $dest_path = null, $extension = null ) {
                 // $suffix will be appended to the destination filename, just before the extension.
-                if ( ! $suffix ) {
+                if ( null === $suffix ) {
                         $suffix = $this->get_suffix();
                 }
@@ -458 +465 @@
                 }
 
-                return trailingslashit( $dir ) . "{$name}-{$suffix}.{$new_ext}";
+                if ( empty( $suffix ) ) {
+                        $suffix = '';
+                } else {
+                        $suffix = "-{$suffix}";
+                }
+
+                // When the file extension being generated doesn't match the image file extension,
+                // add the extension to the suffix to ensure a unique file name. Prevents
+                // name conflicts when a single image type can have multiple extensions,
+                // eg. .jpg, .jpeg and .jpe are all valid JPEG extensions.
+                if ( ! empty( $extension ) && $extension !== $ext ) {
+                        $suffix .= "-{$ext}";
+                }
+
+                return trailingslashit( $dir ) . "{$name}{$suffix}.{$new_ext}";
         }
 

trunk/tests/phpunit/tests/image/editor.php

@@ -19 +19 @@
 
                 require_once DIR_TESTDATA . '/../includes/mock-image-editor.php';
+                add_filter( 'image_editor_output_format', '__return_empty_array' );
 
                 // This needs to come after the mock image editor class is loaded.
                 parent::set_up();
+        }
+
+        /**
+         * Tear down the class.
+         */
+        public function tear_down() {
+                remove_filter( 'image_editor_output_format', '__return_empty_array' );
+                parent::tear_down();
         }
 
@@ -227 +236 @@
 
                 // Test with a suffix only.
-                $this->assertSame( 'canola-100x50.png', wp_basename( $editor->generate_filename( null, null, 'png' ) ) );
+                $this->assertSame( 'canola-100x50-jpg.png', wp_basename( $editor->generate_filename( null, null, 'png' ) ) );
 
                 // Combo!
-                $this->assertSame( trailingslashit( realpath( get_temp_dir() ) ) . 'canola-new.png', $editor->generate_filename( 'new', realpath( get_temp_dir() ), 'png' ) );
+                $this->assertSame( trailingslashit( realpath( get_temp_dir() ) ) . 'canola-new-jpg.png', $editor->generate_filename( 'new', realpath( get_temp_dir() ), 'png' ) );
 
                 // Test with a stream destination.

trunk/tests/phpunit/tests/image/editorGd.php

@@ -18 +18 @@
                 require_once ABSPATH . WPINC . '/class-wp-image-editor-gd.php';
 
+                add_filter( 'image_editor_output_format', '__return_empty_array' );
+
                 // This needs to come after the mock image editor class is loaded.
                 parent::set_up();
@@ -30 +32 @@
 
                 $this->remove_added_uploads();
+
+                remove_filter( 'image_editor_output_format', '__return_empty_array' );
 
                 parent::tear_down();

trunk/tests/phpunit/tests/image/editorImagick.php

@@ -19 +19 @@
                 require_once DIR_TESTROOT . '/includes/class-wp-test-stream.php';
 
+                add_filter( 'image_editor_output_format', '__return_empty_array' );
+
                 // This needs to come after the mock image editor class is loaded.
                 parent::set_up();
@@ -31 +33 @@
 
                 $this->remove_added_uploads();
+
+                remove_filter( 'image_editor_output_format', '__return_empty_array' );
 
                 parent::tear_down();

trunk/tests/phpunit/tests/image/functions.php

@@ -26 +26 @@
                         unlink( $file );
                 }
+
+                add_filter( 'image_editor_output_format', '__return_empty_array' );
+        }
+
+        /**
+         * Tear down the class.
+         */
+        public function tear_down() {
+                remove_filter( 'image_editor_output_format', '__return_empty_array' );
+                parent::tear_down();
         }
 

trunk/tests/phpunit/tests/image/intermediateSize.php

@@ -6 +6 @@
  */
 class Tests_Image_Intermediate_Size extends WP_UnitTestCase {
+        /**
+         * Set up the test fixture.
+         */
+        public function set_up() {
+                add_filter( 'image_editor_output_format', '__return_empty_array' );
+
+                parent::set_up();
+        }
+
         public function tear_down() {
                 $this->remove_added_uploads();
@@ -13 +22 @@
                 remove_image_size( 'false-width' );
                 remove_image_size( 'off-by-one' );
+
+                remove_filter( 'image_editor_output_format', '__return_empty_array' );
+
                 parent::tear_down();
         }

trunk/tests/phpunit/tests/image/resize.php

@@ -15 +15 @@
 
                 add_filter( 'wp_image_editors', array( $this, 'wp_image_editors' ) );
+                add_filter( 'image_editor_output_format', '__return_empty_array' );
+        }
+
+        /**
+         * Tear down the class.
+         */
+        public function tear_down() {
+                remove_filter( 'image_editor_output_format', '__return_empty_array' );
+                parent::tear_down();
         }
 

trunk/tests/phpunit/tests/media.php

@@ -34 +34 @@
                 $GLOBALS['_wp_additional_image_sizes'] = array();
 
-                $filename       = DIR_TESTDATA . '/images/' . self::$large_filename;
+                $filename = DIR_TESTDATA . '/images/' . self::$large_filename;
+                add_filter( 'image_editor_output_format', '__return_empty_array' );
                 self::$large_id = $factory->attachment->create_upload_object( $filename );
 
@@ -69 +70 @@
         public static function wpTearDownAfterClass() {
                 $GLOBALS['_wp_additional_image_sizes'] = self::$_sizes;
+                remove_filter( 'image_editor_output_format', '__return_empty_array' );
         }
 
@@ -3618 +3620 @@
                 remove_filter( 'wp_omit_loading_attr_threshold', '__return_null', 100 );
         }
+
+        /**
+         * Test the wp_default_image_output_mapping function.
+         *
+         * @ticket 55443
+         */
+        public function test_wp_default_image_output_mapping() {
+                $mapping = wp_default_image_output_mapping( array() );
+                $this->assertSame( array( 'image/jpeg' => 'image/webp' ), $mapping );
+        }
+
+        /**
+         * Test that wp_default_image_output_mapping doesn't overwrite existing mappings.
+         *
+         * @ticket 55443
+         */
+        public function test_wp_default_image_output_mapping_existing() {
+                $mapping = array( 'mime/png' => 'mime/webp' );
+                $mapping = wp_default_image_output_mapping( $mapping );
+                $this->assertSame(
+                        array(
+                                'mime/png'   => 'mime/webp',
+                                'image/jpeg' => 'image/webp',
+                        ),
+                        $mapping
+                );
+        }
+
+        /**
+         * Test that the image editor default output for JPEGs is WebP.
+         *
+         * @ticket 55443
+         */
+        public function test_wp_image_editor_default_output_maps_to_webp() {
+                remove_filter( 'image_editor_output_format', '__return_empty_array' );
+
+                $editor = wp_get_image_editor( DIR_TESTDATA . '/images/canola.jpg' );
+                $this->assertNotWPError( $editor );
+
+                $resized = $editor->resize( 100, 100, false );
+                $this->assertNotWPError( $resized );
+
+                $saved = $editor->save();
+                $this->assertNotWPError( $saved );
+
+                if ( $editor->supports_mime_type( 'image/webp' ) ) {
+                        $this->assertSame( 'image/webp', $saved['mime-type'] );
+                        $this->assertSame( 'canola-100x75-jpg.webp', $saved['file'] );
+                } else {
+                        $this->assertSame( 'image/jpeg', $saved['mime-type'] );
+                        $this->assertSame( 'canola-100x75.jpg', $saved['file'] );
+                }
+        }
 }
 

trunk/tests/phpunit/tests/post/attachments.php

@@ -7 +7 @@
  */
 class Tests_Post_Attachments extends WP_UnitTestCase {
+        /**
+         * Set up the test fixture.
+         */
+        public function set_up() {
+                add_filter( 'image_editor_output_format', '__return_empty_array' );
+
+                parent::set_up();
+        }
 
         public function tear_down() {
                 // Remove all uploads.
                 $this->remove_added_uploads();
+                remove_filter( 'image_editor_output_format', '__return_empty_array' );
                 parent::tear_down();
         }

trunk/tests/phpunit/tests/rest-api/rest-attachments-controller.php

@@ -94 +94 @@
                 add_filter( 'rest_pre_dispatch', array( $this, 'wpSetUpBeforeRequest' ), 10, 3 );
                 add_filter( 'posts_clauses', array( $this, 'save_posts_clauses' ), 10, 2 );
+                add_filter( 'image_editor_output_format', '__return_empty_array' );
         }
 
@@ -121 +122 @@
                         WP_Image_Editor_Mock::$size_return = null;
                 }
+
+                remove_filter( 'image_editor_output_format', '__return_empty_array' );
 
                 parent::tear_down();