El tamaño de una imagen explicado: píxeles, DPI, peso y calidad

Actualizado:

«Hacer la imagen más pequeña» puede significar tres cosas: menos píxeles, un tamaño impreso menor o menos bytes en el archivo. Están relacionadas, pero cambiar una no siempre cambia las otras. Por eso una imagen puede verse nítida en el móvil y borrosa en papel, o pesar 5 MB sin verse mejor que una copia de 300 KB.

Esta guía separa las tres, explica qué hacen realmente los ajustes de DPI y de calidad y respalda los consejos con mediciones: codificamos la misma foto de 1280 × 854 píxeles de una calle junto a un río con distintos tamaños y calidades en Chrome, el motor que usa el redimensionador de nTools, y comparamos los resultados con el original.

Tres tamaños que se confunden con facilidad

La mayoría de los problemas vienen de cambiar uno esperando que cambie otro: subir los DPI para que una impresión salga más nítida, o bajar la calidad para arreglar una foto que simplemente tiene demasiados píxeles.

Píxeles y megapíxeles

Un megapíxel es un millón de píxeles. Una foto de móvil típica de 12 megapíxeles mide 4032 × 3024 píxeles, es decir, 12.192.768 píxeles.

El archivo en disco está comprimido, pero para mostrar o editar la imagen un programa tiene que descomprimirla en todos sus píxeles. A cuatro bytes por píxel (rojo, verde, azul y transparencia), esa foto de 12 megapíxeles ocupa unos 49 MB de memoria, pese lo que pese el archivo. Por eso un teléfono puede ir lento con decenas de fotos grandes a la vez, y por eso una página llena de imágenes sobredimensionadas sigue pesada incluso después de descargarlas.

Nuestra foto de prueba de 1280 × 854 muestra la diferencia entre píxeles y peso. Sin comprimir, a tres bytes por píxel, ocupa 3,3 MB. En PNG, que no pierde nada, 2,3 MB. En JPEG con calidad 82, 323 KB: más o menos una séptima parte del PNG, y a tamaño normal se ve igual.

Los DPI solo importan en papel

Un archivo JPEG puede llevar un valor de densidad: el estándar JFIF tiene un campo para puntos por pulgada o por centímetro, y los metadatos de las cámaras tienen otro parecido. Muchas fotos indican ahí 72 o 300. Ese número no cambia ni un píxel, ni el peso del archivo, ni cómo se ve en pantalla. Las pantallas muestran píxeles, no pulgadas.

Pasar de 72 a 300 DPI sin remuestrear solo reescribe ese campo. Si un formulario pide «300 DPI», lo que suele necesitar son píxeles suficientes para el tamaño impreso. La cuenta es sencilla: ancho impreso = píxeles ÷ píxeles por pulgada, y una pulgada son 2,54 cm.

Tamaño impresoA 150 píxeles por pulgadaA 300 píxeles por pulgada
Foto de 10 × 15 cm591 × 886 px1181 × 1772 px
A4, 21 × 29,7 cm1240 × 1754 px2480 × 3508 px
Foto de 12 MP (4032 × 3024 px)68 × 51 cm34 × 26 cm

Es el servicio de impresión quien dice qué densidad quiere; con ese número, la tabla indica si la foto tiene píxeles suficientes. Añadir píxeles en el ordenador no ayuda, como muestra el apartado sobre ampliar.

Pantallas: píxeles CSS y pantallas nítidas

Las páginas web se maquetan en píxeles CSS, una unidad definida como 1/96 de pulgada. En las pantallas antiguas, un píxel CSS era un punto de la pantalla. Los móviles y muchos portátiles usan ahora dos o tres puntos por cada píxel CSS; los navegadores llaman a esto relación de píxeles del dispositivo (device pixel ratio).

Así, una imagen mostrada a 600 píxeles CSS de ancho necesita unos 1200 píxeles para verse nítida en un móvil con relación 2. Con solo 600 se estira y se ve blanda; con 4000, el visitante descarga píxeles que nunca verá. Las webs pueden ofrecer varios tamaños con el atributo srcset y dejar que cada navegador elija el adecuado para su pantalla.

Redimensionar: reducir es seguro, ampliar no añade nada

Reducir a la mitad el ancho y el alto deja una cuarta parte de los píxeles, y el archivo baja más o menos al mismo ritmo. En nuestra prueba, todo con JPEG de calidad 82:

DimensionesProporción de píxelesPeso JPEGPeso WebP
1280 × 854100 %323 KB288 KB
960 × 64156 %180 KB159 KB
640 × 42725 %89 KB80 KB
320 × 2146 %23 KB21 KB

En sentido contrario, el detalle no vuelve. Redujimos la foto a 320 píxeles de ancho y la volvimos a ampliar a 1280: el resultado obtuvo 0,59 en SSIM, una medida de lo parecidas que son dos imágenes en la que 1 significa idénticas, frente a 0,96 del JPEG a tamaño completo con calidad 82. Se ve claramente borrosa. Ampliar solo reparte los píxeles existentes en más espacio; los ampliadores con IA consiguen que parezca más nítida inventando detalles verosímiles, que no son los originales.

Los navegadores pueden escalar una imagen con un suavizado más o menos cuidadoso; el redimensionador de nTools pide el más alto. Mantén las proporciones al redimensionar o las caras y los círculos se deformarán. Cuando hace falta una forma exacta, como una foto de perfil cuadrada, recorta primero y redimensiona después.

Redimensionar y comprimir imágenes

Qué significa el número de calidad

La calidad no es un porcentaje de nada. En JPEG es una escala de 0 a 100, definida por la biblioteca JPEG de referencia, que controla lo bruscamente que se redondea el detalle; su documentación recomienda entre 50 y 95 para fotos y advierte de que por encima de 95 el archivo crece muchísimo para poca mejora. WebP tiene su propia escala, así que el mismo número no significa lo mismo en los dos formatos.

Nuestras mediciones, con la foto de 1280 × 854 en Chrome y el SSIM frente al original (1 significa idénticas):

CalidadPeso JPEGSSIM JPEGPeso WebPSSIM WebP
50181 KB0,915180 KB0,944
75270 KB0,950231 KB0,963
82323 KB0,962288 KB0,976
92466 KB0,981410 KB0,988
95570 KB0,987474 KB0,990
1001275 KB0,9991306 KB1 (sin pérdida)
PNG2302 KB1 (sin pérdida)––

Destacan tres cosas. Pasar de 95 a 100 más que duplica un JPEG a cambio de casi nada visible. Con el mismo parecido, WebP pesa aproximadamente un tercio menos que JPEG, en línea con la cifra de Google de alrededor de un 30 %: WebP a 82 iguala a JPEG a 90 con 288 KB en lugar de 428 KB. Y en Chrome, WebP a 100 pasa a compresión sin pérdida, que aquí quedó un 43 % por debajo del PNG.

Cuando una web o un programa no dice qué calidad usa, los valores por defecto de Chrome son 92 para JPEG y 80 para WebP; medimos ambos guardando sin indicar calidad. El redimensionador de nTools empieza en 82.

El color es lo primero que se pierde

JPEG guarda por separado el brillo y el color, y el ojo es mucho más sensible al brillo. Por eso la mayoría de los codificadores guardan el color a la mitad de ancho y a la mitad de alto, un esquema llamado 4:2:0: una cuarta parte de la información de color, con poco efecto visible en las fotos. Es el valor por defecto de la biblioteca JPEG de referencia, y Chrome lo usó en todas las calidades que probamos salvo en 100.

Donde se nota es en detalles finos y saturados: texto rojo sobre fondo blanco, líneas de colores en un gráfico o un logotipo. Los bordes se corren. Para capturas de pantalla y gráficos con texto, PNG o WebP sin pérdida evitan el problema, como explica la primera parte de esta serie.

Guardar una y otra vez

