Apuntes html

HTML nunca falla, solo se ve raro.

Insertar imágenes en tu página

Las imágenes hacen que una página web sea más atractiva y comunicativa. En esta lección aprenderemos a insertar imágenes con la etiqueta <img>, configurar sus atributos esenciales (src, alt, width, height), y usar srcset y loading para optimizar adaptación a distintos tamaños de pantalla y rendimiento.
También veremos cómo las imágenes se integran con otros elementos. Mencionaremos como la alineación, espaciado, y bordes se controlan con CSS (ver manual de estilos).

La etiqueta <img> y sus atributos

Insertar una imagen es sencillo, siempre que tengas el archivo de imagen, o conozcas su ubicación exacta (por ejemplo, en tu ordenador o un servidor). Supongamos que tienes una imagen llamada apple.png en una carpeta images. El código básico es:

<img src="/images/apple.png" alt="manzana" width="128" height="128">

Esto mostrará la imagen en tu página.. Veamos los atributos clave:

  • <img>: Etiqueta simple (sin etiqueta de cierre), a diferencia de <p></p> o <h1></h1>.

  • src: Indica la ubicación (source):

    • Relativa: images/apple.png → Se interpreta desde la URL actual del documento. Puede fallar si el HTML se sirve desde una ruta virtual o con enrutamiento dinámico.
    • Relativa al sitio (pseudo-absoluta): /images/apple.png → Empieza desde la raíz del sitio web. Funciona bien en entornos con servidores como Apache o Nginx.
    • Absoluta: https://dominio.net/images/apple.png → Ruta completa con protocolo. Útil si la imagen está en otro servidor.

    Si la ruta es incorrecta, el navegador mostrará el texto del atributo alt, o un icono roto.

  • Describe la imagen para personas que no pueden verla, como usuarios con lectores de pantalla. También se muestra si la imagen no se carga.
    Es esencial para accesibilidad web y buenas prácticas de HTML.

  • width y height: Tamaño en píxeles (sin necesidad de precisar "px"). No es obligatorio pero aceleran su carga (el navegador reserva espacio). Si no lo indicas, el navegador mostrará la imagen en su tamaño original.

Nota: <img src="/imagenes/apple.png"> → El navegador busca la imagen desde la raíz del sitio.
<img src="./imagenes/apple.png"> → La busca desde la URL actual, que puede estar en una subcarpeta (¡y causar errores si no existe ahí!).

Nota: Evita distorsionar imágenes con width/height incorrectos. Redimensiona con editores (GIMP, Photoshop) o CSS.

Formatos de imagen

Usa formatos adecuados para la web:

  • JPG: Fotos con muchos colores (paisajes).
  • PNG: Transparencias, gráficos nítidos (logos).
  • GIF: Animaciones simples, pocos colores.
  • WebP: Calidad y tamaño reducido (soportado por navegadores modernos).
  • SVG: Vectoriales, para iconos o ilustraciones que se pueden redimensionar sin perder calidad.
  • AVIF: Se dice que presenta mejor compresión y calidad que JPEG y PNG, con soporte para HDR, transparencia y colores más vivos. Basado en el códec de video AV1 y anunciado como el formato del futuro, los navegadores mas populares han ido incorporando soporte a partir del año 2000.

Imágenes como elementos en línea

La etiqueta <img> es un elemento inline, integrado en el texto, que no provoca saltos de línea (por contraposición a elementos de bloque, que siempre van seguidos de un salto de línea, como p o h1):

<p>La manzana  <img src="/images/apple.png" alt="manzana roja" width="200" height="200"> es
una fruta sana.</p>

Para convertir la imagen en un bloque (saltos de línea), usa CSS (display: block). No anides bloques (<p>, <ul>) dentro de <img>:

<!-- Incorrecto -->
<img src="images/apple.png" alt="manzana"><p>Esto es un error</p></img>
<!-- Correcto -->
<p><img src="images/apple.png" alt="manzana" width="50" height="50"> Esto es OK</p>

Alineación de imágenes

Por defecto, <img> se alinea a la izquierda de la página o dentro del texto. Atributos obsoletos como align (ver Apéndice) se reemplazan con CSS.

Alineación con texto

Usa float para que el texto fluya. alrededor:

<img src="images/apple.png" style="float: right; width: 200px; height: 200px;" alt="Manzana">
<p>Este texto fluye a la izquierda. Lorem ipsum dolor sit amet...</p>

O a la izquierda:

<img src="images/apple.png" style="float: left; width: 200px; height: 200px;" alt="Manzana">
<p>Este texto fluye a la derecha. Lorem ipsum...</p>

Fíjate que aqui hemos indicado las dimensiones en pixeles porque estamos definiendo un estilo (style="").

Centrar una imagen

Convierte en bloque y usa márgenes automáticos:

<img src="images/apple.png" style="display: block; margin: 0 auto; width: 168px; height: 180px;" alt="Manzana">

O envuélvela en un párrafo centrado:

<p style="text-align: center;">
  <img src="images/apple.png" alt="Manzana" width="168" height="180">
</p>

Controlar el flujo

Si una imagen usa float, el texto puede seguir fluyendo a su alrededor hasta que indiques lo contrario. Usa la propiedad CSS clear en un elemento (como <br>) para detener el flujo.:

