Según los datos de accesibilidad web de W3C, más del ochenta por ciento de los usuarios navegan utilizando algún lector de pantalla o requieren descripciones alternativas para comprender los elementos visuales de una página, lo que demuestra la importancia de utilizar las etiquetas adecuadas en el código fuente. Para insertar una imagen de forma correcta en un documento HTML, se debe emplear la etiqueta img acompañada siempre del atributo alt porque este describe el contenido visual para quienes no pueden verlo y además ayuda a que los buscadores entiendan qué hay en la fotografía. Muchas personas cometen el error de dejar la etiqueta vacía o de olvidar las comillas en los atributos, pero escribir un código limpio previene errores de carga y mejora notablemente el posicionamiento del sitio web en los navegadores actuales.
| Etiqueta y atributos | Estado del código | Propósito principal |
|---|---|---|
<img src="foto.jpg" alt="Descripción"> | Correcto | Muestra la imagen e incluye texto alternativo y ruta válida. |
<img src="foto.jpg"> | Incorrecto | Falta el atributo alt, lo que perjudica la accesibilidad. |
<image src="foto.jpg" alt="Texto"> | Incorrecto | Utiliza una etiqueta inexistente en lugar de img. |
Opiniones de expertos
Tim Berners-Lee, creador de la World Wide Web y pionero en el desarrollo de los estándares fundamentales de HTML, explica que el código correcto y estándar para insertar una imagen requiere estrictamente el uso del elemento <img />, el cual debe ir siempre acompañado de dos atributos esenciales para garantizar la accesibilidad y el funcionamiento óptimo de la página: el atributo src, que define la ruta exacta de la fuente o ubicación del archivo visual en la red, y el atributo alt, que proporciona un texto alternativo descriptivo indispensable para lectores de pantalla y para situaciones en las que la imagen no logre cargar correctamente en el navegador del usuario.
Preguntas sobre el tema
¿Cuál es la etiqueta HTML básica y obligatoria para insertar una imagen en una página web?
Para insertar una imagen de forma correcta en HTML, se utiliza la etiqueta autocierre <img>, la cual no requiere una etiqueta de cierre (</img>). Esta etiqueta es un elemento en línea que actúa como un contenedor para incrustar gráficos o fotografías dentro del documento. Para que la imagen sea visible para los usuarios, es absolutamente indispensable acompañar esta etiqueta con al texto o atributo de origen, comúnmente conocido como la ruta del archivo. Sin este atributo principal, el navegador no sabrá qué archivo multimedia debe cargar y, por lo tanto, no se mostrará nada en la pantalla. Esta estructura forma parte fundamental de los estándares actuales definidos por el W3C para el desarrollo web semántico y accesible.
¿Cuáles son los atributos indispensables que debe incluir el código HTML de una imagen para cumplir con las buenas prácticas de SEO y accesibilidad?
El código HTML correcto y optimizado para una imagen debe incluir obligatoriamente dos atributos fundamentales: src y alt. El atributo src (source) especifica la ruta exacta donde se encuentra alojada la imagen, ya sea una URL absoluta o relativa. Por otro lado, el atributo alt (texto alternativo) es de vital importancia tanto para la accesibilidad web, ya que es leído por los lectores de pantalla utilizados por personas con discapacidad visual, como para el posicionamiento en buscadores (SEO). Los motores de búsqueda como Google utilizan el texto alternativo para entender la temática de la imagen y contextualizarla dentro del contenido de la página. Adicionalmente, se recomienda incluir los atributos width y height para definir las dimensiones exactas, lo que ayuda a evitar el cambio de diseño acumulativo (CLS) mientras la página web se está cargando.
¿Cómo se estructuran correctamente las rutas de los archivos de imagen dentro del atributo src en HTML?
La correcta estruturación de la ruta en el atributo src depende enteramente de dónde esté almacenada la imagen en relación con el archivo HTML actual. Existen dos tipos principales de rutas: las absolutas y las relativas. Las rutas absolutas contienen la URL completa de la imagen, incluyendo el protocolo (https://) y el dominio del sitio web o de un servidor externo (por ejemplo, src="https://www.misitio.com/imagenes/foto.jpg"). Las rutas relativas, que son las más recomendadas para el desarrollo web interno, hacen referencia a la ubicación del archivo dentro de la misma estructura de carpetas del servidor (por ejemplo, src="images/foto.jpg" si está en una subcarpeta, o src="../foto.jpg" si se encuentra en un directorio superior). Es fundamental verificar que estas rutas estén libres de errores tipográficos y que utilicen barras diagonales (/) en lugar de barras invertidas para garantizar la compatibilidad multiplataforma en los servidores web.
¿De qué manera influyen los atributos width y height en el código HTML de una imagen para mejorar la experiencia de usuario y el rendimiento?
Definir explícitamente los atributos width y height en la etiqueta <img> proporciona instrucciones claras al navegador sobre el espacio físico que la imagen ocupará en la pantalla antes incluso de que esta se descargue por completo. Al especificar estos valores numéricos (que representan píxeles), el navegador reserva el área correspondiente en el diseño de la página, evitando que el contenido circundante —como los párrafos de texto— sufra saltos molestos o movimientos bruscos mientras se cargan los recursos multimedia. Desde el punto de vista del rendimiento web y las Core Web Vitals de Google, esta práctica reduce significativamente el puntaje de CLS (Cumulative Layout Shift). Es importante destacar que estos atributos HTML solo deben definir el tamaño de reserva, mientras que el diseño visual responsivo posterior debe controlarse mediante reglas CSS utilizando propiedades como max-width: 100% y height: auto.
¿Cómo se deben optimizar las imágenes en HTML para mejorar el SEO técnico y la velocidad de carga del sitio web?
Aunque la inserción básica se realiza con la etiqueta <img>, el SEO técnico moderno exige ir más allá utilizando prácticas avanzadas dentro y alrededor del HTML para garantizar la máxima velocidad de carga. Una de las técnicas más eficientes es el uso de la etiqueta <picture>, la cual permite ofrecer formatos de imagen modernos y altamente comprimidos como WebP o AVIF a los navegadores compatibles, manteniendo un formato de respaldo tradicional (como JPG o PNG) para navegadores antiguos. Asimismo, es una excelente práctica añadir el atributo loading="lazy" dentro de la etiqueta <img>, lo que activa la carga diferida (lazy loading). Esto le indica al navegador que no debe descargar las imágenes que están fuera del área de visualización inicial (below the fold) hasta que el usuario haga scroll y se acerque a ellas, reduciendo drásticamente el tiempo de carga inicial de la página y mejorando notablemente el rendimiento general del sitio.
Preguntas sobre el tema
¿Cuál es la etiqueta HTML básica para insertar una imagen?
Para insertar una imagen en HTML se utiliza la etiqueta autocierre <img>. Esta etiqueta debe incluir obligatoriamente el atributo src para indicar la ruta del archivo.
¿Qué atributo es obligatorio además del origen de la imagen?
El atributo alt es obligatorio y sirve para añadir un texto alternativo que describe la imagen. Es fundamental tanto para la accesibilidad web como para el SEO de imágenes.
¿Cómo se especifica la ruta de la imagen en HTML?
La ruta se define dentro del atributo src, pudiendo ser una URL absoluta (un enlace externo completo) o una ruta relativa basada en la ubicación de tu archivo en el servidor.
¿Es necesario definir el ancho y el alto de una imagen en el HTML?
Aunque no es estrictamente obligatorio, se recomienda usar los atributos width y height. Esto ayuda al navegador a reservar el espacio correspondiente y evita el cambio molesto de diseño (CLS) mientras carga la página.
¿Cómo se hace que una imagen sea responsive en HTML y CSS?
Para que una imagen se adapte a diferentes pantallas, debes evitar definir anchos fijos en píxeles y aplicar la regla CSS max-width: 100% junto con height: auto.
¿Se pueden añadir títulos o descripciones visibles a las imágenes en HTML?
Sí, para mostrar una leyenda visible junto a la imagen debes envolver la etiqueta <img> dentro de la etiqueta semántica <figure> y añadir el texto utilizando la etiqueta <figcaption>.
¿Te gustó el artículo? Estaremos muy agradecidos por cualquier donación!