6

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)

Lisa
  • 69
  • 1
  • 2
  • 1
    Try https://manage.accuwebhosting.com/knowledgebase/2443/How-to-set-MIME-types-for-web-fonts-in-IIS.html. You may need to add `webp` to iis mime types. – VDWWD Apr 18 '19 at 06:54
  • @VDWWD 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. – Lisa Apr 22 '19 at 02:33
  • Yes I think you need to do that, but on the server also. The setting is in IIS, not windows itself. – VDWWD Apr 22 '19 at 11:31

1 Answers1

14

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

derloopkat
  • 6,232
  • 16
  • 38
  • 45
shahid jamal
  • 313
  • 3
  • 8