Por qué tu imagen se ve borrosa después de subirla en línea

Las cinco causas de un vistazo

Una foto nítida suele verse borrosa tras subirla por una de cinco razones. Encuentra tu síntoma y luego lee la sección correspondiente más abajo.

Causa 1: recompresión de la plataforma

La mayoría de las plataformas web — redes sociales, creadores de sitios, sistemas CMS, plataformas de e-commerce — comprimen las imágenes tras subirlas para reducir costes de almacenamiento y mejorar los tiempos de carga. La compresión que aplican suele ser agresiva y optimizada para una reducción media del tamaño de archivo, no para tu imagen específica.

El resultado es una versión de tu foto que pasó por dos pasadas de compresión: una al exportarla desde tu cámara o editor, y otra cuando la plataforma la recomprimió. Cada pasada con pérdida introduce nuevos artefactos sobre los existentes. Los degradados suaves desarrollan banding. Los bordes nítidos se ablandan. El detalle fino desaparece. Estrategias de mitigación:

• Sube con una calidad más alta de la que crees necesitar. Las plataformas que recomprimen trabajan con tu versión subida. Si subes con calidad JPEG 95, la recompresión de la plataforma parte de una base más limpia que si subes con calidad 70.
• Sube en las dimensiones de visualización exactas si las conoces. Una plataforma que recibe una imagen ya en el tamaño objetivo puede saltarse o reducir el redimensionado, lo que evita uno de los pasos de degradación.
• Consulta la documentación de la plataforma para las especificaciones de subida recomendadas. Muchas plataformas publican las dimensiones y el formato que recomiendan para la mejor calidad.

Causa 2: subir una imagen más pequeña que el tamaño de visualización

Si subes una imagen de 600 píxeles de ancho y se muestra a 1200 píxeles de ancho, el navegador debe ampliarla para que encaje en el contenedor. Ampliar una imagen más allá de sus dimensiones originales — escalado hacia arriba — revela la rejilla de píxeles subyacente. La imagen se ve blanda, borrosa o pixelada según el algoritmo de escalado. La solución es usar una imagen de origen al menos tan grande como el tamaño de visualización, y preferiblemente 2× más grande para pantallas de alta densidad (retina). Un ancho de visualización de 800 píxeles CSS en una pantalla retina necesita una imagen de 1600 píxeles para verse nítida. Esto ocurre cuando:

• Reduces una foto demasiado agresivamente antes de subirla, quedando más pequeña que el tamaño de visualización
• Usas una foto tomada en un dispositivo antiguo con una cámara de baja resolución
• Tomas una captura de pantalla en una pantalla no retina y la muestras en un contexto retina
• Subes una versión del tamaño de una miniatura de una imagen a un espacio que la muestra grande

Causa 3: desajuste de pantalla retina / de alta densidad

Las pantallas retina y de alta densidad (también llamadas HiDPI o pantallas 2×) usan dos píxeles físicos para mostrar cada píxel CSS. Un área estándar de 100×100 píxeles CSS usa una rejilla de 200×200 píxeles físicos en estas pantallas. Si proporcionas una imagen de solo 100×100 píxeles para un espacio que necesita 200×200, aparece borrosa en dispositivos retina mientras se ve bien en pantallas estándar.

La mayoría de los portátiles modernos, iPhones, iPads, teléfonos Android de gama alta y muchos monitores de escritorio son pantallas de alta densidad. Si tu audiencia usa dispositivos modernos y tus imágenes se ven nítidas en tu monitor pero borrosas cuando otros las ven, un desajuste retina es la causa probable.

La solución: proporciona imágenes en 2× las dimensiones de visualización CSS. Para un espacio CSS de 400 píxeles de ancho, sube una imagen de 800 píxeles de ancho.

Causa 4: formato incorrecto que causa artefactos visuales que parecen desenfoque

La compresión JPEG fuerte puede producir artefactos que aparecen como desenfoque más que como pixelación — sobre todo en zonas de degradado suave como cielo, piel y fondos desenfocados. Lo que parece una imagen borrosa puede ser en realidad un JPEG muy comprimido donde el detalle fino se ha cuantizado y eliminado.

La prueba: amplía un borde nítido de la imagen (un carácter de texto, un contorno de alto contraste). Si el borde se ve blando y rodeado de ruido de color, el problema son los artefactos de compresión JPEG. Si el borde es nítido pero a la imagen general le falta detalle, el problema es resolución insuficiente.

Arregla los artefactos JPEG subiendo con un ajuste de calidad más alto o convirtiendo a WebP, que maneja los degradados de forma más limpia con tamaños de archivo equivalentes.

Causa 5: la confusión del DPI

Los editores de imágenes a menudo muestran un valor de «DPI» o «PPI» en los ajustes del archivo. Algunas personas reducen este valor pensando que reducirá el tamaño de archivo o cambiará cómo se ve la imagen en pantalla. No hace ninguna de las dos cosas. El DPI (puntos por pulgada) solo tiene sentido para la impresión — le dice a una impresora con qué densidad depositar la tinta. Las pantallas usan píxeles, no puntos por pulgada, y el valor de DPI en un JPEG o PNG es ignorado por todos los navegadores.

Reducir una imagen de 300 DPI a 72 DPI en un editor de imágenes no la hace más pequeña ni más borrosa en pantalla — a menos que el editor también remuestreara (redimensionara) las dimensiones en píxeles al mismo tiempo. Comprueba si las dimensiones en píxeles cambiaron. Si no lo hicieron, el cambio de DPI no tuvo efecto en la versión web.

Lista de verificación de prevención

• Sube las imágenes en 2× el ancho de visualización CSS para nitidez retina
• Sube con calidad JPEG 85+ o calidad WebP 82+ antes de la recompresión de la plataforma
• Comprueba las dimensiones de imagen recomendadas por la plataforma antes de subir
• Nunca amplíes una imagen pequeña para llenar un espacio grande — parte de una fuente de alta resolución
• Usa WebP o AVIF en vez de JPEG donde la plataforma lo permita — manejan la compresión de calidad con más elegancia