Serve image in next-gen format eventhough they are

Uses-webp-images audit result varies for every scan and I am trying to find out the reason behind it.

Description: LH result varies for every scan i.e. at some times it lists images and their potential savings and at a certain time the audit passes. Note: The image is served in webp format - attached the below snapshot to indicate that the image’s extension is webp and the content type is image/webp

When I try to scan the URL - the first run it passes

"audits": {
   "uses-webp-images": {
     "id": "uses-webp-images",
     "title": "Serve images in next-gen formats",
     "description": "Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. [Learn more](https://web.dev/uses-webp-images/).",
     "score": 1,
     "scoreDisplayMode": "numeric",
     "numericValue": 0,
     "numericUnit": "millisecond",
     "displayValue": "",
     "warnings": [],
     "details": {
       "type": "opportunity",
       "headings": [],
       "items": [],
       "overallSavingsMs": 0,
       "overallSavingsBytes": 0
     }
   }
 }

And now when I scan the same domain - the result varies 😕

"audits": {
    "uses-webp-images": {
      "id": "uses-webp-images",
      "title": "Serve images in next-gen formats",
      "description": "Image formats like JPEG 2000, JPEG XR, and WebP often provide better compression than PNG or JPEG, which means faster downloads and less data consumption. [Learn more](https://web.dev/uses-webp-images/).",
      "score": 0.45,
      "scoreDisplayMode": "numeric",
      "numericValue": 1180,
      "numericUnit": "millisecond",
      "displayValue": "Potential savings of 259 KiB",
      "warnings": [],
      "details": {
        "type": "opportunity",
        "headings": [
          {
            "key": "url",
            "valueType": "thumbnail",
            "label": ""
          },
          {
            "key": "url",
            "valueType": "url",
            "label": "URL"
          },
          {
            "key": "totalBytes",
            "valueType": "bytes",
            "label": "Resource Size"
          },
          {
            "key": "wastedBytes",
            "valueType": "bytes",
            "label": "Potential Savings"
          }
        ],
        "items": [
          {
            "url": "https://www.tidyplaces.com/hubfs/tidy-places-owner.png",
            "fromProtocol": true,
            "isCrossOrigin": false,
            "totalBytes": 232500,
            "wastedBytes": 215728
          },
          {
            "url": "https://www.tidyplaces.com/hubfs/tidy-places-home-advisor-approved.png",
            "fromProtocol": true,
            "isCrossOrigin": false,
            "totalBytes": 28487,
            "wastedBytes": 21947
          },
          {
            "url": "https://www.tidyplaces.com/hubfs/tidy-places-home-advisor-award.jpg",
            "fromProtocol": true,
            "isCrossOrigin": false,
            "totalBytes": 21869,
            "wastedBytes": 18333
          },
          {
            "url": "https://www.tidyplaces.com/hubfs/tidy-places-angies-list-award-2017.png",
            "fromProtocol": true,
            "isCrossOrigin": false,
            "totalBytes": 15081,
            "wastedBytes": 9019
          }
        ],
        "overallSavingsMs": 1180,
        "overallSavingsBytes": 265027
      }
    }
  }
