Las imágenes hacen que nuestras páginas sean más interesantes y fáciles de entender. Además, ayudan a organizar la información y hacerla más atractiva para los visitantes.
Para mostrar una imagen en una página web, debemos usar la etiqueta <img>, que indica al navegador que debe cargar y mostrar una imagen de una determinada ubicación.
Insertar una imagen con <img>
La etiqueta <img> es una de las más fáciles de usar en HTML porque no necesita una etiqueta de cierre. Para que funcione correctamente, debemos incluir dos atributos esenciales:
src: indica la dirección de la imagen.alt: describe la imagen en caso de que no se pueda mostrar.
Atributo src: la fuente de la imagen
El atributo src (source) contiene la ruta o dirección donde está almacenada la imagen. Esa ruta puede ser:
🖼️ Absoluta: cuando la imagen está en un servidor externo.
<img src="https://example.com/logo.png">
🖼️ Relativa: cuando la imagen está en la misma carpeta o dentro del proyecto web.
<img src="/images/logo.png">
El navegador buscará la imagen en la dirección especificada. Si la encuentra, la mostrará en la página.
Atributo alt: descripción de la imagen
El atributo alt (texto alternativo) es importante porque:
- Ayuda a los usuarios con discapacidad visual, ya que los lectores de pantalla pueden leer su descripción.
- Aparece en lugar de la imagen si esta no se carga.
- Mejora la accesibilidad y el SEO del sitio web.
Ejemplo:
<img src="https://example.com/logo.png" alt="Logo de la empresa">
Si el navegador no puede cargar la imagen, se mostrará el texto "Logo de la empresa".
Ajustar el tamaño de las imágenes
A veces, una imagen es demasiado grande o pequeña y necesitamos modificar su tamaño. Para esto, podemos usar los atributos width (ancho) y height (alto).
Ejemplo:
<img src="https://example.com/imagen.png" alt="Ejemplo de imagen" width="300" height="200">
En este caso, la imagen se mostrará con un ancho de 300 píxeles y una altura de 200 píxeles.
¿Qué pasa con la proporción?
Si solo definimos un atributo (width o height), el navegador ajustará el otro automáticamente para mantener la proporción original.
<img src="https://example.com/imagen.png" alt="Ejemplo de imagen" width="300">
Aquí, la imagen tendrá un ancho de 300 píxeles y el alto se ajustará proporcionalmente.
Optimizar imágenes para la web
Las imágenes pueden hacer que una página cargue más lento si son muy pesadas. Para mejorar la velocidad de carga:
- Usa formatos optimizados como JPEG (fotos) o PNG (gráficos con transparencia).
- Comprime las imágenes con herramientas como TinyPNG o Squoosh.
- Usa imágenes de tamaño adecuado en lugar de redimensionarlas en el navegador.
Resumen
- La etiqueta
<img>permite insertar imágenes en una página web. - El atributo
srcindica la ubicación de la imagen. - El atributo
altproporciona una descripción para casos en que la imagen no se carga y mejora la accesibilidad. - Podemos redimensionar imágenes con los atributos
widthyheight, pero es mejor optimizarlas antes de subirlas. - Usar imágenes de tamaño adecuado ayuda a mejorar el rendimiento del sitio.
