WhatsApp

  

Imágenes en HTML: uso del elemento <img>, mejores prácticas y técnicas avanzadas

Guía completa sobre el elemento <img> en HTML, con ejemplos, atributos esenciales, imágenes responsivas, lazy‑loading, accesibilidad, SEO y optimización.

Imágenes en HTML: <img> y mejores prácticas

Aprende a incorporar imágenes de forma correcta, accesible y optimizada usando el elemento <img>, <picture> y atributos modernos.

1. Sintaxis básica del elemento <img>

El elemento <img> es auto‑cerrado y necesita, al menos, los atributos src y alt:

<img src='ruta/imagen.jpg' alt='Descripción breve de la imagen'>

El atributo alt es crucial para la accesibilidad y para los motores de búsqueda.

2. Atributos esenciales y su impacto

src

URL o ruta relativa del recurso. Puede ser un data URI o un recurso externo.

alt

Texto alternativo. Siempre describir el contenido visual. Si la imagen es decorativa, usar alt='' para que los lectores de pantalla la ignoren.

width / height

Especificar dimensiones en píxeles ayuda a evitar el layout shift y mejora el CLS (Cumulative Layout Shift) de Core Web Vitals.

title

Tooltip opcional que aparece al pasar el cursor. No sustituye a alt.

3. Atributos avanzados para imágenes responsivas y rendimiento

  • srcset y sizes: permiten servir diferentes resoluciones según el ancho del viewport. 
    <img src='foto-800.jpg'
     srcset='foto-400.jpg 400w, foto-800.jpg 800w, foto-1600.jpg 1600w'
     sizes='(max-width: 600px) 100vw, 600px'
     alt='Paisaje montañoso'>
  • loading: lazy difiere la carga hasta que la imagen está a punto de entrar en la ventana de visualización. 
    <img src='foto.jpg' alt='...' loading='lazy'>
  • decoding: async permite que el navegador decodifique la imagen sin bloquear el renderizado. 
    <img src='foto.jpg' alt='...' decoding='async'>
  • fetchpriority: high para imágenes críticas (hero), low para contenido secundario. 
    <img src='hero.jpg' alt='...' fetchpriority='high'>

4. <picture>: soporte de formatos modernos y artefactos artísticos

El elemento <picture> permite cambiar de archivo según media queries o tipos MIME, ideal para WebP, AVIF y versiones raster vs vector.

<picture>
  <source srcset='foto.avif' type='image/avif'>
  <source srcset='foto.webp' type='image/webp'>
  <img src='foto.jpg' alt='Retrato en blanco y negro' loading='lazy'>
</picture>

Los navegadores eligen la primera <source> compatible.

5. Comparativa rápida: <img> vs <picture>

Uso de <img>
  • Sencillo, ideal para imágenes estáticas.
  • Soporta srcset y sizes para responsividad.
  • No permite cambiar de formato según soporte del navegador.
Uso de <picture>
  • Permite servir WebP/AVIF a navegadores modernos.
  • Facilita artefactos artísticos (ej. imágenes artísticas + fallback JPEG).
  • Mayor complejidad de markup.

6. Seguridad y consideraciones de hot‑linking

  • Content‑Security‑Policy (CSP): agrega img-src 'self' https://cdn.ejemplo.com; para evitar carga de imágenes maliciosas.
  • Validación de URLs: nunca confíes en rutas proporcionadas por usuarios sin sanitizarlas.
  • Hot‑linking: protege tus imágenes con Referer check o usando un CDN que limite el origen.

7. Optimización de rendimiento

Los factores clave que impactan la velocidad de carga son:

  1. Formato adecuado: WebP y AVIF ofrecen hasta 30‑50 % menos peso que JPEG sin perder calidad.
  2. Compresión lossless vs lossy: usa herramientas como imagemin, sharp o cwebp.
  3. Dimensionado previo: redimensiona la imagen al tamaño exacto que se mostrará en la página.
  4. Cache‑control: Cache‑Control: public, max‑age=31536000 para recursos estáticos.
  5. Lazy loading (ya visto) y preload para imágenes críticas.

Ejemplo de encabezado HTTP para una imagen estática:

Cache-Control: public, max-age=31536000
Expires: Wed, 31 Dec 2030 23:59:59 GMT
Content-Type: image/webp

8. Troubleshooting frecuente

ProblemaCausa típicaSolución
Imagen no se muestraURL incorrecta o permiso 403Verificar ruta, usar console y revisar encabezados CSP
Texto alt visible en pantallaFalta la imagen o atributo src rotoAsegurar que el archivo exista y que el atributo src sea válido
Layout shift al cargar imágenesDimensiones no especificadasDefinir width y height o usar CSS aspect-ratio
Imagen lenta en dispositivos móvilesFormato pesado o falta de srcsetGenerar variantes WebP y usar srcset + loading='lazy'

9. SEO y accesibilidad

  • El alt debe ser descriptivo, incluir palabras clave cuando sea relevante, pero sin keyword stuffing.
  • Usa structured data (ImageObject) si la imagen es parte de un artículo.
  • Utiliza role='img' solo cuando sea necesario para componentes ARIA personalizados.
  • Evita texto incrustado en la propia imagen; si es esencial, proporciónalo también en HTML.

10. Conclusión

Dominar el elemento <img> y sus atributos avanzados, junto con <picture>, es fundamental para crear sitios web rápidos, accesibles y amigables con SEO. Aplica siempre buenas prácticas de seguridad, define dimensiones, sirve formatos modernos y aprovecha loading='lazy' para mejorar los Core Web Vitals.



Imágenes en HTML: uso del elemento <img>, mejores prácticas y técnicas avanzadas
ASIMOV Ingeniería S. de R.L. de C.V., Emiliano Nava 13 noviembre, 2025
Compartir
Nuestros blogs
Iniciar sesión dejar un comentario

  
Operaciones Vectorizadas con NumPy: Guía Completa con Ejemplos en Python
Aprende a aprovechar las operaciones vectorizadas de NumPy para acelerar tus cálculos numéricos. Incluye ejemplos, comparativas de rendimiento, buenas prácticas y alternativas emergentes.