Raju Ginni

wordpress tutorials seo hosting etc

wordpress WebP image upload not working reasons and solutions native support there

By

Some wordpress sites supporting webp images but not another site/ tried digging not worked..

If WebP image upload is not working in WordPress, it can be due to several server- or configuration-related reasons. Below are the common causes and reliable solutions to help you upload WebP images successfully without using a plugin.

 

✅ Summary

Issue Cause Fix
WordPress version too old Below 5.8 Update to 5.8+
MIME type not supported Apache/NGINX missing config Add MIME support
PHP fileinfo disabled File type detection fails Enable fileinfo
Upload MIME restriction WordPress blocks .webp Add MIME filter in functions.php
Corrupted WebP file Malformed or fake file Reconvert properly
Media upload error Server rules or MIME checks Use FTP upload

✅ Common Reasons Why WebP Image Upload Fails in WordPress

1. ❌ WordPress Version Too Old

  • Reason: Native support for .webp was added in WordPress 5.8+.

  • Fix: Upgrade WordPress to the latest version (5.8 or above).

2. ❌ Web Server Doesn’t Recognize WebP MIME Type

  • Error Example: “This file cannot be processed by the web server”

  • Fix: Manually add the MIME type.

➤ Apache:

Add this to your .htaccess file:

apache
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>

➤ NGINX:

In your site’s config:

nginx
types {
image/webp webp;
}

3. ❌ PHP Fileinfo Extension Not Enabled

  • Reason: WordPress uses fileinfo to detect file types. Without it, uploads fail.

  • Fix:

    • If you manage your server: enable fileinfo in php.ini

      ini
      extension=fileinfo

    • If on shared hosting: ask your host to enable the PHP fileinfo extension.

4. ❌ WordPress MIME Type Restriction

  • Reason: WordPress filters out unsupported file types by default.

  • Fix: Allow WebP MIME type in functions.php

➤ Add this code to your theme’s functions.php:

php
function allow_webp_upload($mime_types) {
$mime_types['webp'] = 'image/webp';
return $mime_types;
}
add_filter('upload_mimes', 'allow_webp_upload');

5. ❌ File Is Corrupted or Not a Real WebP

  • Reason: If the WebP file is incorrectly converted or malformed, it may be rejected.

  • Fix: Re-export the image using trusted tools like:

    • Squoosh

    • Photoshop (with WebP plugin)

    • Online tools like CloudConvert

6. ❌ Upload via Gutenberg or Media Fails

  • Reason: Sometimes the media uploader still blocks it due to file checks.

  • Fix: Upload the WebP file via FTP or File Manager, then use its URL in the editor manually.

To upload WebP images in WordPress without a plugin, follow these steps depending on your WordPress version and server configuration:

✅ Method 1: Use WordPress 5.8+ (Built-in Support)

Since WordPress 5.8, WebP image format is natively supported.

Steps:

  1. Log in to your WordPress Admin Dashboard.

  2. Go to Media > Add New.

  3. Upload your .webp image like any other image file.

⚠️ Note: Some servers may still block .webp MIME types (see Method 2 if uploading fails).

✅ Method 2: Allow WebP via functions.php

If you’re getting a MIME type error, allow WebP in your theme by editing functions.php.

Steps:

  1. Open your theme’s functions.php file.

  2. Add this code:

php
function allow_webp_upload($mime_types) {
$mime_types['webp'] = 'image/webp';
return $mime_types;
}
add_filter('upload_mimes', 'allow_webp_upload');

  1. Save the file.

  2. Now, upload the .webp file via Media > Add New.

this worked

wp multisite webp notworking

  • Multisite’s Default Behavior:
    WordPress Multisite defaults to a limited list of allowed file types that doesn’t include WebP by default.
    no other muslitsites working.

✅ Method 3: Verify Server Support

Ensure your server supports WebP:

  • Apache: Enable mod_mime and correct MIME types.

  • NGINX: Add this to your config:

nginx
types {
image/webp webp;
}

✅ Method 4: Use WebP in Theme or Page Builder

