Las imágenes son una parte esencial del diseño web. Hacen que una página web resulte atractiva para el visitante. Pueden incluirse fácilmente en un documento HTML mediante la tag <img>.

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

atributo alt

Hacemos que la descripción de la imagen sea informativa y significativa. Ayuda a describir la imagen para las personas con problemas de visión o que no pueden verla. De esta manera, el navegador leerá el atributo alt, y un usuario podría entender por qué tenemos esta imagen.

Imaginemos el siguiente ejemplo. Tenemos una fuente sobre carreras de caballos. Queremos mostrar cómo se preparan los competidores para las carreras.

Un mal valor para el atributo alt sería:

Un buen valor para el atributo alt sería:

atributo src

El atributo src puede utilizar tanto rutas absolutas como 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:

Significa que el archivo de imagen se encuentra en el enlace de Internet https://example.com/images/image.jpg. Cualquiera puede acceder a la imagen utilizando este enlace.

Por favor, inspeccione el siguiente ejemplo real en el CodeSandbox a continuación:

Nota

Para examinar la estructura de carpetas de archivos, arrastre el control deslizante situado en la parte izquierda de la interfaz de CodeSandbox. En la esquina superior izquierda, encontrará un botón de hamburguesa representado por tres rayas. Al hacer clic en este botón, accederá a la organización de carpetas de archivos.

Ruta relativa

Especifica la ubicación del archivo de imagen relativa al documento actual. Por ejemplo

Significa que el archivo image.jpg se encuentra en el directorio images.

Por favor, inspeccione el ejemplo real proporcionado en el CodeSandbox a continuación. Encontrará 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 utilizar para acceder a una imagen. Por otro lado, una ruta relativa es un enlace dentro del contexto de su propio proyecto. Se refiere a una imagen local y a una ruta a la que cualquiera dentro del proyecto puede acceder.