al-folio: Images do not display on macOS Safari with 100% zooming level

Acknowledge the following

• I carefully read and followed the Getting Started guide.
• I read through FAQ and searched through the past issues, none of which addressed my issue.
• The issue I am raising is a potential bug in al-folio and not just a usage question.
  [For usage questions, please post in the Discussions instead of raising an issue.]

Describe the bug My profile and project images do not display on macOS Safari (Version 13.1.3). The display was fine on Chrome and Firefox. And it was also fine on iOS Safari.

Expected behavior Profile images and project card images displayed on the webpage

Screenshots A screenshot of the profile image not displayed on macOS Safari: A screenshot of the project card image not displayed on macOS Safari:

System (please complete the following information):

• OS: macOS
• Browser (and its version) Safari 13.1.3
• Jekyll version: 4.2.1
• Ruby version: 3.0.3p157 (2021-11-24 revision 3fb7d2cadc) [x86_64-darwin19]

Additional context

My profile and project images do not display on macOS Safari (Version 13.1.3). The display was fine on Chrome and Firefox. And it was also fine on iOS Safari. Whenever I use the macOS Safari to open my page, say the about page, I get this error:

[2022-01-23 11:00:17] ERROR `/assets/img/my_pic-480.webp' not found.
[2022-01-23 11:00:18] ERROR `/assets/img/my_pic-1400.webp' not found.
[2022-01-23 11:00:23] ERROR `/assets/img/my_pic-480.webp' not found.

I tried to use different user agents in macOS Safari to open the webpage which is why there are different sized my_pic requested. All of the 480, 800, and 1400 sized images (.webp) cannot be found (but the .jpeg img is definitely in the /img folder). I tried opening up other people’s al-folio webpage on macOS Safari and their images all display properly. Any clue on solving this?