Cada vez que un archivo con pérdida se abre, se edita y se guarda, se comprime de nuevo. Cuánto se pierde depende de si cambian los ajustes. Guardamos la foto de prueba diez veces seguidas:

Conserva el original, haz cada copia a partir de él y aplica el cambio de tamaño y de calidad en un solo paso, al final.

Tamaños que funcionan

Estos puntos de partida salen de las mediciones anteriores. Nuestra foto de prueba usó unos 0,3 bytes por píxel con JPEG de calidad 82; las escenas con mucho detalle, como follaje o grava, necesitan más, y los cielos y paredes lisos, menos.

UsoLado largoFormato y calidadPeso aproximado
Imagen en una página webAncho mostrado × 2WebP 75–82 o JPEG 80–85100–400 KB
Correo o mensajería, varias fotos1600–2000 pxJPEG 80–850,5–0,9 MB cada una
Formulario con límite de 1 o 2 MB2000 pxJPEG 80menos de 1 MB
ImpresiónTamaño impreso × la densidad que pida la imprentaJPEG 92–95, o el originalvarios MB
Captura de pantalla o gráfico con textoSin cambiosPNG o WebP sin pérdidasegún el contenido

Gmail permite 25 MB de archivos adjuntos por mensaje en las cuentas personales y convierte lo que pase de ahí en un enlace de Google Drive, así que unas pocas fotos del móvil sin tocar ya pueden llegar al límite.

Todo lo que hacen las herramientas de imagen de nTools ocurre en tu navegador: la foto no se sube a ningún sitio.

Conversor de formatos de imagen

Preguntas frecuentes

¿Pasar de 72 a 300 DPI mejora una foto?

No. Solo reescribe un número dentro del archivo. Los píxeles, el peso y el aspecto en pantalla quedan exactamente igual. Una impresión solo gana nitidez con más píxeles, captados por la cámara, no añadidos después.

¿Por qué mi foto redimensionada se ve borrosa?

Normalmente porque quedó más pequeña que el espacio donde se muestra y luego se estiró, por ejemplo en la pantalla de un móvil con relación de píxeles 2 o 3. Hazla de unas dos veces el ancho con el que se muestra.

¿Qué calidad uso para JPEG?

Entre 75 y 85 sirve para la mayoría de las fotos en pantalla. Por encima de 95 el archivo crece rápido con poca mejora visible, y 100 no es sin pérdida.

¿WebP siempre pesa menos que JPEG?

En fotos con la misma calidad visual suele ser así, alrededor de un tercio menos en nuestra prueba. Comprueba que el destino acepta WebP; algunos programas y formularios antiguos no lo admiten.

¿Se puede ampliar una imagen pequeña sin perder calidad?

No. Ampliar no puede recrear un detalle que nunca se captó. Los ampliadores con IA pueden hacer que el resultado parezca más nítido, pero el detalle añadido es inventado.

¿Por qué mi foto en PNG pesa tanto más que en JPEG?

PNG conserva cada píxel exactamente, lo que va bien para capturas y gráficos. Con una foto, en nuestra prueba dio un archivo unas siete veces mayor que un JPEG con calidad 82, sin diferencia visible a tamaño normal.

Anterior en la serie ← Formatos de imagen explicados: JPEG, PNG, WebP, AVIF y HEIC

Referencias

  1. MDN — <length>: absolute length units (px, in)
  2. MDN — Window: devicePixelRatio property
  3. MDN — Responsive images
  4. MDN — HTMLCanvasElement: toBlob() method
  5. MDN — CanvasRenderingContext2D: imageSmoothingQuality property
  6. JPEG File Interchange Format (JFIF), version 1.02
  7. libjpeg-turbo 3.0.2 — usage.txt (cjpeg: -quality, -sample)
  8. Google for Developers — WebP: Frequently Asked Questions
  9. web.dev — Serve images with correct dimensions
  10. Gmail Help — Send attachments with your Gmail message

Guías relacionadas