No existe una resolución única que funcione para todas las imágenes. La medida correcta depende del espacio donde se mostrará, el tipo de contenido y la densidad de la pantalla.
Para una imagen incluida dentro de un artículo, normalmente basta con un ancho de entre 1200 y 1600 píxeles. Una fotografía de 4000 píxeles no se verá mejor si la web solo dispone de un espacio de 1000 píxeles, pero sí tardará más en cargar.
En nuestras pruebas, reducir primero las dimensiones y después ajustar el nivel de compresión ofreció mejores resultados que limitarse a bajar la calidad de una imagen demasiado grande.
Qué significa realmente la resolución de una imagen
La resolución digital se expresa mediante dos dimensiones: ancho y alto en píxeles. Una imagen de 1920 × 1080 contiene 1920 píxeles horizontales y 1080 verticales.
Cuantos más píxeles tenga una imagen, mayor será su capacidad para mostrar detalles. Sin embargo, esto también aumenta la cantidad de información que debe almacenar el archivo.
Debes diferenciar tres conceptos:
- Dimensiones: cantidad de píxeles de ancho y alto.
- Peso: espacio que ocupa el archivo en KB o MB.
- Calidad: nivel de detalle, nitidez y ausencia de defectos visibles.
Una fotografía puede medir 3000 × 2000 píxeles y ocupar 500 KB si está bien optimizada. Otra con las mismas dimensiones puede superar los 5 MB por utilizar un formato o una configuración diferente.
Qué resolución elegir según el uso
La mejor forma de comprimir imágenes sin perder calidad es adaptarlas a su tamaño final. No necesitas conservar todos los píxeles capturados por una cámara si la imagen terminará ocupando una pequeña sección de una página.
Imágenes para artículos y blogs
Para una imagen que ocupa el ancho del contenido de un artículo, puedes utilizar:
- 1200 píxeles de ancho para blogs con columnas convencionales.
- 1600 píxeles para pantallas amplias o imágenes con detalles pequeños.
- Entre 800 y 1200 píxeles para imágenes insertadas entre párrafos.
- Entre 400 y 800 píxeles para miniaturas o tarjetas.
Una medida práctica para una portada horizontal es 1200 × 675 píxeles. Mantiene una proporción panorámica y ofrece buena definición sin producir un archivo excesivamente pesado.
Banners y cabeceras de una web
Las imágenes que ocupan prácticamente toda la pantalla pueden necesitar entre 1600 y 1920 píxeles de ancho.
Si el diseño muestra la imagen en un máximo de 1440 píxeles, exportarla a 1600 píxeles suele dejar un margen suficiente. Para pantallas de alta densidad puedes preparar una versión adicional de mayor resolución.
La guía de imágenes adaptables de MDN explica que una web puede ofrecer varias resoluciones para que el navegador elija la adecuada según la pantalla. Así, un teléfono no tiene que descargar el mismo archivo grande utilizado en un monitor.
Imágenes para documentos y presentaciones
Para documentos que se verán principalmente en pantalla, un ancho de 1200 a 1600 píxeles suele ser suficiente.
En una presentación, una imagen a pantalla completa puede prepararse a 1920 × 1080 píxeles. Si ocupará solamente la mitad de una diapositiva, normalmente no necesita esa resolución completa.
Un error común que vemos a menudo es insertar fotografías de 10 o 15 MB directamente en Word o PowerPoint. Aunque el programa reduzca su tamaño visual, el archivo original puede permanecer dentro del documento y aumentar considerablemente su peso.
Imágenes para redes sociales
Las medidas recomendadas pueden cambiar entre plataformas. Lo más seguro es comprobar las dimensiones solicitadas al momento de publicar.
Como regla práctica:
- Conserva una copia original de alta resolución.
- Crea una versión específica para cada publicación.
- Mantén el contenido importante alejado de los bordes.
- No amplíes una imagen pequeña para alcanzar una medida superior.
- Comprueba la vista previa antes de publicar.
Una imagen horizontal de 1200 píxeles de ancho suele ser suficiente para publicaciones web habituales, pero el recorte dependerá de cada plataforma.
Imágenes para imprimir
La impresión funciona de manera diferente. Aquí sí importa la relación entre píxeles y tamaño físico.
Para una impresión nítida se suele trabajar alrededor de 300 píxeles por pulgada. Puedes calcular las dimensiones con esta fórmula:
Tamaño en pulgadas × 300 = cantidad de píxeles
Por ejemplo, una fotografía que se imprimirá con 6 pulgadas de ancho debería tener aproximadamente 1800 píxeles horizontales.
Si la imagen solo se utilizará en una página web, cambiar el valor de 72 a 300 ppp sin modificar sus dimensiones en píxeles no mejora su calidad visible. Para pantalla, lo importante es el número real de píxeles y el tamaño al que serán mostrados.
La regla del tamaño de visualización
Antes de comprimir, averigua cuánto espacio ocupará la imagen.
Si una fotografía se mostrará a 800 píxeles de ancho, puedes preparar estas versiones:
- Una versión de 800 píxeles para pantallas convencionales.
- Una versión de 1200 píxeles para una densidad intermedia.
- Una versión de 1600 píxeles para pantallas de alta densidad.
No siempre necesitas entregar la versión más grande a todos los usuarios. Las imágenes adaptables permiten que el navegador seleccione un archivo según el tamaño de la pantalla.
Notamos que al usar esta configuración, la diferencia visual era mínima en el tamaño normal de lectura, mientras que el peso descargado en dispositivos pequeños se reducía considerablemente.
Cómo comprimir una imagen sin perder calidad visible
Puedes aplicar este procedimiento con cualquier editor que permita redimensionar y exportar imágenes.
- Conserva una copia del archivo original. No trabajes sobre la única versión disponible.
- Identifica dónde se utilizará la imagen. Anota el ancho máximo que tendrá en la web, el documento o la presentación.
- Revisa sus dimensiones actuales. Si tiene 5000 píxeles de ancho y solo se mostrará a 1200, puedes reducirla sin afectar su apariencia en ese contexto.
- Mantén activada la proporción. Al cambiar el ancho, el alto debe ajustarse automáticamente para evitar que la fotografía quede estirada.
- Introduce la resolución necesaria. Para una imagen de artículo, comienza probando con 1200 o 1600 píxeles de ancho.
- Selecciona el formato correcto. Utiliza JPEG, WebP o AVIF para fotografías y PNG para gráficos que necesiten transparencia o bordes muy definidos.
- Ajusta la calidad gradualmente. Empieza con una configuración media-alta y observa el resultado antes de reducirla más.
- Compara la imagen original con la comprimida al tamaño real de visualización. No evalúes únicamente con un zoom del 300 %, porque el usuario normalmente no la verá así.
- Revisa zonas difíciles como texto pequeño, cabello, hojas, sombras, degradados y bordes de objetos.
- Guarda la versión final con un nombre diferente y comprueba su peso antes de subirla.
Qué nivel de calidad utilizar
Los porcentajes no funcionan igual en todos los programas. Un valor de 80 en un editor puede producir un resultado distinto en otro.
Como punto de partida puedes probar:
- JPEG: calidad entre 75 y 85.
- WebP: calidad entre 70 y 85.
- AVIF: calidad entre 45 y 65.
- PNG: reducción de colores o compresión optimizada sin eliminar transparencia.
Estos valores son referencias, no límites obligatorios. Una fotografía con mucho cielo o fondos suaves puede soportar una compresión mayor. Una captura de pantalla con texto pequeño necesita más cuidado.
En nuestras pruebas, WebP con una calidad aproximada de 80 mantuvo una apariencia limpia en fotografías para artículos y generó archivos más ligeros que el JPEG original. El resultado puede variar según la imagen.
Qué formato conserva mejor la calidad
JPEG
Es compatible con prácticamente cualquier programa. Funciona bien con fotografías, pero cada nueva exportación con pérdida puede degradar el archivo.
Evita abrir, guardar y volver a comprimir el mismo JPEG varias veces. Trabaja desde el original siempre que sea posible.
WebP
Ofrece una buena relación entre calidad y peso. Es una opción apropiada para portadas, fotografías e imágenes de artículos.
También permite transparencia, aunque un PNG puede ser preferible cuando necesitas conservar gráficos muy definidos sin pérdidas visibles.
AVIF
Puede producir archivos pequeños con buena calidad, especialmente en fotografías. La exportación puede tardar más y conviene comprobar la compatibilidad del sistema donde será utilizado.
PNG
Es útil para capturas de pantalla, diagramas, logotipos, ilustraciones planas y archivos con transparencia.
No suele ser la mejor elección para fotografías complejas, porque puede generar archivos considerablemente más pesados.
Errores que reducen demasiado la calidad
Evita estas prácticas:
- Cambiar una imagen grande a una resolución extremadamente pequeña.
- Ampliar nuevamente un archivo después de haberlo reducido.
- Comprimir varias veces la misma copia.
- Utilizar JPEG para gráficos con texto muy fino.
- Guardar todas las fotografías como PNG.
- Evaluar únicamente el peso y no la apariencia.
- Eliminar el archivo original después de exportar.
- Usar una sola resolución para móviles y monitores grandes.
Un archivo pequeño no siempre está bien optimizado. Si aparecen bloques, bordes borrosos, manchas en los degradados o texto difícil de leer, la compresión fue excesiva.
Cómo saber si la pérdida es visible
Abre la imagen original y la versión comprimida una junto a la otra.
Comprueba estos elementos:
- Nitidez del sujeto principal.
- Legibilidad de textos y números.
- Bordes de objetos sobre fondos contrastados.
- Transiciones suaves en cielos y sombras.
- Detalles en zonas oscuras.
- Colores similares al archivo original.
- Ausencia de bloques o manchas alrededor de los objetos.
Primero revisa ambas imágenes al tamaño en que aparecerán publicadas. Después utiliza un zoom moderado para detectar defectos importantes.
Si solo notas diferencias al ampliar exageradamente la imagen, pero no durante una visualización normal, la compresión probablemente sea adecuada para ese uso.
Una configuración práctica para empezar
Si necesitas una opción sencilla para imágenes de artículos, prueba esta configuración:
- Resolución: 1200 × 675 píxeles.
- Formato: WebP.
- Calidad: entre 78 y 82.
- Perfil de color: sRGB.
- Peso orientativo: entre 100 y 300 KB, dependiendo del contenido.
Para una cabecera de pantalla completa puedes probar con 1600 o 1920 píxeles de ancho. En fotografías con muchos detalles, el archivo podría necesitar un peso mayor para conservar una buena apariencia.
La prioridad no debe ser alcanzar un número exacto de KB, sino encontrar el archivo más ligero que todavía se vea bien en su tamaño final.
Puedes aplicar estas pruebas gratuitamente y de forma segura con Squoosh, que permite comparar la imagen original y la comprimida en el navegador, o con GIMP, un editor gratuito para redimensionar y exportar archivos. Conserva siempre el original y prueba varias configuraciones antes de reemplazar una imagen publicada.