≡En resumen
- La etiqueta img inserta una imagen y no lleva cierre: basta con escribir la apertura con sus atributos.
- src indica la ruta del archivo y alt describe la imagen para lectores de pantalla y buscadores.
- width y height evitan saltos de diseño mientras la imagen carga.
- srcset y sizes sirven la imagen adecuada a cada pantalla; loading="lazy" retrasa las que no se ven.
- longdesc, align o border ya no se usan: la presentación va en CSS.
01 ¿Qué es img en HTML?
El nombre viene de image. Cuando alguien busca «define img» o «qué significa img», casi siempre se refiere a esta etiqueta, aunque IMG también se usa como abreviatura de «imagen» en nombres de archivo (IMG_2045.jpg en las fotos de muchos móviles) o de carpetas.
Técnicamente, img es un elemento reemplazado: el navegador sustituye la etiqueta por el contenido del archivo externo. Por defecto se muestra en línea con el texto, como una palabra más, y su tamaño y posición se controlan con CSS. Es una de las etiquetas HTML más usadas de la web.
02 img src: cómo indicar la ruta de la imagen
El atributo src (source, «origen») contiene la URL del archivo. Puede ser absoluta, con el dominio completo, o relativa a la página o a la raíz del sitio. Si la ruta es incorrecta, el navegador muestra el icono de imagen rota y el texto alternativo.
| Tipo de ruta | Ejemplo de valor de src | Cuándo usarla |
|---|---|---|
| Relativa a la página | img/foto.jpg | La imagen está en una carpeta junto al HTML |
| Relativa a la raíz | /media/foto.jpg | La opción más robusta dentro de tu propia web |
| Absoluta | https://cdn.ejemplo.com/foto.jpg | La imagen se sirve desde un CDN u otro dominio |
| Data URI | data:image/svg+xml;base64,… | Iconos diminutos incrustados en el propio HTML |
03 Atributos de la etiqueta img
| Atributo | Para qué sirve | Ejemplo de valor |
|---|---|---|
| src | Ruta del archivo de imagen | /media/sofa-gris.webp |
| alt | Texto alternativo que describe la imagen | Sofá gris de tres plazas en un salón luminoso |
| width y height | Tamaño intrínseco en píxeles; reserva el hueco antes de cargar | 800 y 600 |
| srcset | Varias versiones de la imagen para distintas pantallas | sofa-400.webp 400w, sofa-800.webp 800w |
| sizes | Ancho que ocupará la imagen según el viewport | (max-width: 600px) 100vw, 50vw |
| loading | Carga inmediata (eager) o diferida (lazy) | lazy |
| decoding | Cómo decodificar la imagen | async |
| fetchpriority | Prioridad de descarga | high para la imagen principal |
| crossorigin y referrerpolicy | Control de peticiones a otros dominios | anonymous |
| usemap e ismap | Mapas de imagen con zonas clicables | #mapa-tienda |
04 Ejemplos de código con la etiqueta img
<img src="/media/sofa-gris.webp" alt="Sofá gris de tres plazas en un salón luminoso" width="800" height="600">
Es el mínimo recomendable: ruta, descripción y dimensiones para que el navegador reserve el espacio y la página no salte al cargar.
<img src="/media/sofa-800.webp" srcset="/media/sofa-400.webp 400w, /media/sofa-800.webp 800w, /media/sofa-1600.webp 1600w" sizes="(max-width: 600px) 100vw, 50vw" alt="Sofá gris de tres plazas" width="800" height="600" loading="lazy">
El móvil descarga la versión de 400 píxeles y una pantalla grande, la de 1.600. Como no está en la primera pantalla, loading="lazy" la descarga solo cuando el usuario se acerca a ella.
<img src="/media/separador.svg" alt="">: un alt vacío indica que la imagen es decorativa y los lectores de pantalla la ignoran.
<a href="/tienda/"><img src="/media/logo.svg" alt="Ir a la tienda"></a>: cuando la imagen es un enlace, el alt describe el destino, no el dibujo.
05 Qué formatos de imagen admite img
| Formato | Características | Úsalo para |
|---|---|---|
| JPEG / JPG | Compresión con pérdida, sin transparencia | Fotografías, si no puedes usar WebP o AVIF |
| PNG | Sin pérdida, con transparencia | Capturas de pantalla, gráficos con texto |
| WebP | Con o sin pérdida, transparencia y animación | El formato por defecto para fotos en la web actual |
| AVIF | Compresión superior a WebP en muchas fotos | Imágenes grandes donde cada KB cuenta |
| SVG | Vectorial, escala sin perder calidad | Logotipos, iconos e ilustraciones planas |
| GIF y APNG | Animaciones sencillas | Pequeñas animaciones; para clips largos, mejor vídeo |
| BMP e ICO | Formatos antiguos o muy específicos | Casi nunca; ICO solo para favicons |
Si quieres servir AVIF o WebP con un JPG de respaldo para navegadores antiguos, envuelve img en el elemento picture con varios source. La etiqueta img sigue siendo obligatoria dentro de picture: es la que se muestra y la que lleva el alt.
06 La etiqueta img, el SEO y la velocidad de carga
- ✓Escribe un alt que describa la imagen en su contexto, sin rellenarlo de palabras clave.
- ✓Nombra el archivo con palabras descriptivas: sofa-gris-tres-plazas.webp, no IMG_2045.jpg.
- ✓Indica siempre width y height para evitar saltos de diseño (CLS).
- ✓Usa loading="lazy" en las imágenes que no se ven al abrir la página, nunca en la principal.
- ✓Da fetchpriority="high" a la imagen más grande de la primera pantalla, que suele marcar el LCP.
- ✓Comprime y redimensiona antes de subir: nadie necesita una foto de 5 MB en un blog.
- ✓Sirve WebP o AVIF y varias resoluciones con srcset.
| Imagen | Alt flojo | Alt útil |
|---|---|---|
| Foto de producto | imagen | Zapatilla de running azul marino, vista lateral |
| Gráfico de datos | gráfico | Las ventas de la tienda crecieron un 18 % en el último trimestre |
| Foto del equipo | equipo equipo agencia marketing mejor agencia | Cinco personas del equipo revisando un diseño en la oficina |
| Icono decorativo | icono flecha | Vacío (alt=""), porque no aporta información |
Google usa el texto alternativo, el nombre del archivo y el texto que rodea a la imagen para entender qué muestra y posicionarla en Google Imágenes. Un buen texto alternativo también es obligatorio para cumplir las pautas de accesibilidad WCAG. Y las imágenes suelen ser lo que más pesa de una página: optimizarlas es la mejora más rápida de la velocidad de carga web.
Si tu web tiene decenas de imágenes sin alt, pesadas o que saltan al cargar, es un síntoma de que la maqueta necesita revisión. En un diseño web profesional estas buenas prácticas se aplican desde la plantilla.
Preguntas frecuentes sobre Img
Es la etiqueta que inserta una imagen en una página web. Es un elemento vacío, sin cierre, que carga el archivo indicado en src y lo describe con alt.
Es la abreviatura del inglés image, «imagen». En HTML nombra la etiqueta de imagen, y en nombres de archivo como IMG_2045.jpg simplemente indica que es una foto.
src es el atributo que indica la ruta del archivo de imagen. Puede ser relativa, como /media/foto.jpg, o absoluta, con el dominio completo.
No. Es un elemento vacío: se escribe solo la etiqueta de apertura con sus atributos. La barra final opcional (/>) es una herencia de XHTML y no es necesaria en HTML.
alt sustituye a la imagen cuando no se ve y es lo que leen los lectores de pantalla y los buscadores. title solo muestra un tooltip al pasar el ratón y no debe repetir el alt.
Con los atributos width y height indicas sus dimensiones en píxeles, y con CSS controlas cómo se muestra, por ejemplo max-width: 100% para que se adapte al móvil.
img muestra una imagen. picture es un contenedor que permite ofrecer varios formatos o recortes según la pantalla, pero siempre incluye un img dentro, que es el que se muestra.
Fuentes consultadas
Sobre el autor
Germán Gutiérrez
Development Manager en appyweb
Dirige el equipo de desarrollo de appyweb: aplicaciones web y móviles, SaaS, integraciones y arquitectura de software.
Ver perfil en LinkedIn ↗