Lección 6: Imágenes

Introducción a las imágenes en HTML

Las imágenes son una parte fundamental de la web moderna. HTML nos permite incluir imágenes en nuestras páginas web utilizando la etiqueta <img>. Esta etiqueta es un elemento vacío, lo que significa que no necesita una etiqueta de cierre.

La etiqueta <img>

La sintaxis básica para incluir una imagen es:

Los atributos principales de la etiqueta <img> son:

• src: La ruta o URL de la imagen (obligatorio).
• alt: Texto alternativo que describe la imagen (obligatorio para accesibilidad).
• width: Ancho de la imagen en píxeles (opcional).
• height: Alto de la imagen en píxeles (opcional).

Rutas de imágenes

Al igual que con los enlaces, podemos usar rutas absolutas o relativas para las imágenes:

• Ruta absoluta: <img src="https://ejemplo.com/images/foto.jpg" alt="Una foto">
• Ruta relativa (mismo directorio): <img src="foto.jpg" alt="Una foto">
• Ruta relativa (subdirectorio): <img src="images/foto.jpg" alt="Una foto">
• Ruta relativa (directorio superior): <img src="../foto.jpg" alt="Una foto">

Nota: Un directorio de nivel superior es un directorio que está más cerca del directorio raíz. Ejemplo en c:\documentos\web\imagenes\banner.jpg "documentos" en un directorio de nivel superior respecto de "imagenes". En el caso anterior use "\" para separar directorios, pués windows usa ese símbolo, pero a nivel web el símbolo es "/".
En el caso de arriba en el ejemplo Ruta relativa (directorio superior) ../foto.jpg esto implica que el archivo desde el que estamos enlazando, esta en una carpeta más baja. Digamos:
Directorio de la imagen: imagenes/foto.jpg
Directorio del archivo que enlaza a la imagen: imagenes/directorio/archivo.html

Importancia del atributo alt

El atributo alt es crucial por varias razones:

• Proporciona una descripción de la imagen para usuarios con discapacidad visual que utilizan lectores de pantalla.
• Se muestra si la imagen no se puede cargar.
• Ayuda a los motores de búsqueda a entender el contenido de la imagen.

Tamaño de las imágenes

Puedes especificar el tamaño de una imagen usando los atributos width y height:

Sin embargo, es generalmente mejor controlar el tamaño de las imágenes con CSS para una mayor flexibilidad y diseño responsive.

Formatos de imagen comunes

Los formatos de imagen más comunes en la web son:

• JPEG (.jpg, .jpeg): Ideal para fotografías y imágenes con muchos colores.
• PNG (.png): Bueno para imágenes que requieren transparencia o tienen pocos colores.
• GIF (.gif): Útil para animaciones simples y imágenes con pocos colores.
• SVG (.svg): Ideal para logos, iconos y gráficos que necesitan escalarse sin perder calidad.
• WebP (.webp): Un formato más nuevo que ofrece mejor compresión que JPEG y PNG.

Enlaces en imágenes

Es común hacer que las imágenes sean clickeables, convirtiéndolas en enlaces. Para hacer esto, simplemente envolvemos la etiqueta <img> dentro de una etiqueta <a>.

Sintaxis básica

Ejemplo práctico

Supongamos que queremos que al hacer clic en un logo, nos lleve a la página principal:

Consideraciones importantes

• El atributo alt sigue siendo necesario para la accesibilidad.
• Puedes usar el atributo title en la etiqueta <a> para proporcionar información adicional sobre el enlace.
• Considera usar CSS para indicar visualmente que la imagen es clickeable (por ejemplo, cambiando el cursor a una mano al pasar sobre la imagen).

Ejemplo con título y estilo

En este ejemplo, al pasar el cursor sobre la imagen, aparecerá el texto "Ver detalles del producto" y el cursor cambiará a una mano, indicando que es clickeable.

Ejercicios prácticos

Ejercicio 1: Insertar una imagen básica

Inserta una imagen llamada "logo.png" que se encuentra en el mismo directorio que tu archivo HTML. Asegúrate de incluir un texto alternativo apropiado.

Ejercicio 2: Imagen con tamaño específico

Inserta una imagen llamada "banner.jpg" con un ancho de 800 píxeles y un alto de 200 píxeles. La imagen se encuentra en un subdirectorio llamado "images".

Ejercicio 3: Imagen con enlace

Crea un enlace que, al hacer clic en una imagen llamada "perfil.jpg", lleve al usuario a "perfil.html". La imagen debe tener un texto alternativo adecuado.