nhl.com - some images are being sent as JPEG2000 instead of JPEG on iOS

[karlcow]

URL: https://nhl.com/

Browser / Version: Safari 18.2
Operating System: Mac OS X 10.15.7
Tested Another Browser: Yes Firefox

Problem type: Design is broken
Description: Images not loaded
Steps to Reproduce:
Steps to reproduce:

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

Expected:
See the images

Actual:
Some images are not visible.

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[karlcow]

There was a similar issue for booking.com in the past but they fixed it.
#133697

The context is the same.

[karlcow]

Safari on iOS is receiving JPEG2000 (extension .jp2) images in raw HTML responses, while Firefox on Android is receiving simple JPEG (extension .jpg).

WebKit removed a little while ago the support for JPEG2000 to align with other browsers.
On https://bugs.webkit.org/show_bug.cgi?id=178758

This issue has been opened to do the outreach effort for encouraging NHL.com technical team to fix the type of images sent to Safari on iOS.

In the meantime Safari/WebKit will deploy a Quirk to fix it.
See https://bugs.webkit.org/show_bug.cgi?id=280011

[karlcow]

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.

[karlcow]

On the other hand Firefox is being sent only webp images.

Request

GET /image/private/t_ratio16_9-size50/f_auto/v1726774090/prd/xo9sccwwnp3ywlwzzmnm.jpg HTTP/2
Host: media.d3.nhle.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:132.0) Gecko/20100101 Firefox/132.0
Accept: image/avif,image/webp,image/png,image/svg+xml,image/*;q=0.8,*/*;q=0.5
Accept-Language: en-US,en;q=0.8,fr-FR;q=0.5,ja;q=0.3
Accept-Encoding: gzip, deflate, br, zstd
Connection: keep-alive
Sec-Fetch-Dest: image
Sec-Fetch-Mode: no-cors
Sec-Fetch-Site: cross-site
Priority: u=5, i
Pragma: no-cache
Cache-Control: no-cache

And HTTP response

HTTP/2 200 
date: Sat, 21 Sep 2024 00:51:31 GMT
content-type: image/webp
content-length: 54486
content-disposition: inline; filename="xo9sccwwnp3ywlwzzmnm.webp"
etag: "44990189aadd99413587e2ffe1ad426c"
last-modified: Thu, 19 Sep 2024 19:30:05 GMT
x-request-id: 66d61ff6bd570908dbb25b94f8d18aa3
strict-transport-security: max-age=604800
cache-control: public, max-age=31536000
edge-cache-tag: 171565319839284922343488783462977444242,384671825956070264572360322003317934362,7a7e1c8a0d5c02db22a0dd5b7c64799f,~1~96ca2e4867ebe38fc1e08551230af43cbadc93c1
server-timing: cld-fastly;mitm=acp;dur=535;cpu=1;start=2024-09-19T19:30:04.182Z;desc=miss,rtt;dur=0,content-info;desc="width=1280,height=720,bytes=54486,owidth=2568,oheight=1444,obytes=365119,ef=(1,13,17,23)",cloudinary;dur=474;start=2024-09-19T19:30:04.214Z,cld-id;desc=66d61ff6bd570908dbb25b94f8d18aa3
timing-allow-origin: *
access-control-allow-origin: *
x-content-type-options: nosniff
access-control-expose-headers: Content-Length,Content-Disposition,ETag,Server-Timing,X-Content-Type-Options
cf-cache-status: HIT
expires: Sun, 21 Sep 2025 00:51:31 GMT
accept-ranges: bytes
vary: Accept-Encoding
server: cloudflare
cf-ray: 8c6611371d7ecfa8-SJC
X-Firefox-Spdy: h2

[karlcow]

And chrome too.

[karlcow]

note that the selection of the image type is not based on the UA string.

[karlcow]

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/