Agregar Imágenes en HTML

Imágenes son una parte esencial del diseño web. Hacen que una página web sea atractiva para el visitante. Se pueden incluir fácilmente en un documento HTML utilizando la etiqueta <img>.

• src: atributo obligatorio. Su valor es la ruta a la ubicación de la imagen. La ruta puede ser absoluta o relativa;
• alt: atributo obligatorio. Proporciona texto alternativo que se muestra cuando la imagen no puede ser renderizada;
• width y height: especifican el tamaño de la imagen en píxeles. Sin estos atributos, la imagen se mostrará en su tamaño original.

Atributo alt

La descripción de la imagen debe ser informativa y significativa. Ayuda a describir la imagen para personas con discapacidad visual o que no pueden verla. De este modo, el navegador leerá el atributo alt y el usuario podrá comprender por qué el sitio web tiene esta imagen.

Imaginemos el siguiente ejemplo. Tienes una fuente sobre carreras de caballos. Quieres mostrar cómo los competidores se preparan para la carrera.

Un valor incorrecto para el atributo alt sería:

Un buen valor para el atributo alt sería:

El texto alternativo "Un hombre en un caballo" es demasiado genérico y carece de contexto. Proporciona una descripción básica, pero no transmite detalles útiles sobre la escena ni el propósito de la imagen.

Atributo src

El atributo src puede utilizar rutas absolutas y relativas para especificar la ubicación del archivo de imagen.

Ruta Absoluta

Especifica la URL completa del archivo de imagen en el servidor web. Por ejemplo:

Esto significa que el archivo de imagen ubicado en el enlace https://example.com/images/image.jpg está en internet. Cualquier persona puede acceder a la imagen utilizando este enlace.

Por favor, revisa el siguiente ejemplo real en el entorno de código a continuación:

Nota

Para examinar la estructura de carpetas de archivos, desliza el control deslizante en el lado izquierdo de la interfaz del entorno de código. En la esquina superior izquierda, encontrarás un botón de menú representado por tres líneas. Al hacer clic en este botón, navegarás a la organización de carpetas de archivos.

Ruta relativa

Especifica la ubicación del archivo de imagen en relación con el documento actual. Por ejemplo:

Esto significa que el archivo image.jpg se encuentra en el directorio images.

Por favor, revisa el ejemplo real proporcionado en el code sandbox a continuación. Encontrarás la carpeta images, que contiene el archivo sun.png.

Nota

Para resumir la diferencia entre rutas relativas y absolutas, una ruta absoluta representa el enlace real que cualquiera puede usar para acceder a una imagen. Por otro lado, una ruta relativa es un enlace dentro del contexto de tu propio proyecto. Se refiere a una imagen y ruta local a la que cualquiera dentro del proyecto puede acceder.