```

Any help on this greatly appreciated 🙏 

[rkirouchenaradjou]

Looking at the network log when this audit has entries, we can see that the images in the failing audit has "content-type": "image/png" response header. This seems to be a bug on the server.

Please consider using a picture element instead; it’s more straightforward than having the server change the type of image. It’s backwards compatible with old browsers too.

{
    "method": "Network.responseReceived",
    "params": {
      "requestId": "8640.127",
      "loaderId": "C6FD7BDE6F5816FD6B8D78F94DC5B9E9",
      "timestamp": 100877.037719,
      "type": "Image",
      "response": {
        "url": "https://www.tidyplaces.com/hubfs/tidy-places-home-advisor-approved.png",
        "status": 200,
        "statusText": "",
        "headers": {
          "cf-request-id": "090c245bf6000030aaaa07a000000001",
          "x-amz-meta-cache-tag": "F-38404097564,P-5554725,FLS-ALL",
          "x-amz-request-id": "01EQ1V84J67DEYBT",
          "x-amz-server-side-encryption": "AES256",
          "edge-cache-tag": "F-38404097564,P-5554725,FLS-ALL",
          "x-amz-replication-status": "COMPLETED",
          "x-hs-cf-lambda": "us-east-1.enforceAclForReadsProd 11",
          "etag": "\"d9388bd5a1f2f51ea44ce9b3e2e52ff1\"",
          "vary": "Accept-Encoding",
          "x-amz-meta-created-unix-time-millis": "1607216982816",
          "content-type": "image/png",
          "cache-control": "s-maxage=1814400, max-age=1209600, stale-while-revalidate=900",
          "x-robots-tag": "all",
          "x-hs-cf-lambda-enforce": "us-east-1.enforceAclForReadsProd 11",
          "date": "Thu, 25 Mar 2021 18:00:15 GMT",
          "via": "1.1 cc66f99a23df85de70ae5abde8d154fb.cloudfront.net (CloudFront)",
          "cf-cache-status": "MISS",
          "nel": "{\"max_age\":604800,\"report_to\":\"cf-nel\"}",
          "x-amz-cf-pop": "MSP50-C1",
          "x-hs-alternate-content-type": "text/plain",
          "x-cache": "RefreshHit from cloudfront",
          "x-amz-meta-index-tag": "all",
          "content-length": "28487",
          "x-amz-id-2": "dYZzKZt73lB8uz+UEX1GMo+Hy0u5Ll7herOZ0b8bguwXG9id+3uDLQ9yNzgJyFEePug/v0AZtr0=",
          "last-modified": "Sun, 06 Dec 2020 01:09:43 GMT",
          "server": "cloudflare",
          "expect-ct": "max-age=604800, report-uri=\"https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct\"",
          "report-to": "{\"endpoints\":[{\"url\":\"https:\\/\\/a.nel.cloudflare.com\\/report?s=bFB2pyspWRb%2FOgGdit8epyfKkIyUrYagboHLz8OjycT5cOrXJfcIyLQ1ewZOjI5%2BcabskSRzKn5s9HspqM2EKuWd%2FSPhZg2YnRmKuKovOylqUfI%3D\"}],\"max_age\":604800,\"group\":\"cf-nel\"}",
          "x-amz-version-id": "RLkoOXJifXli97UYosEo9jimp8325VPt",
          "accept-ranges": "bytes",
          "cf-ray": "635a09a65f1f30aa-ORD",
          "x-amz-cf-id": "shcJfFLctOr3B1h7QTdr4DVtnWanj94FIViEHLNlBnRzhX5OkBmJsw=="
        },
        "mimeType": "image/png",
        "requestHeaders": {
          ":path": "/hubfs/tidy-places-home-advisor-approved.png",
          "sec-fetch-mode": "no-cors",
          "accept-encoding": "gzip, deflate, br",
          "accept-language": "en-US,en;q=0.9",
          "user-agent": "Mozilla/5.0 (Linux; Android 7.0; Moto G (4)) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4143.7 Mobile Safari/537.36 Chrome-Lighthouse",
          "accept": "image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8",
          "referer": "https://www.tidyplaces.com/",
          "sec-fetch-dest": "image",
          ":authority": "www.tidyplaces.com",
          "cookie": "__cfduid=d81c4f537ef808e7500d00a379d1e8b0a1616695214; __cfruid=c1b3740a14cc492acd95def5b109ac9e8247adc0-1616695214",
          ":scheme": "https",
          "sec-fetch-site": "same-origin",
          ":method": "GET"
        },
        ...
  },

It looks like a server issue from our side. Thank you for looking into it!

[adamraine]

Thanks! I can reproduce this on LH 6.3.0, but not on the latest version. This is probably worth a bisect.