The most effective way to handle image organization is by keeping them in a separate folder, rather than sorting them into individual subfolders.
To minimize the use of repetitive "../../" in your file paths, avoid directly assigning the src attribute within the tag itself. Instead, opt for utilizing a dedicated CSS or JavaScript file to manage this task. This allows you to store all CSS files in one designated folder, positioned close to your images folder.
By doing so, you only need to use a single "../", resulting in cleaner file paths like "../images/yourimage.png."
For instance, if your HTML file is located at "\1\2\3\4\5\6\7\8\sample.html," and your image files are stored in "\1\images,\" consider organizing all JavaScript files in a folder adjacent to the images folder, such as "\1\scripts\".
In your sample.html file that contains numerous image tags, importing the JavaScript file can be done succinctly:
<script src="../../../../../../../../scripts/myscripts.js"></script>
Here is where the longer "../" reference will be utilized.
Within "myscripts.js," simply set the source attribute for elements with a specific class, like so:
$(".nature").attr("src","../images/yourimage.png");
This approach can be applied to other tags as well, reducing the need for lengthy file path references within your JavaScript code.
If you have a large number of img tags, importing this JS file once will suffice for all instances.