If upload doesn’t work but you have the WebP image on your server (via FTP or File Manager):

  1. Upload the .webp image to /wp-content/uploads/ via FTP.

  2. Copy the file URL (e.g., https://yourdomain.com/wp-content/uploads/2025/05/image.webp).

  3. Paste the URL directly in:

    • Image blocks (in HTML mode)

    • <img src="..."> tags in custom HTML

    • CSS background-image rules

“WebP: This file cannot be processed by the web server”

it typically means the MIME type or file handling for WebP is not properly configured on your server, even if you’re using WordPress 5.8 or later (which supports WebP).

Here’s how to fix this error without using any plugin:

wordpress WebP Sorry, you are not allowed to upload this file type.

The “Sorry, you are not allowed to upload this file type” error in WordPress usually occurs because the file’s extension or MIME type is not included in the list of allowed uploads. To fix this, you can modify the wp-config.php file, use a WordPress plugin, or contact your hosting provider. 

Here’s a breakdown of how to address this error:
1. Modifying wp-config.php:
  • Step 1: Access your hosting provider’s file manager (usually in your cPanel or hosting control panel).
  • Step 2: Locate the wp-config.php file within your WordPress installation’s directory (typically within the public_html or www folder).
  • Step 3: Open the file in a text editor.
  • Step 4: Add the line define('ALLOW_UNFILTERED_UPLOADS', true); above the line That's all, stop editing! Happy publishing..
  • Step 5: Save the changes. 

define('ALLOW_UNFILTERED_UPLOADS', true);

not a good idea hackers inject code vulnerable sql,script injection.  its not only one option.

✅ Step-by-Step Fix for WebP Upload Error in WordPress

🔧 1. Add WebP MIME Type in functions.php it worked for me

Add the following code to your theme’s functions.php file to allow WebP uploads:

php
function allow_webp_upload($mime_types) {
$mime_types['webp'] = 'image/webp';
return $mime_types;
}
add_filter('upload_mimes', 'allow_webp_upload');

🧪 2. Check PHP Fileinfo Extension

The error may occur if the PHP fileinfo extension is missing or disabled. This extension helps WordPress detect file types.

✅ Solution:

  • If you control your server (e.g., VPS or localhost), ensure fileinfo is enabled in your PHP config (php.ini):

ini
extension=fileinfo

  • If you’re on shared hosting, ask your host to enable the fileinfo PHP extension.

⚙️ 3. Add WebP Support to .htaccess (Apache only)

If you’re using Apache, add this to your .htaccess to serve WebP correctly:

apache
<IfModule mod_mime.c>
AddType image/webp .webp
</IfModule>

This helps Apache recognize .webp files and serve them with the right headers.

🖼️ 4. Upload via FTP (as a workaround)

If uploading through the admin panel still fails:

  • Use FTP or File Manager to upload the WebP file directly to /wp-content/uploads/2025/05/.

  • Then, use the URL of the image directly in your posts or pages (e.g., via <img> tag or image block with a custom URL).

🧪 Test If WebP Is Working

  • Visit the URL of the uploaded WebP file directly in a browser.

  • Example: https://yourdomain.com/wp-content/uploads/2025/05/image.webp

  • If it loads in the browser, it’s working.

✅ Summary

Step Action
1 Add allow_webp_upload code to functions.php
2 Ensure PHP fileinfo is enabled
3 Add MIME type to .htaccess (for Apache)
4 Use FTP to upload directly if needed

Hostinger business hosting does not support webp

but premium package supporting direclty upload webp so, i am going dig php extnesions.

hpanel hostinger/websites/wordpress.2/advanced/php-configuration

php extensions for webp

To work with WebP images in PHP, you’ll primarily need the GD extension, which is built into PHP and provides a wide range of image manipulation functions. Additionally, the GD library must be configured with WebP support. If you have PHP 8.1 or later, the GD extension also supports lossless WebP encoding, and declares a IMG_WEBP_LOSSLESS constant

but gd enabled aleary so

same extnesions in hosting packages.  another site working in same hostinger package.

LScache vs wp rocket

# BEGIN WP Rocket v3.15.8
# Use UTF-8 encoding for anything served text/plain or text/html
AddDefaultCharset UTF-8
# Force UTF-8 for a number of file formats
<IfModule mod_mime.c>
AddCharset UTF-8 .atom .css .js .json .rss .vtt .xml
</IfModule>

# FileETag None is not enough for every server.
<IfModule mod_headers.c>
Header unset ETag
</IfModule>

# Since we’re sending far-future expires, we don’t need ETags for static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None

<IfModule mod_alias.c>
<FilesMatch “\.(html|htm|rtf|rtx|txt|xsd|xsl|xml)$”>
<IfModule mod_headers.c>
Header set X-Powered-By “WP Rocket/3.15.8”
Header unset Pragma
Header append Cache-Control “public”
Header unset Last-Modified
</IfModule>
</FilesMatch>

<FilesMatch “\.(css|htc|js|asf|asx|wax|wmv|wmx|avi|bmp|class|divx|doc|docx|eot|exe|gif|gz|gzip|ico|jpg|jpeg|jpe|json|mdb|mid|midi|mov|qt|mp3|m4a|mp4|m4v|mpeg|mpg|mpe|mpp|otf|odb|odc|odf|odg|odp|ods|odt|ogg|pdf|png|pot|pps|ppt|pptx|ra|ram|svg|svgz|swf|tar|tif|tiff|ttf|ttc|wav|wma|wri|xla|xls|xlsx|xlt|xlw|zip)$”>
<IfModule mod_headers.c>
Header unset Pragma
Header append Cache-Control “public”
</IfModule>
</FilesMatch>
</IfModule>

<IfModule mod_mime.c>
AddType image/avif avif
AddType image/avif-sequence avifs
</IfModule>
# Expires headers (for better cache control)
<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault “access plus 1 month”
# cache.appcache needs re-requests in FF 3.6 (thanks Remy ~Introducing HTML5)
ExpiresByType text/cache-manifest “access plus 0 seconds”
# Your document html
ExpiresByType text/html “access plus 0 seconds”
# Data
ExpiresByType text/xml “access plus 0 seconds”
ExpiresByType application/xml “access plus 0 seconds”
ExpiresByType application/json “access plus 0 seconds”
# Feed
ExpiresByType application/rss+xml “access plus 1 hour”
ExpiresByType application/atom+xml “access plus 1 hour”
# Favicon (cannot be renamed)
ExpiresByType image/x-icon “access plus 1 week”
# Media: images, video, audio
ExpiresByType image/gif “access plus 4 months”
ExpiresByType image/png “access plus 4 months”
ExpiresByType image/jpeg “access plus 4 months”
ExpiresByType image/webp “access plus 4 months”
ExpiresByType video/ogg “access plus 4 months”
ExpiresByType audio/ogg “access plus 4 months”
ExpiresByType video/mp4 “access plus 4 months”
ExpiresByType video/webm “access plus 4 months”
ExpiresByType image/avif “access plus 4 months”
ExpiresByType image/avif-sequence “access plus 4 months”
# HTC files (css3pie)
ExpiresByType text/x-component “access plus 1 month”
# Webfonts
ExpiresByType font/ttf “access plus 4 months”
ExpiresByType font/otf “access plus 4 months”
ExpiresByType font/woff “access plus 4 months”
ExpiresByType font/woff2 “access plus 4 months”
ExpiresByType image/svg+xml “access plus 4 months”
ExpiresByType application/vnd.ms-fontobject “access plus 1 month”
# CSS and JavaScript
ExpiresByType text/css “access plus 1 year”
ExpiresByType application/javascript “access plus 1 year”
</IfModule>
# Gzip compression
<IfModule mod_deflate.c>
# Active compression
SetOutputFilter DEFLATE
# Force deflate for mangled headers
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-Encoding
# Don’t compress images and other uncompressible content
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png|rar|zip|exe|flv|mov|wma|mp3|avi|swf|mp?g|mp4|webm|webp|pdf)$ no-gzip dont-vary
</IfModule>
</IfModule>

