Serve WebP in WordPress without breaking Safari

Serve WebP in WordPress without breaking Safari

Serving WebP images in WordPress improves site speed and reduces bandwidth, but Safari’s limited WebP support can cause images to break or not display properly. The quick fix is to serve WebP images only when the browser supports them, using Accept headers and fallback images for Safari and other incompatible browsers.

Quick Fix: Serve WebP with Accept Headers and Fallbacks

1. Detect if the browser supports WebP using the Accept HTTP header.
2. Serve WebP images only if supported.
3. Provide fallback JPEG/PNG images for browsers like Safari that don’t fully support WebP.
4. Use server-level rules (Apache .htaccess or Nginx config) to automate this detection and fallback.
5. Alternatively, use a WordPress plugin that handles WebP fallback automatically.

Why This Happens

WebP is a modern image format that offers superior compression. Most browsers support it, but Safari added partial WebP support only in recent versions, and some features like transparency or animation may still cause issues. When a WebP image is served directly to Safari without fallback, the image may not render, resulting in broken images on your site.

WordPress by default does not serve WebP images or handle browser compatibility. Without proper server-side detection and fallback, Safari users will see broken images if only WebP versions are served.

Step-by-step: Serve WebP with Fallbacks Using Server Configuration

1. Apache (.htaccess) Configuration

Add the following rules to your WordPress root .htaccess file to serve WebP images only to browsers that support them and fallback to JPEG/PNG otherwise:

# Serve WebP images if browser supports them

  RewriteEngine On

  # Check if browser accepts WebP images
  RewriteCond %{HTTP_ACCEPT} image/webp

  # Check if WebP version of the requested image exists
  RewriteCond %{REQUEST_FILENAME}.webp -f

  # Serve WebP image instead
  RewriteRule ^(.+).(jpe?g|png)$ $1.$2.webp [T=image/webp,E=accept:1]


# Add correct MIME type for WebP

  AddType image/webp .webp

Explanation: This checks if the browser sends Accept: image/webp header and if a WebP version of the requested image exists. If yes, it serves the WebP image instead of JPEG/PNG.

2. Nginx Configuration

Add the following snippet inside your server block to serve WebP images with fallback:

location ~* ^(.+).(jpg|jpeg|png)$ {
    set $webp "";
    if ($http_accept ~* "image/webp") {
        set $webp ".webp";
    }

    # Check if WebP file exists
    if (-f $request_filename$webp) {
        rewrite ^(.+).(jpg|jpeg|png)$ $1.$2.webp break;
    }

    # Serve original if no WebP
    try_files $uri =404;
}

# Add MIME type for WebP
types {
    image/webp webp;
}

Explanation: This configuration checks the Accept header for WebP support and rewrites image requests to WebP versions if they exist. Otherwise, it serves the original JPEG/PNG.

3. WordPress Plugin vs Custom Code

• Plugins: Plugins like WebP Express or Imagify automate WebP generation and fallback handling without manual server config. They are ideal if you prefer a no-code solution.
• Custom Code: Using server-level rules is more lightweight and efficient but requires access to server config and some technical knowledge.

Choose plugins if you want easy setup and automatic WebP conversion. Choose server config if you want full control and minimal overhead.

Works on

Server	Compatibility
Apache	Yes, via .htaccess rules
Nginx	Yes, via server block config
LiteSpeed	Compatible with Apache rules
cPanel / Plesk	Yes, supports editing .htaccess or Nginx config

FAQ

• Q: Does Safari support WebP now?
  A: Safari supports WebP starting from version 14, but some features like transparency or animation may still have issues. Providing fallbacks ensures compatibility.
• Q: Can I serve WebP images without server config?
  A: You can use WordPress plugins that handle WebP conversion and fallback automatically without server config.
• Q: Will this method affect SEO?
  A: No. Serving WebP with proper fallbacks improves page speed and user experience, which can positively impact SEO.
• Q: What if my server doesn’t support .htaccess?
  A: Use Nginx configuration or a plugin to handle WebP serving and fallback.
• Q: How do I generate WebP images?
  A: Use image optimization plugins like Imagify, ShortPixel, or WebP Express, or generate WebP images manually and upload them alongside originals.