Why is the browser making multiple requests to the page URL?

Here is a page from my website.

When browsers, such as Firefox and Safari load this page, they are requesting the same document multiple times. See the screenshot from developer tool below.

For the 3 lines pointed above, browser requests and server responses are exactly same except Accept headers are slightly different.

For the 1st request, request header is:

Host: dwbi.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: https://dwbi.org/categories/11/dimensional-model
Cookie: xxxxx
Upgrade-Insecure-Requests: 1
Cache-Control: max-age=0

And for the 2nd and 3rd, request header is exactly same (but different from the 1st - see Accept):

Host: dwbi.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:67.0) Gecko/20100101 Firefox/67.0
Accept: image/webp,*/*
Accept-Language: en-GB,en;q=0.5
Accept-Encoding: gzip, deflate, br
Connection: keep-alive
Referer: https://dwbi.org/pages/35/dimensional-modeling-approach-for-various-slowly-changing-dimensions
Cookie: xxxxx
Cache-Control: max-age=0

These multiple requests are getting registered as 3 different visits in backend. Why browsers are sending these multiple requests and how do I prevent them?

It's because this line in your website:

<img id="modal-image" class="max-w-full w-full1" src="#" style="user-select: auto;">

The source is point to this page, but the request is asking for image type of data.