<img src="images/apple.png" style="float: left; width: 168px; height: 180px;" alt="Manzana">
<p>Texto a la derecha. Lorem ipsum...</p>
<br style="clear: both;">
<p>Texto sin flotar.</p>
  • clear: left: Detiene el flujo en el margen izquierdo.
  • clear: right: Detiene el flujo en el margen derecho.
  • clear: both: Detiene el flujo en ambos márgenes.

Espaciado y bordes

Obsoletos hspace, vspace, border (ver Apéndice) se reemplazan con CSS:

  • Espaciado:
<img src="images/apple.png" style="float: left; margin: 10px; width: 168px; height: 180px;" alt="Manzana">
<p>Texto con 10px de margen. Lorem ipsum...</p>

Esto crea un margen uniforme de 10 píxeles. Puedes especificar márgenes individuales (por ejemplo, margin: 10px 20px 10px 0).

  • Bordes:
<img src="images/apple.png" style="border: 3px solid blue; width: 168px; height: 180px;" alt="Manzana">

Si la imagen está dentro de un enlace (<a>), los navegadores añaden un borde por defecto. Para quitarlo:

<a href="https://dominio.net"><img src="images/apple.png" style="border: none;" alt="Manzana"></a>

Imágenes responsivas (srcset y loading)

Para optimizar imágenes en diferentes dispositivos y mejorar la carga, usa srcset y loading:

  • srcset: Ofrece múltiples imágenes según el tamaño de pantalla (responsividad).

  • loading: Controla la carga:

    • lazy: Carga solo cuando la imagen está visible (ahorra ancho de banda).
    • eager: Carga de inmediato (para imágenes clave).

Ejemplo:

<img src="images/apple-pequeño.png"
     srcset="images/apple-grande.png 1024w, images/apple-pequeño.png 640w"
     alt="Manzana"
     width="640" height="480"
     loading="lazy">
  • src: Imagen por defecto (640px).
  • srcset: Imágenes para 1024px (apple-grande.jpg) o 640px (apple-pequeño.jpg).
  • loading="lazy": Carga diferida para imágenes fuera de la vista inicial.

Por qué usarlo:

  • Responsividad: Dispositivos móviles usan imágenes pequeñas, escritorios usan grandes.
  • Rendimiento: loading="lazy" reduce el tiempo de carga inicial.
  • Accesibilidad: Combina con alt para una experiencia completa.

Nota: Prepara imágenes en diferentes tamaños con editores (GIMP, Photoshop). Usa srcset solo si tienes varias versiones; si no, src basta.

Ejemplo completo

Página con imágenes, incluyendo srcset y loading:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Galería de Frutas</title>
  <style>
    body { font-family: Arial, sans-serif; }
    .centrado { text-align: center; }
  </style>
</head>
<body>
  <!-- Galería de example.com -->
  <h1>Galería de Frutas</h1>
  <p>Bienvenidos a mi galería en <a href="https://example.com">example.com</a>.</p>

  <img src="images/apple-pequeño.jpg"
       srcset="images/apple-grande.jpg 1024w, images/apple-pequeño.jpg 640w"
       alt="Manzana diciendo comeme"
       style="float: right; margin: 10px;"
       width="640" height="480"
       loading="lazy">
  <p>La manzana es buena. No puedes decir que tienes hambre si no te apetece una manzana.</p>

  <br style="clear: both;">

  <h2>Por qué queremos fruta</h2>
  <ul>
    <li>Esta buena</li>
    <li>Es saludable</li>
    <li>Engorda menos que el tocino</li>
  </ul>

  <p class="centrado">
    <img src="images/apple-alt.jpg"
         alt="manzana"
         style="border: 2px solid blue;"
         width="200" height="150"
         loading="eager">
  </p>
  <p>¡ Me gusta la fruta !</p>

  <footer>
    <p>© 2025 example.com</p>
  </footer>
</body>
</html>

Instrucciones:

  • Guarda el código como galeria.html en UTF-8 (VS Code: "Archivo" → "Guardar como" → UTF-8).

  • En su mismo directorio crea una carpeta images con apple-pequeño.jpg (640px), apple-grande.jpg (1024px), apple-alt.jpg (200x150px).

  • Abre en un navegador para verificar flotación, bordes, y carga.

  • Sube al servidor en modo binario.

Consejos para evitar problemas

  1. Verifica rutas: Asegúrate de que src y srcset apunten a archivos existentes.

  2. Escribe un alt claro: Describe la imagen (por ejemplo, "manzana roja"), no "imagen1.jpg".

  3. Prueba responsividad: Abre en móvil y escritorio para verificar srcset.

  4. Optimiza imágenes: Usa WebP o compresión para reducir tamaño.

Recapitulación

Has aprendido:

  • Insertar imágenes con <img>, usando src, alt, width, height.
  • Optimizar con srcset (responsividad) y loading (rendimiento).
  • Formatos adecuados (JPG, PNG, WebP, SVG).
  • <img> como inline y reglas de anidamiento.
  • Alineación con CSS (float, text-align), espaciado (margin), bordes (border).
  • Controlar flujo con clear.
TOP