# Compress all output labeled with one of the following MIME-types
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
<IfModule mod_headers.c>
Header append Vary: Accept-Encoding
</IfModule>
</IfModule>

# END WP Rocket

 

# BEGIN NON_LSCACHE
## LITESPEED WP CACHE PLUGIN – Do not edit the contents of this block! ##
### marker BROWSER CACHE start ###
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType application/pdf A31557600
ExpiresByType image/x-icon A31557600
ExpiresByType image/vnd.microsoft.icon A31557600
ExpiresByType image/svg+xml A31557600

ExpiresByType image/jpg A31557600
ExpiresByType image/jpeg A31557600
ExpiresByType image/png A31557600
ExpiresByType image/gif A31557600
ExpiresByType image/webp A31557600
ExpiresByType image/avif A31557600

ExpiresByType video/ogg A31557600
ExpiresByType audio/ogg A31557600
ExpiresByType video/mp4 A31557600
ExpiresByType video/webm A31557600

ExpiresByType text/css A31557600
ExpiresByType text/javascript A31557600
ExpiresByType application/javascript A31557600
ExpiresByType application/x-javascript A31557600

ExpiresByType application/x-font-ttf A31557600
ExpiresByType application/x-font-woff A31557600
ExpiresByType application/font-woff A31557600
ExpiresByType application/font-woff2 A31557600
ExpiresByType application/vnd.ms-fontobject A31557600
ExpiresByType font/ttf A31557600
ExpiresByType font/otf A31557600
ExpiresByType font/woff A31557600
ExpiresByType font/woff2 A31557600

