Let WordPress support WebP format images - WordPress tutorial

WordPress does not support WebP format image uploads by default. Add the following code to the current theme function template functions.php to solve the upload problem.

1. function webp_filter_mime_types( $array ) {
2. $array[‘webp’] = ‘image/webp’;
3. return $array;
4. }
5. add_filter( ‘mime_types’, ‘webp_filter_mime_types’, 10, 1 );

1. function webp_upload_mimes($existing_mimes) {
2. $existing_mimes[‘webp’] = ‘image/webp’;
3. return $existing_mimes;
4. }
5. add_filter(‘mime_types’, ‘webp_upload_mimes’);

Although you can upload images in WebP format, you cannot see thumbnails in the media list. This is because WordPress uses the wp_generate_attachment_metadata() function to generate image data. The >file_is_displayable_image() function determines whether the file is an image, and the result of determining the WebP image is no, thus interrupting the operation of saving the image data.

This function is located at: wp-admin/includes/image.php

1. function file_is_displayable_image( $path ) {
2. $displayable_image_types = array( IMAGETYPE_GIF, IMAGETYPE_JPEG, IMAGETYPE_PNG, IMAGETYPE_BMP, IMAGETYPE_ICO );
4. $info = @getimagesize( $path );
5. if ( empty( $info ) ) {
6. $result = false;
7. } elseif ( ! in_array( $info[2], $displayable_image_types, true ) ) {
8. $result = false;
9. } else {
10. $result = true;
11. }
13. /**
14. * Filters whether the current image is displayable in the browser.
15. *
16. * @since 2.5.0
17. *
18. * @param bool $result Whether the image can be displayed. Default true.
19. * @param string $path Path to the image.
20. */
21. return apply_filters( ‘file_is_displayable_image’, $result, $path );
22. }

The solution is to add the following code to the theme's functions.php:

1. function webp_file_is_displayable_image($result, $path) {
2. $info = @getimagesize( $path );
3. if($info[‘mime’] == ‘image/webp’) {
4. $result = true;
5. }
6. return $result;
7. }
8. add_filter( ‘file_is_displayable_image’, ‘webp_file_is_displayable_image’, 10, 2 );

1. function webp_is_displayable($result, $path) {
2. if ($result === false) {
3. $displayable_image_types = array( IMAGETYPE_WEBP );
4. $info = @getimagesize( $path );
5. if (empty($info)) {
6. $result = false;
7. } elseif (!in_array($info[2], $displayable_image_types)) {
8. $result = false;
9. } else {
10. $result = true;
11. }
12. }
13. return $result;
14. }
15. add_filter(‘file_is_displayable_image’, ‘webp_is_displayable’, 10, 2);

The illustrations in the text are webp images. Although Qiniu, Youpaiyun, Alibaba Cloud oss, Tencent Cloud cos, etc. currently support WebP, it is found that Apple devices do not support webp images, including the IOS version of WeChat. This is also Maybe it’s because WordPress has never supported webp images.

If you find it troublesome to change the code, you can install the plug-in: Allow Webp image

Recommended site searches: local IP query, Hong Kong cn2 server, domain name query network, site group server rental, Hong Kong's best virtual host, US free space, domain name registration official website, US domain name website, China IP segment, Ministry of Industry and Information Technology website registration,