Curso de HTML / Insertar imágenes con img, alt, width y height

Para insertar una imagen en HTML, escribe su ruta en src dentro de img y proporciona en alt la información que aporta al contexto. Los atributos width y height indican dimensiones y ayudan a reservar espacio antes de la carga. El tamaño de presentación se puede ajustar con CSS sin reducir por ello los bytes del archivo.

Insertar el archivo y resolver su ruta

img es un elemento vacío y no necesita cierre. Este fragmento utiliza la imagen del lago y el árbol que se muestra más abajo:

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="A tree on a small island in a lake, with mountains beyond"
     width="1600" height="900">

Guarda la imagen original en la misma carpeta que index.html, conservando exactamente su nombre. Coloca el fragmento dentro de body de un documento completo, guarda y recarga el navegador. Si necesitas crear ese documento, utiliza la estructura básica de HTML.

Si prefieres una subcarpeta images, cambia la ruta a images/html-image-sample-lake-tree-1600-v1.webp. La carpeta de referencia es la del archivo HTML que contiene la imagen; las rutas relativas de los enlaces aplican el mismo criterio.

Al seleccionar la imagen de este artículo puedes abrir su archivo original. Ese enlace lo crea un elemento a que envuelve la imagen; no es un comportamiento que img añada automáticamente.

Redactar una alternativa textual útil

alt representa la información o función de la imagen cuando no se puede percibir. En este caso describe el árbol, la isla y las montañas. Los textos del ejemplo están en inglés; al crear una página en español puedes traducir ese valor sin cambiar la ruta del archivo.

<img src="html-image-sample-lake-tree-1600-v1.webp"
     alt="A tree on a small island in a lake, with mountains beyond"
     width="1600" height="900">

No te limites a “imagen” ni encadenes palabras clave. Pregúntate qué perdería el lector si no viera el recurso. Si es puramente decorativo y no añade información necesaria, puede ser adecuado alt="". Un valor vacío intencional no equivale a omitir el atributo.

Si el recurso contiene un gráfico complejo, describe el resultado importante y proporciona los detalles en el texto o en una tabla cercana. Una explicación visible bajo una imagen cumple otra función, desarrollada en figure y figcaption. El árbol de decisión de W3C WAI ayuda a elegir la alternativa según el uso.

Separar dimensiones originales y tamaño visible

El archivo de muestra mide 1600 × 900 píxeles. Escribir esos valores ayuda al navegador a determinar su proporción antes de recibirlo. No significa que deba ocupar 1600 píxeles en todas las pantallas, ni reduce el peso del archivo descargado.

img {
  max-width: 100%;
  height: auto;
}

Pon este CSS dentro de style en head o en una hoja enlazada. max-width: 100% impide que la imagen supere el ancho disponible, y height: auto mantiene su proporción al reducirla. No fuerces un ancho y un alto incompatibles con su forma.

Para enviar menos píxeles necesitas otro archivo redimensionado y una estrategia de selección. Las imágenes adaptables con srcset, sizes y picture permiten distinguir esa elección de archivo del cambio de tamaño visible.

Comprobar la carga y corregir fallos

Abre primero la imagen por sí sola para comprobar que existe. Si no aparece en el documento, compara extensión, mayúsculas y ruta relativa con el archivo real. Revisa también el guardado y la recarga antes de modificar varios valores a la vez.

Para observar la alternativa textual, cambia temporalmente el nombre de la imagen de la práctica o su src, vuelve a cargar y restaura después el nombre correcto. Su presentación exacta con una imagen fallida depende del navegador y del espacio disponible; no uses esa apariencia como única prueba de accesibilidad.

Prueba la página a un ancho estrecho y comprueba que la imagen mantiene la proporción. En las herramientas de red, verifica que reducirla visualmente no implica descargar un archivo más pequeño. La referencia de img en MDN describe los atributos de carga y presentación.