You converted images to WebP for better performance, but some users see broken images or no images at all. This is common: WebP is supported by modern browsers, but not all, and configuration errors can break images. This guide explains why WebP images are not displaying and how to fix it.
What WebP is
WebP is a modern image format that provides better compression than JPEG and PNG. It is supported by most modern browsers.
Benefits:
— smaller file size;
— good quality;
— supports transparency and animation.
But WebP is not supported by all browsers, and incorrect configuration can break images.
Why WebP matters
WebP reduces image size, improving page speed and Core Web Vitals. But if images do not display, the benefit is lost.
Common issues:
— older browsers do not support WebP;
— server sends wrong MIME type;
— no fallback for unsupported browsers;
— images are corrupted or not uploaded.
Reason 1: browser does not support WebP
The most common issue. Some older browsers do not support WebP.
What to check:
— which browsers are supported;
— do they support WebP;
— is there a fallback.
The fix: use the picture element with fallback, or serve WebP only to supported browsers.
Use image format checker to see which formats are used.
Reason 2: wrong MIME type
If the server sends the wrong Content-Type for WebP, browsers may not display the image.
What to check:
— Content-Type header;
— should be image/webp;
— is it configured correctly.
The fix: configure the server to send image/webp for .webp files.
Reason 3: no fallback
If there is no fallback, users with unsupported browsers see broken images.
What to check:
— is there a fallback image;
— is the picture element used;
— does the fallback work.
The fix: use picture with source and img fallback.
Reason 4: corrupted or missing files
If the WebP file is corrupted or not uploaded, images will not display.
What to check:
— does the file exist;
— is it valid WebP;
— is it accessible.
The fix: re-upload or re-convert the image.
Reason 5: CDN or server configuration
CDN or server may not serve WebP correctly, or may block it.
What to check:
— CDN settings;
— server configuration;
— caching.
The fix: configure CDN and server to serve WebP correctly.
How to diagnose WebP issues
A practical sequence:
— check browser support;
— check Content-Type;
— check fallback;
— check file existence;
— check CDN;
— test in different browsers.
If images do not display, the issue is likely browser support or MIME type. For a broader audit, SEO audit can help verify images, performance and Core Web Vitals in one place.
How to fix WebP issues
Fix steps:
— use picture with fallback;
— configure correct MIME type;
— ensure files exist;
— check CDN;
— test after changes.
FAQ
Why are WebP images not displaying?
Most often because the browser does not support WebP, the MIME type is wrong, or there is no fallback.
Do all browsers support WebP?
Modern browsers do. Older browsers may not. Use fallback for compatibility.
What is the correct MIME type for WebP?
image/webp. Configure the server to send it for .webp files.
How do I add a fallback?
Use the picture element with source type="image/webp" and img fallback.
Does WebP affect SEO?
Indirectly. Smaller images improve speed and Core Web Vitals, which affect rankings.
Can corrupted WebP files cause issues?
Yes. Re-upload or re-convert corrupted files.
Can CDN break WebP?
Yes. Check CDN settings and caching.
Should I use WebP for all images?
Use WebP with fallback. For critical images, ensure compatibility.
How do I check if WebP is used?
Use an image format checker or inspect the HTML.
What if only some images break?
Check those files for corruption, MIME type, or fallback issues.
