Web server tuning: display WebP images directly in the browser

When switching to WebP images, I encountered a little unexpected behaviour: When linked directly, most browsers immediately start downloading WebP images instead of displaying them directly like JPEGs. This is noticeable in comparison to JPEGs, which are usually seamlessly integrated into the website and simply open in a new tab.

How can you give Jpeg images the same behaviour as WebP images?

The solution is called Content-Disposition: inline header (thanks to @colinardo for the tip).

You need to change the 'Content-Disposition' header to 'inline' for WebP images.

For a Lighttpd server it would look like this:

mimetype.assign += ( '.webp' => 'image/webp' )  
     $HTTP['url'] =~ '\.webp$' {  
     setenv.add-response-header = ( 'content-disposition' => 'inline' )  
}

For the Nginx server:

server {
   # Existing server configuration...
   location ~* \.webp$ {
        add_header Content-Disposition inline;
        add_header Content-Type image/webp;
   }
  # The rest of your server configuration...
}

For the Apache server:

<IfModule mod_headers.c></code
<FilesMatch '\.webp$'> Header set  
Header set Content-disposition 'inline  
Header set Content-Type 'image/webp  
</FilesMatch
</IfModule>

# Here we make sure that the WebP MIME type is set correctly:
AddType image/webp .webp

After changing the configuration, the server must be restarted.

We have just changed this on administrator.de. WebP images are no longer downloaded automatically (unless the browser does not support WebP), but displayed directly.

Here is a test image for you to try out: