¡Buen Día!
Excelente explicacion Bruno de Alura, pero es buena practica acostumbrarse a utilizar el ./ cuando se hace referencia a contenido estático.
Principalmente por que cuando usas "./imagen.jpg" estás especificando una ruta relativa desde la ubicación actual del archivo HTML, CSS o script que contiene la referencia a la imagen o contenido estático, esta notación ayuda a evitar ambigüedades y garantiza que el navegador buscará la imagen desde la ubicación actual en la jerarquía de archivos, Por ejemplo, si tu estructura de archivos es la siguiente:
/proyecto
/imagenes
imagen.jpg
/css
estilos.css
index.html
Desde el archivo "estilos.css", si quieres referenciar la imagen, usarías "./imagenes/imagen.jpg".
en cambio, si usas simplemente "imagen.jpg", el navegador asumirá que la imagen está en la misma ubicación que el archivo que contiene la referencia, o buscará desde la raíz del dominio si no encuentra la imagen en la ubicación actual, esto podría causar problemas si, por ejemplo, tienes una estructura de carpetas compleja y el navegador no puede encontrar la imagen donde espera, también podría ser menos robusto si estás trabajando con URLs absolutas en lugar de rutas relativas.
En resumen, usar "./imagen.jpg" es más específico y menos propenso a errores, ya que asegura que la referencia se resuelva desde la ubicación actual del archivo. Es especialmente útil en proyectos más grandes con una estructura de carpetas compleja. Por otro lado, "imagen.jpg" puede funcionar bien en situaciones simples, pero como buena practica es escencial el usar "./".
La explicación de las carpetas superiores con "../" es correcto y bien explicado.