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 –
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.
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