Razones para especificar width y height en la etiqueta de imagen
Al crear una página web, una de las etiquetas más usadas es la <img>. Aún así, es frecuente ver imágenes insertadas solo con src, omitiendo la información de tamaño.
Al hacerlo, el diseño puede desplazarse durante la carga, afectando negativamente la experiencia del usuario y los indicadores de rendimiento. En esta publicación, examinaremos desde una perspectiva técnica por qué es importante declarar width y height en la etiqueta <img> y los beneficios concretos que aporta.
1. Rendimiento de renderizado y velocidad de carga
1-1. Garantizar la estabilidad del diseño (Stable Layout)
El navegador analiza el HTML y renderiza la pantalla lo más rápido posible. Si no conoce el tamaño de la imagen, no puede calcular el espacio que ocupará el elemento.
Como resultado, cuando la imagen se carga, desplaza el contenido existente, provocando un desplazamiento de diseño (Layout Shift) inesperado.
<img src="photo.jpg">
En este caso, antes de que la imagen se cargue, el elemento se trata como si no tuviera altura, y solo después de la carga se aplica la altura real, reordenando la pantalla.
1-2. Reducción del Cumulative Layout Shift (CLS)
El CLS es una de las métricas de Google Core Web Vitals que cuantifica los desplazamientos inesperados durante la carga de la página.
Al especificar width y height, el navegador puede calcular la relación de aspecto exacta antes de que la imagen se descargue, reservando el espacio necesario.
Criterios de CLS
- CLS ≤ 0.1 : bueno
- CLS ≥ 0.25 : necesita mejora
Declarar el tamaño de la imagen es una de las formas más sencillas y efectivas de reducir el CLS.
1-3. Entendimiento preciso del ancho de banda
Hay un malentendido común: declarar width y height no reduce el tamaño del archivo descargado.
- El navegador sigue descargando la imagen original.
width/heightson solo datos para el cálculo de diseño.
El ahorro real de ancho de banda se logra mediante:
srcset/sizes- Redimensionado de imágenes en el servidor
- Uso de
<picture>
Sin embargo, al declarar el tamaño, el proceso de renderizado se estabiliza, mejorando la percepción de rendimiento y la calidad visual.
2. Ventajas desde la perspectiva de accesibilidad
2-1. Flujo de lectura predecible
La accesibilidad se centra en el atributo alt, pero la estabilidad del diseño también juega un papel auxiliar.
Con un tamaño claro, la estructura de la página se vuelve predecible, y los lectores de pantalla no experimentan cambios bruscos en el flujo de contenido.
widthyheightno son esenciales para la accesibilidad, pero la estabilidad del diseño la mejora indirectamente.
2-2. Predicción de diseño en dispositivos móviles
En móviles, la pantalla es limitada, por lo que incluso pequeños cambios de diseño se perciben fuertemente.
Si el tamaño no está especificado, puede ocurrir:
- Desplazamiento de contenido durante la carga
- Cambios bruscos de espaciado al hacer zoom
Definir la proporción base de la imagen reduce esta inestabilidad.
3. Perspectiva SEO
Los motores de búsqueda valoran la velocidad de carga y la experiencia del usuario.
- Páginas con bajo CLS
- Renderizado inicial estable
Estas características aumentan la probabilidad de que la página sea percibida como de alta calidad. Además, una estructura de imagen clara facilita la comprensión de la página por parte del motor de búsqueda y mejora los resultados de búsqueda de imágenes.
4. Ejemplo de código
4-1. Tamaño no especificado (caso problemático)
<img src="https://example.com/photo.jpg" alt="Beautiful scenery">
4-2. Tamaño especificado (caso recomendado)
<img
src="https://example.com/photo.jpg"
alt="Beautiful scenery"
width="800"
height="600">
Precauciones
widthyheightse expresan en unidades de píxeles.- En diseños responsivos, se suele usar el siguiente CSS junto con los atributos.
img {
max-width: 100%;
height: auto;
}
5. Resumen de consejos prácticos
| Situación | Método recomendado |
|---|---|
| Imágenes estáticas | Declarar width y height |
| Imágenes responsivas | width/height + max-width: 100%; height: auto; |
| Imágenes dinámicas | Insertar el tamaño basado en metadatos del servidor |
| SVG | Definir la relación con viewBox, añadir width/height si es necesario |
6. Conclusión
- Estabilidad del diseño → reducción del CLS → mejora de la experiencia del usuario.
- Predicción de renderizado → mejora de la percepción de rendimiento.
- Señal positiva para SEO.
Especificar width y height no es solo una cuestión de estilo de código; es un principio fundamental para mejorar el rendimiento web y la UX.
Incorporar estas dos propiedades como hábito al añadir imágenes ya transforma notablemente la calidad de la página.
Para los ingenieros front-end también pueden resultar útiles los siguientes posts:
No hay comentarios.