Las imágenes son una parte esencial del diseño web, y aplicar estilos predeterminados a la etiqueta <img> puede mejorar tanto la experiencia visual como el rendimiento. Aquí te dejo una configuración recomendada y explicada:
img {
max-width: 100%; /* 1. Asegura tamaños fluidos respetando la proporción original */
height: auto; /* 1. Mantiene la relación de aspecto */
vertical-align: middle; /* 2. Elimina el espacio "fantasma" debajo de las imágenes */
font-style: italic; /* 3. Resalta el texto alternativo visualmente */
background-repeat: no-repeat; /* 4. Preparación para posibles fondos (LQIP) */
background-size: cover; /* 4. Ajusta el tamaño del fondo */
shape-margin: 0.75rem; /* 5. Configura márgenes para usar con shape-outside */
}
Detalles:
- [1] Permite tamaños fluidos y mantiene la relación de aspecto definida por los atributos
widthyheight. - [2] Elimina el molesto espacio en blanco que a veces aparece debajo de las imágenes.
- [3] Da un toque visual al texto alternativo (alt) cuando se muestra, diferenciándolo del contenido circundante.
- [4] Facilita la preparación para usar imágenes de baja calidad como fondo (LQIP – Low Quality Image Placeholder).
- [5] Establece márgenes que funcionan con
shape-outside, útil para diseño avanzado.
Adoptar estos estilos te ayudará a mantener tus imágenes consistentes y listas para diseños responsivos, además de mejorar la accesibilidad y el rendimiento visual en tu web.
Referencia: Tweet de Harry Roberts (@csswizardry)