Why are my JPEG2000 format (.jp2) images showing in Safari but not in Chrome or Brave?

Question

My website is https://www.makarsky.dev , all files are located on Github at https://github.com/jacobmakarsky/jacobmakarsky.github.io

I am linking images in the following format - ./resources/images/forbes.jp2

My images are located in an images folder all inside a resources folder, hence the ./resources/images being used inside my HTML file for all images.

Is this affecting Chrome somehow? I can't find anything anywhere online that explains why these images are only not showing in Chrome and Brave browser. Any help is appreciated, thank you.

Basanite

Is that a JPEG2000 file? If so, that's a pretty obscure format; maybe the other browsers don't support that. What does content-type come back as in the response headers when the image is downloaded? – Ravish

I'm seeing 206 responses for the images which is a Partial Content response, also odd... – Ravish

Answer 1

JPEG2000 is not supported by most browsers. Looks like Safari is the only mainline browser that does. Try converting them to regular JPEGs.

Ravish

Oof thank you. I believe I changed all of the images to JPEG2000 because one of Google's SEO tools recommended it for a higher rating. – Basanite

Oh wow, can't believe they're promoting that format! I think someone made a mistake; it's hardly a "next gen" format! Source: developers.google.com/web/tools/lighthouse/audits/webp – Ravish

It's pretty funny they recommend using this file type but also recommend having fallback photos in PNG JPG format etc., ruining the reason to use the smaller file type since 2 photos would need to be saved instead of 1... – Basanite

@ZeroCool - not necessarily ruining the intended purpose. Both storage space and required bandwidth are important concerns. Having several formats available, with the largest specified last helps on bandwidth. That affects plenty more people than the website's owner, who is concerned about both aspects. ;) – Hara

Answer 2

If you try this

<picture>
<source srcset="./resources/images/forbes.jp2" type="image/jp2"> <!-- safari -->
<source srcset="./resources/images/forbes.webp" type="image/webp"> <!-- multiple -->
<source srcset="./resources/images/forbes.jpg" type="image/jpeg"> <!-- multiple -->
<img src="./resources/images/forbes.jpg" alt="Forbes"> <!-- default -->
</picture>

You can add support for other browsers while still support JP2 images on Safari.

Google is certainly moving towards pushing JPEG2000 as a standard for serving images over a more efficient filesize, but since their own browsers don't even support them yet, you won't have to worry about that for a while.

You can read a bit about Google's Image Best Practices Here

Nicolasanicolau

Definitely a solution but wouldn't this require saving multiple file types of one image, hence canceling out the reason to use a smaller file type? Google is weird. – Basanite

It would almost seem so, but I feel you could implement simple media queries to prevent that from happening. – Nicolasanicolau