Bug 280011 – Add Quirks for overriding the Image Accept-Type for nhl.com

• Component: WebKit Misc.
• Status: RESOLVED CONFIGURATION CHANGED

[Karl Dubost]

Cloudinary worked with Apple to not send anymore JPEG2000 to websites. 
nhl.com seems to still be sending some JPEG2000 to Safari on iOS only.

We can create a quirk to force the server to not send the JPEG2000.


See Bug 269875 for booking.com in the past
https://github.com/WebKit/WebKit/pull/24923


Steps to reproduce:
1. On iPhone with Safari
2. Go to https://nhl.com/

Expected: 
See the images

Actual:
Some images are not visible.

[Radar WebKit Bug Importer]

<rdar://problem/136315336>

[Karl Dubost]

See Also https://github.com/webcompat/web-bugs/issues/141887 for Outreach efforts.

[Karl Dubost]

Example of an HTTP request failing for 
https://media.d3.nhle.com/image/private/t_ratio16_9-size50/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg

```
:method: GET
:scheme: https
:authority: media.d3.nhle.com
:path: /image/private/t_ratio16_9-size50/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg
Accept: image/webp,image/avif,image/jxl,image/heic,image/heic-sequence,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Priority: u=5, i
Referer: https://www.nhl.com/
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.2 Safari/605.1.15
```

which leads to this HTTP response

```
:status: 200
Accept-Ranges: bytes
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Content-Length,ETag,Server-Timing,X-Content-Type-Options
Age: 9131
Cache-Control: public, max-age=31536000
cf-cache-status: HIT
cf-ray: 8c5ce6f0da3b0fcc-LAX
Content-Length: 184683
Content-Type: image/jp2
Date: Thu, 19 Sep 2024 22:09:47 GMT
edge-cache-tag: 171565319839284922343488783462977444242,352914003381548804891280351548701409701,7a7e1c8a0d5c02db22a0dd5b7c64799f,~1~f0fbea064432605bfb4f7bee6ea508e8a63fec23
ETag: "e3ae41649502d350d554dddba7ddf161"
Expires: Fri, 19 Sep 2025 22:09:47 GMT
Last-Modified: Thu, 19 Sep 2024 19:30:06 GMT
Server: cloudflare
Server-Timing: cld-fastly;mitm=acp;dur=1531;cpu=1;start=2024-09-19T19:30:04.133Z;desc=miss,rtt;dur=0,content-info;desc="width=2560,height=1440,bytes=184683,owidth=2568,oheight=1444,obytes=365119,ef=(1,13,17,23)",cloudinary;dur=1519;start=2024-09-19T19:30:04.141Z,cld-id;desc=df2edeae613fe0feb92f386122d35f1a
Strict-Transport-Security: max-age=604800
Timing-Allow-Origin: *
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
x-request-id: df2edeae613fe0feb92f386122d35f1a
```


The markup is 
```
<figure class="d3-o-media-object__figure fa-image -ratio-16-9">
    <picture class="d3-o-media-object__picture">
    <!--[if IE 9]><video style="display: none; "><![endif]-->
    <source 
        media="(min-width:1024px)" 
        srcset="
            https://media.d3.nhle.com/image/private/t_ratio16_9-size50/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 1x, 
            https://media.d3.nhle.com/image/private/t_ratio16_9-size50/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 2x, 
            https://media.d3.nhle.com/image/private/t_ratio16_9-size50/dpr_3.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 3x">
    <source 
        media="(min-width:768px)" 
        srcset="
            https://media.d3.nhle.com/image/private/t_ratio16_9-size40/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 1x, 
            https://media.d3.nhle.com/image/private/t_ratio16_9-size40/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 2x, 
            https://media.d3.nhle.com/image/private/t_ratio16_9-size40/dpr_3.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 3x">
    <source 
        srcset="
            https://media.d3.nhle.com/image/private/t_ratio16_9-size30/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 1x, 
            https://media.d3.nhle.com/image/private/t_ratio16_9-size30/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 2x, 
            https://media.d3.nhle.com/image/private/t_ratio16_9-size30/dpr_3.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg 3x">
    <!--[if IE 9]></video><![endif]-->
    <img alt="LINE DANCING" 
        class="img-responsive" 
        loading="lazy" 
        src="https://media.d3.nhle.com/image/private/t_ratio16_9-size30/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg">
    </picture>
  </figure>
```

for this markup only 
https://media.d3.nhle.com/image/private/t_ratio16_9-size50/dpr_2.0/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg
is sent as JPEG2000 because this is the one requested with source selection

but if I look at understanding which of these are JPEG2000 vs JPEG, this is about half of them.

[Karl Dubost]

Note that a UA override is not solving anything.

I need to test Accept Headers. 

The Accept Header for 

# Safari 

HTML: 
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Image: 
  Accept: image/webp,image/avif,image/jxl,image/heic,image/heic-sequence,video/*;q=0.8,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5


# Firefox 

HTML: 
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Image: 
  Accept: image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5


# Chrome

HTML:
  Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7
Image: 
  Accept: image/avif,image/webp,image/apng,image/svg+xml,image/*,*/*;q=0.8

[Karl Dubost]

I don’t know if something changed recently. 
But I can’t reproduce on macOs and iOS both iPhone and iPad.

It would be good to have other people to confirm. https://nhl.com/

[Karl Dubost]

This has been I believe this has been resolved.