---
title: "Estilos CSS básicos para la etiqueta : Mejora tus imágenes de forma sencilla"
description: "Las imágenes son una parte esencial del diseño web, y aplicar estilos predeterminados a la etiqueta puede mejorar tanto la experiencia visual como el rendimiento. Aquí te dejo una configuración recome..."
url: https://dev.adammartin.es/micro-pildora/estilos-css-basicos-para-la-etiqueta-mejora-tus-imagenes-de-forma-sencilla/
date: 2023-10-22
modified: 2026-08-04
author: "Adam Martin"
type: micro-pildora
lang: es
---

# Estilos CSS básicos para la etiqueta : Mejora tus imágenes de forma sencilla

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:

CSSimg {
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 */
}

```
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 `width` y `height`.
- **[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: [](https://x.com/csswizardry)[Tweet ](https://x.com/csswizardry/status/1717841334462005661)de Harry Roberts ([](https://x.com/csswizardry)[@csswizardry](https://x.com/csswizardry))