</IfModule>
### marker BROWSER CACHE end ###

## LITESPEED WP CACHE PLUGIN – Do not edit the contents of this block! ##
# END NON_LSCACHE
# BEGIN LSCACHE
## LITESPEED WP CACHE PLUGIN – Do not edit the contents of this block! ##
<IfModule LiteSpeed>
RewriteEngine on
CacheLookup on
RewriteRule .* – [E=Cache-Control:no-autoflush]
RewriteRule litespeed/debug/.*\.log$ – [F,L]
RewriteRule \.litespeed_conf\.dat – [F,L]

### marker ASYNC start ###
RewriteCond %{REQUEST_URI} /wp-admin/admin-ajax\.php
RewriteCond %{QUERY_STRING} action=async_litespeed
RewriteRule .* – [E=noabort:1]
### marker ASYNC end ###

### marker MOBILE start ###
RewriteCond %{HTTP_USER_AGENT} Mobile|Android|Silk/|Kindle|BlackBerry|Opera\ Mini|Opera\ Mobi [NC]
RewriteRule .* – [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+ismobile]
### marker MOBILE end ###

### marker CACHE RESOURCE start ###
RewriteRule wp-content/.*/[^/]*(responsive|css|js|dynamic|loader|fonts)\.php – [E=cache-control:max-age=3600]
### marker CACHE RESOURCE end ###

### marker WEBP start ###
RewriteCond %{HTTP_ACCEPT} “image/webp”
RewriteRule .* – [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]
RewriteCond %{HTTP_USER_AGENT} iPhone.*Version/(\d{2}).*Safari
RewriteCond %1 >13
RewriteRule .* – [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]
RewriteCond %{HTTP_USER_AGENT} Firefox/([0-9]+)
RewriteCond %1 >=65
RewriteRule .* – [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]
### marker WEBP end ###

### marker DROPQS start ###
CacheKeyModify -qs:fbclid
CacheKeyModify -qs:gclid
CacheKeyModify -qs:utm*
CacheKeyModify -qs:_ga
### marker DROPQS end ###

</IfModule>
## LITESPEED WP CACHE PLUGIN – Do not edit the contents of this block! ##
# END LSCACHE

 

# BEGIN WP-Optimize Gzip compression
<IfModule mod_filter.c>
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddType application/vnd.ms-fontobject .eot
AddType font/ttf .ttf
AddType font/otf .otf
AddType font/x-woff .woff
AddType image/svg+xml .svg

AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-woff
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/woff
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
<IfModule mod_headers.c>
Header append Vary User-Agent
</IfModule>
</IfModule>
</IfModule>
# END WP-Optimize Gzip compression

The unfiltered_upload permission is closely related to unfiltered_html. If this permission is given to a user, they can upload files are NOT on the WordPress whitelist:

FAQs

Q: What WordPress version supports WebP?
A: Native support starts from WordPress 5.8 onward.

Q: Why is WordPress not accepting my WebP upload?
A: It may be due to server MIME type restrictions. Use the functions.php code above to fix it.

Q: Can I display WebP in all browsers?
A: Most modern browsers (Chrome, Firefox, Edge, Safari 14+) support WebP.