Solución de problemas · Herramientas de imagen
Por qué tus imágenes se ven borrosas en la web
Subes una foto a tu web y, aunque en tu ordenador se veía perfecta, en pantalla aparece borrosa o pixelada. El archivo original está bien: el problema ocurre en el camino entre tu disco y la pantalla del visitante.
Las imágenes borrosas casi siempre tienen una explicación técnica concreta: la imagen es más pequeña de lo necesario, la plataforma la ha recomprimido o el código la estira más allá de su tamaño real. Veamos cómo identificar tu causa y corregirla.
Causa 1: la imagen es más pequeña que el espacio que ocupa
El error más común. Si subes una imagen de 800 px de ancho y se muestra en un contenedor de 1200 px, el navegador «inventa» los píxeles que faltan y el resultado es borroso.
Cómo detectarlo: abre la imagen en una pestaña nueva (clic derecho) y compara su tamaño real con el tamaño mostrado. Si el mostrado es mayor, ahí está el problema.
La solución: sirve imágenes con al menos el tamaño de visualización, preferiblemente el doble para pantallas de alta densidad. Define primero el tamaño en tu diseño y prepara cada imagen a ese tamaño antes de subirla, por ejemplo con la herramienta de recortar imagen de Tótem (usatotem.com/herramientas-imagen/recortar-imagen/).
Causa 2: compresión excesiva al guardar
Guardar un JPG con calidad muy baja introduce artefactos: bloques, halos en los bordes y pérdida de detalle fino, sobre todo en textos dentro de la imagen.
Cómo detectarlo: amplía la imagen y busca bloques de color en degradados suaves o halos sucios alrededor de las letras.
La solución: vuelve a exportar desde el original con calidad 70–85, el punto dulce entre peso y nitidez. Nunca recomprimas un JPG ya comprimido: parte siempre del original, que debes conservar sin comprimir.
Causa 3: la plataforma genera sus propias versiones
WordPress, redes sociales y gestores de contenido crean miniaturas automáticamente. Si la plantilla usa una versión pequeña en un espacio grande, se verá borrosa aunque tu original sea perfecto.
Cómo detectarlo: abre la URL de la imagen; si el nombre incluye dimensiones («-300x200», «thumbnail»), estás viendo una versión generada, no tu original.
La solución: sube la imagen al tamaño que el tema espera o regenera las miniaturas tras cambiar de plantilla. Consulta las dimensiones de cada ubicación (cabecera, destacada, galería) y prepara las imágenes a esos tamaños exactos antes de subirlas.
Causa 4: CSS que deforma la imagen
Un CSS con width y height fijos puede obligar a la imagen a proporciones distintas de las suyas, estirándola o aplastándola.
Cómo detectarlo: si además de borrosa se ve «aplastada», inspecciona el elemento (F12) y mira si el CSS fuerza dimensiones distintas a las naturales.
La solución correcta es recortar la imagen a la proporción exacta del diseño antes de subirla, en vez de dejar que el CSS la deforme. Con la herramienta de recortar imagen de Tótem (usatotem.com/herramientas-imagen/recortar-imagen/) fijas la relación de aspecto (16:9, 1:1, 4:3) y obtienes el encuadre perfecto.
Causa 5: formato inadecuado para el contenido
Un logotipo guardado como JPG se ve borroso en los bordes por la compresión con pérdida; una foto en PNG pesa muchísimo sin ganar nitidez.
Cómo detectarlo: bordes «sucios» con halo en textos o iconos indican JPG donde pedía PNG; una foto de varios megabytes en PNG indica el error inverso.
La solución: gráficos, logotipos y capturas con texto en PNG; fotografías en JPG (calidad 70–85) o WebP. Regla simple: ¿es foto? JPG/WebP. ¿Es gráfico con bordes nítidos? PNG.
Flujo de trabajo para imágenes siempre nítidas
Antes de subir, pregúntate: ¿a qué tamaño se mostrará?, ¿qué proporción necesita?, ¿es foto o gráfico? Las respuestas definen todo.
Recorta a la proporción exacta, ajusta al doble del tamaño de visualización para pantallas retina y exporta en el formato adecuado. Luego comprueba el resultado en un móvil real, no solo en el monitor: ahí es donde más se notan los problemas de nitidez. Con este hábito, las imágenes borrosas desaparecen de tu web.
Herramientas gratuitas mencionadas
Recortar imagen
Recorta tus fotos online con precisión: arrastra la selección y fija proporciones como 1:1 o 16:9.
Usar gratisCompresor de imágenes
Comprime tus fotos al instante: reduce el peso sin perder calidad visible, en JPG, PNG o WebP.
Usar gratisRedimensionar imagen
Cambia el tamaño de tus fotos por píxeles o porcentaje, con o sin mantener la proporción.
Usar gratisPreguntas frecuentes
¿Por qué se ve bien en mi móvil pero borrosa en la web?
La galería muestra el original; la web muestra una versión redimensionada o recomprimida por la plataforma. Compara el tamaño real del archivo subido con el mostrado: la versión web es más pequeña o tiene más compresión.
¿Subir imágenes más grandes siempre es mejor?
Hasta cierto punto: el doble del tamaño de visualización ayuda en pantallas retina, pero más allá solo aumenta el peso sin mejorar la nitidez visible. El equilibrio está en el doble del tamaño mostrado.
¿WebP se ve más nítido que JPG?
A igual peso, WebP conserva mejor el detalle, así que puede verse más nítido con archivos más ligeros. Pero la causa de una imagen borrosa rara vez es el formato: revisa primero tamaño y compresión.
En resumen
Las imágenes borrosas no son mala suerte: son imágenes demasiado pequeñas, demasiado comprimidas o deformadas por el código. Cada causa tiene prueba sencilla y solución clara.
Prepara cada imagen a su tamaño y proporción exactos antes de subirla —con la herramienta de recorte de Tótem lo haces en segundos— y la nitidez dejará de ser un problema.