Qué son width y height en una imagen web
Los atributos width y height en <img> indican las dimensiones intrínsecas del archivo en píxeles. No sustituyen al CSS: el navegador usa esos valores para calcular la relación de aspecto antes de que la imagen termine de descargarse y así reservar hueco en la página.
En una web de empresa, cada foto de equipo, icono ampliado o imagen de blog que aparece sin dimensiones puede empujar el texto, el menú o el botón de contacto cuando por fin carga. Ese movimiento es uno de los motivos más habituales de un CLS (Cumulative Layout Shift) alto y de visitas que abandonan antes de leer tu propuesta.
Por qué importan en webs corporativas (no solo en blogs técnicos)
Las plantillas de WordPress, Shopify o constructores visuales suelen insertar <img src="..."> sin width ni height, o con valores heredados de un tamaño de miniatura que no coincide con el diseño final. El resultado: en móvil el hero “salta”, el formulario se mueve y el usuario pulsa el enlace equivocado.
Reservar espacio con dimensiones correctas mejora la percepción de calidad, reduce frustración en catálogos y fichas de servicio, y complementa otras optimizaciones como lazy loading y srcset y sizes: puedes cargar tarde sin que el layout colapse.
Relación con aspect-ratio y CSS moderno
En CSS puedes fijar aspect-ratio: 16 / 9 (o la proporción real del archivo) junto con width: 100% y height: auto. Los atributos HTML width/height siguen siendo útiles porque el navegador conoce la proporción desde el primer parseo del HTML, incluso antes de aplicar hojas de estilo externas.
Patrón recomendado en 2026:
<img src="foto.jpg" width="1600" height="900" alt="..." loading="lazy" decoding="async" style="max-width:100%;height:auto;">
Los números deben reflejar el archivo real (o la variante que sirves por defecto), no el tamaño visual en pantalla. El CSS escala; la proporción evita el salto.
Cómo evitar CLS sin deformar las imágenes
El error más común es poner width/height del contenedor (por ejemplo 400×300) cuando el JPEG es 4000×3000 con otra proporción. El navegador reserva un rectángulo incorrecto y, al aplicar height: auto, el layout vuelve a moverse.
Comprueba siempre la proporción del archivo fuente. Si recortas en el CMS, actualiza los atributos o regenera la miniatura. Para imágenes responsivas con varias versiones, usa los valores de la variante por defecto en el src principal.
width/height frente a solo CSS
Poner solo width: 100% en CSS sin atributos HTML obliga al navegador a esperar a conocer la altura intrínseca. Con atributos correctos, el espacio vertical queda fijado desde el inicio. Esto es especialmente visible en listados de noticias, grids de proyectos y páginas de equipo con muchas fotos.
Si usas un framework que inyecta estilos inline, verifica que no anulen la proporción (por ejemplo height: 200px fijo en todas las miniaturas).
Casos prácticos en páginas de empresa
- Hero de servicios: width/height del banner principal; combina con fetchpriority solo en la imagen LCP, no en todas.
- Logos de clientes: mismo alto reservado para todos; evita que la fila de logos “respire” al cargar.
- Iconos ampliados en landing: si sustituyes SVG por PNG, define dimensiones explícitas.
- Contenido del blog: el editor debe conservar atributos al publicar; revisa el HTML generado.
Implementación paso a paso
- Audita imágenes above-the-fold con Lighthouse o PageSpeed: busca “imagen sin dimensiones explícitas”.
- Extrae ancho y alto reales (metadatos del archivo o herramientas del CMS).
- Añade width y height en el HTML o en el componente (React/Vue: pásalos al
<img>). - Aplica CSS responsivo:
max-width: 100%; height: auto;o contenedor con aspect-ratio. - Tras cambios en WebP/AVIF, confirma que la variante por defecto mantiene la misma proporción.
- Vuelve a medir CLS en campo (CrUX) tras unas semanas de tráfico.
Errores frecuentes
- Copiar width/height de la imagen de escritorio en la versión móvil con otro recorte.
- Olvidar imágenes insertadas por widgets (mapas, reseñas, chat) que cargan iframes o imágenes sin hueco reservado.
- Usar height: 0 y padding hack sin actualizar cuando cambias el diseño.
- Confiar en que el constructor “ya optimiza” sin revisar el HTML publicado.
Herramientas y comprobaciones (2026)
Chrome DevTools → pestaña Performance, grabación con “Experience” para ver layout shifts vinculados a imágenes. Search Console → Informe de experiencia en la página, si tienes suficiente volumen. Extensiones de accesibilidad y validadores HTML señalan img sin dimensiones.
En equipos con CI, puedes añadir una regla de lint en plantillas que exija width/height en componentes de imagen.
Checklist antes de publicar cambios
- Todas las imágenes del template principal tienen width y height coherentes con el archivo.
- El CSS no fuerza alturas que rompan la proporción.
- Las imágenes lazy mantienen espacio reservado.
- CLS en laboratorio por debajo de 0,1 en páginas clave (inicio, servicios, contacto).
Conclusión
width y height son un detalle pequeño en el código y un impacto grande en la experiencia: páginas estables, más confianza y mejor alineación con Core Web Vitals. No requieren rediseñar tu web; requieren disciplina al publicar imágenes y revisar lo que generan las plantillas. Si quieres una auditoría de rendimiento y maquetación en tu sitio corporativo, en aatsoft podemos priorizar las páginas que más convierten y aplicar estos ajustes sin sacrificar la identidad visual.
