Get 404 not found for webp images on the website

Question

I am replacing the website's images from .jpg to .webp. The way I use is through modernizr to detect whether the browser can accept webp and then set the background-image. But, there's always errors for webp images. Is there anything I haven't set? or what can I do to solve this question?

I already tried to change background-color and it worked.

<script src="js/modernizr-custom.js"></script>
<style type="text/css">
.no-webp .bg {
    background-image: url('Image/img_Head02.jpg');
}
.webp .bg {
    background-image: url('Image/img_Head02.webp');
}

I expect that the images in webp type can show up on the website. But now, there's an error: GET http://test.poct-bio.com/JobW/Image/img_Head02.webp 404 (Not Found)

Hibbitts

Try manage.accuwebhosting.com/knowledgebase/2443/…. You may need to add webp to iis mime types. – Luann

@Luann If I already pushed the website on server, do I still need to add webp to iis mime types? However, I've seen that solution before. But for win10, I don't know where can I find the setting. – Hibbitts

Yes I think you need to do that, but on the server also. The setting is in IIS, not windows itself. – Luann

Answer 1

you have to include mime type in IIS server to support webp type

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".webp" mimeType="image/webp" />
        </staticContent>
    </system.webServer>
</configuration>

web.config

Phrase

This reply should be marked as correct. Thanks a lot! – Cacophony