Cómo acortar los múltiples archivos o nombres de archivo al agregar una imagen en HTML desde mi unidad

TL; DR
Coloque el directorio de imágenes en la misma carpeta que su archivo html y puede hacer lo mismo.

Todos los “nombres” que observa son directorios en la ruta del archivo. No necesariamente necesita incluirlos todos, siempre y cuando la página activa esté representada en algún lugar del mismo árbol de directorios. La distinción es entre una ruta completa y una ruta relativa .

Una ruta completa debe incluir toda la información necesaria para localizar el archivo, incluso si se trata de un árbol de directorios separado (por ejemplo, un archivo en otro sitio web: http://www.othersite.com/somefil…)

Si el archivo en cuestión se encuentra en el mismo árbol de directorios, puede usar una ruta relativa. Digamos que se puede llegar a su html en

http://mysite.com/index.html

entonces el archivo en la ruta completa

http://mysite.com/images/img.PNG

podría (y debería) referenciarse con la ruta relativa

images / img.png

Una ruta relativa es relativa al directorio en el que se encuentra el archivo que contiene la referencia (index.html). Tenga en cuenta que el significado exacto de las rutas depende en gran medida de los sistemas en los que se encuentran los archivos. Normalmente, lo que hace la mayoría de la interpretación del nombre de archivo para un documento html será un servidor web.

Básicamente, para los archivos ubicados en su sistema de archivos local, simplemente coloque el directorio de imágenes en la misma carpeta que su archivo html.