How to save linked pics (within the whole html) from the inspector in devtools?

I have a problem saving my files correctly: I use the firefox devtools as my “work plattform” (which generally works great) and while saving the css-files works fine, I have a problem saving the html:

In a first step I want to save it in a folder on my laptop: “projects>specific project” and then I click on the file “index.html” to overwrite it. Furthermore I choose “website complete” as saving option (cause only saving html didn’t work).

In a second step I want to upload it on github. So I upload the style.css as well as the index.html both out of the “specific project”-folder to my github repo. The pictures are already in my github repo. Now I open the website on github.

Tadaaa everything fine, but no pictures avalaible.

What happened? Over the inspector I look at my html and see: The links to the pictures which I linked to the graphic-adress from github are now completely different.

Instead of the the correct one
<img class="img-prof" src="">
the inspector shows me now
<img class="img-prof" src="index-Dateien/prof.jpg">.

What happened?
When I saved the html from the inspector, a further folder named “index-Dateien” (index-data) was automatically created to store the pictures. Furthermore, devtools apparently changed my links to link to the locale file instead to github now.

The only way I see at the moment, is, to either use VS Code (which I don’t necesseraly want cause there, I don’t see whats happens instantly) instead of devtools or to copy the whole code from devtools to VS Code (or to change the html of the pics after loading it to github.

But maybe anybody has a better idea?

Here the website