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

Exception or error:

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.

How to solve:

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

###

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

Leave a Reply

Your email address will not be published. Required fields are marked *