¿Por qué se ven borrosas las imágenes de mi web?

Localiza el momento en que se pierde nitidez

La imagen pasa por captura o diseño, exportación, subida, procesamiento automático y visualización. Busca dónde desaparece el detalle por primera vez y cambia una cosa cada vez.

Abre el original al 100 %, después el archivo que subiste y por último el que carga la página publicada. Compara el mismo ojo, etiqueta o palabra. Una miniatura puede ocultar diferencias; un zoom extremo muestra píxeles incluso en buenas fotos. Si el original está desenfocado o movido, busca otra fuente o repite la foto. Si solo falla la exportación, corrígela antes de investigar la web.

Elige la comprobación según el síntoma

Comprueba el archivo que carga la página

El gestor de contenidos puede guardar el original grande y mostrar una miniatura o versión intermedia. En las herramientas del navegador, abre la petición de la imagen en el panel Red. Anota sus dimensiones y compáralas con el espacio ocupado en la página.

Una miniatura de 300 píxeles en una columna de 900 se está ampliando. El original completo podría ser excesivo: elige un tamaño intermedio en el bloque o la plantilla, en lugar de comprimir otra vez la miniatura.

Con varias fuentes, el archivo elegido puede cambiar según la ventana. Revisa móvil y escritorio. Nuestra guía de imágenes adaptables explica la implementación; la documentación de MDN detalla la selección de fuentes y la densidad de pantalla.

Usa suficientes píxeles para el espacio real

Para una foto mostrada a 600 píxeles CSS de ancho, compara versiones de 600 y 1200 píxeles, también en un móvil de alta densidad. La mayor puede mostrar más detalle, pero comprueba su peso. Son opciones de prueba, no una regla universal.

Crea la copia con el redimensionador desde un original suficientemente grande y bloquea las proporciones. Pasar de 300 a 1200 píxeles no recupera detalle fotográfico. Consulta tamaños de imagen para páginas web. Un recorte cerrado alrededor de una cara pequeña también reduce los píxeles disponibles: revisa las dimensiones del recorte antes de exportar.

Revisa por separado compresión y texto pequeño

Los degradados con bloques, las texturas emborronadas y el ruido alrededor de letras pueden indicar demasiada compresión con pérdida. Vuelve a la mejor fuente y compara una exportación menos comprimida con las mismas dimensiones. Guardar un JPG dañado como PNG conserva los defectos.

Lee el texto más pequeño de capturas y diagramas al tamaño de uso. Compara PNG con la copia actual mediante la guía JPG frente a PNG. El texto demasiado pequeño puede necesitar otro diseño. Guarda variantes independientes del original con nombres que indiquen dimensiones y formato; no encadenes conversiones sobre descargas con pérdida.

Aquí, 100 % significa ver la imagen a su tamaño real en un visor: un píxel de la imagen ocupa un píxel de la pantalla. El zoom de la página del navegador es otro ajuste.

Ejemplo: una foto nítida se ve borrosa en un artículo

Tu foto de 2400 × 1600 se ve bien localmente, pero mal en un bloque de 600 píxeles. La página carga una miniatura de 300 × 200. Es un ejemplo de diagnóstico, no un resultado medido en una web concreta.

1. Conserva el original y confirma que la página utiliza la miniatura.
2. Selecciona una versión mayor en el bloque o la plantilla.
3. Compara 600 × 400 y 1200 × 800 al mismo ancho de visualización.
4. Revisa móvil y escritorio y el peso de los archivos realmente cargados.
5. Quédate con la versión más pequeña que conserve la información necesaria.

Elegir la versión adecuada resuelve la falta de píxeles; comprimir la miniatura no añade detalle. Si sigue apareciendo la anterior, comprueba la URL solicitada y actualiza la caché correspondiente antes de exportar otra vez.

Preguntas frecuentes

¿Cambiar los DPI aumenta la nitidez?

La etiqueta de resolución no añade píxeles. Revisa dimensiones, tamaño mostrado y versión cargada. Consulta DPI, PPI y píxeles.

¿WebP elimina el desenfoque?

Cambiar el formato no restaura detalles perdidos. Parte de un original nítido y compara calidad y peso.

¿Por qué se ve bien en la biblioteca de medios?

La biblioteca y la página pueden mostrar versiones diferentes a distintos tamaños. Compara el archivo publicado con la vista previa.