4

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.

Bonnie
  • 611
  • 8
  • 25
Zero Cool
  • 2,541
  • 2
  • 8
  • 13
  • 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? – Jacob Feb 24 '20 at 19:02
  • I'm seeing `206` responses for the images which is a `Partial Content` response, also odd... – Jacob Feb 24 '20 at 19:04

2 Answers2

4

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

Jacob
  • 77,566
  • 24
  • 149
  • 228
  • 1
    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. – Zero Cool Feb 24 '20 at 19:10
  • 1
    Oh wow, can't believe they're promoting that format! I think someone made a mistake; it's hardly a "next gen" format! Source: https://developers.google.com/web/tools/lighthouse/audits/webp – Jacob Feb 24 '20 at 19:12
  • 1
    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... – Zero Cool Feb 24 '20 at 19:19
  • @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. ;) – enhzflep Feb 25 '20 at 04:50
1

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

cslem
  • 51
  • 9
  • 1
    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. – Zero Cool Feb 24 '20 at 19:21
  • It would almost seem so, but I feel you could implement simple media queries to prevent that from happening. – cslem Feb 24 '20 at 19:26