Note: I don't understand why some images refuse…

I don't understand why some images refuse to load on my photography site, but only in Safari on macOS… 😔

Some images are not loaded in this page

older note:
Note from 11 May 2022
newer note:
Note from 24 May 2022

15 reactions

15 replies

Damien Roué
Des accents ?
- 18 May 2022, 12:05
- Source
Kevin Farrugia
I have seen this before it occurs because the JPG is saved in an invalid format. Not sure of the exact details why it happens tho. if you optimize the images with (ex: MozJPEG) and re-upload the optimised image (even if it remains identical in size) it should work.
- 18 May 2022, 12:22
- Source
Kevin Farrugia
Tried it with nicolas-hoizey.photo/landscape/300/… and it seems to work.

Note that MacOS doesn't even open the file in Preview.
- 18 May 2022, 12:24
- Source
Benjamin Tricault
Toutes les images en erreur sont au format avif !
- 18 May 2022, 12:29
- Source
Nicolas Hoizey
Hein ? Comment ça ?
- 18 May 2022, 12:57
- Source
Nicolas Hoizey
Oooh, bien vu ! Merci 👍
- 18 May 2022, 13:00
- Source
Nicolas Hoizey
It looks like this is because images are severed in AVIF format, which Safari doesn't support… 😪

Thanks @avenueduweb for noticing this.
- 18 May 2022, 13:03
- Source
Nicolas Hoizey
It looks like this is because images are severed in AVIF format, which Safari doesn't support… 😪Thanks @avenueduweb for noticing this.
- 18 May 2022, 13:06
- Source
Nicolas Hoizey
So, I guess my CDN staking doesn't work.The browser request goes to @Cloudflare (for great TTFB and caching), then to @Netlify (for great DX), then to @cloudinary (for great images optimization), and back.
- 18 May 2022, 13:10
- Source
Damien Roué
A une époque, les images avec accent dans le nom de fichier ne s’affichaient pas sur Safari.
- 18 May 2022, 13:15
- Source
Nicolas Hoizey
If @cloudinary receives the 1st request from a browser supporting AVIF, it will send AVIF, even if the URL contains the pristine JPEG [email protected] acts as a proxy to get cleaner URLs:
https://demo-11ty-netlify-cloudinary.netlify.app/And @Cloudflare is in front.I guess some headers get lots… 🤨
Welcome to this demo!
- 18 May 2022, 13:17
- Source
Nicolas Hoizey
Ah, je ne me souviens pas de ça. Mais non, les URLs d'images sont en minuscules sans accents.
- 18 May 2022, 13:19
- Source
Eugene Musebe 🇬🇭🇰🇪
Safari doesn’t support Avif images yet 🙁.
- 18 May 2022, 16:42
- Source
Eugene Musebe 🇬🇭🇰🇪
The solution to this would be to check the browser your users are using and serve different formats if one is using Safari. With @cloudinary you can serve your users different image formats using the same image 😊
- 18 May 2022, 16:48
- Source
Nicolas Hoizey
Yes, I know, I'm already using Cloudinary, but the issue is probably with Netlify or Cloudflare in front of it.
- 18 May 2022, 16:53
- Source

Note from 18 May 2022