The short answer is you must encode any UTF-8 text before you can use them in your HTML code for URLs, don't directly use the UTF-8 text as you did.
For the Piłka nożna.png
example you posted, it should be percent encoded like this:
<img src="images/ikony/Pi%C5%82ka+no%C5%BCna.png">
Details
Use encoding to ensure the browser correctly finds the file. HTML standards are supposed to support UTF-8 percent encoding to properly handle UTF-8 values in URL.
You could use a table to manually encode character by character, but it is easier to search online for a free online encoder.
I just found and used http://www.url-encode-decode.com/ :
Input your original UTF-8 file name:
Piłka nożna.png
Output encoded version:
Pi%C5%82ka+no%C5%BCna.png
So I put that into your code to get a percent-encoded URL that HTML requires:
<img src="images/ikony/Pi%C5%82ka+no%C5%BCna.png">
But do not just input and convert everything into these online converters. If you had input the entire URL images/ikony...
you would notice forward slashes seem to get percent encoded too. The reason we choose not to encode /
as %2f
is:
The / is a reserved character. It's not equivalent to %2f. If you need the slash without it's defined meaning, you'd use the encoded form.
Source: Why Does url-encoding the first slash after the domain break the url?
Since we are using forward slash for its intended, defined meaning, to mean a directory separator, we leave it as /
without changing it.