Print vs Web Images: Resolution, Color, and Format Guide — pic0.ai

Aún recuerdo el día en que un cliente me llamó en pánico. Acababan de recibir 5,000 folletos impresos de su proveedor, y cada imagen se veía pixelada y deslavada. Las mismas imágenes se veían impresionantes en su sitio web. Ese error de $12,000 les enseñó—y me reafirmó a mí—una lección que he estado enseñando durante los últimos 18 años como diseñador de producción: lo que funciona en pantalla rara vez funciona en impresión sin la preparación adecuada.

Soy Marcus Chen, y he pasado casi dos décadas cerrando la brecha entre los medios digitales e impresos como diseñador de producción para agencias que van desde pequeñas boutiques hasta equipos internos de Fortune 500. He preparado archivos para todo, desde tarjetas de presentación hasta vallas publicitarias de 40 pies, y he visto todas las formas posibles en que las imágenes pueden fallar al moverse entre medios. Hoy, voy a compartir todo lo que necesitas saber sobre cómo preparar imágenes tanto para impresión como para la web, para que nunca tengas que hacer esa costosa llamada telefónica.

Entendiendo la Resolución: La Base de la Calidad de la Imagen

La resolución es donde la mayoría de las personas se confunden, y es porque usamos el mismo término—DPI o PPI—para significar diferentes cosas en diferentes contextos. Déjame desglosar esto de una manera que realmente tenga sentido.

Para las imágenes web, medimos la resolución en píxeles. Una imagen de 1920x1080 contiene exactamente 2,073,600 píxeles, y eso es lo único que importa para la visualización digital. Tu monitor no se preocupa por la configuración de DPI incrustada en los metadatos del archivo—simplemente muestra un píxel de imagen por cada píxel de pantalla (al 100% de zoom). Esta es la razón por la cual una imagen de 72 PPI y una imagen de 300 PPI de las mismas dimensiones de píxel se ven idénticas en pantalla. El valor de PPI es esencialmente ignorado por los navegadores y las pantallas.

La impresión es completamente diferente. Aquí, DPI (puntos por pulgada) o PPI (píxeles por pulgada) determina cuántos píxeles se comprimen en cada pulgada física de papel. Una imagen de 300 PPI significa que se imprimen 300 píxeles en cada pulgada lineal, creando 90,000 píxeles por pulgada cuadrada. Esta densidad es lo que crea impresiones nítidas y de aspecto profesional. Si bajas eso a 72 PPI—el viejo estándar web—solo estarás imprimiendo 5,184 píxeles por pulgada cuadrada. La diferencia es inmediatamente visible a simple vista.

Aquí está la matemática que importa: si quieres imprimir una foto de 4x6 pulgadas con calidad profesional (300 PPI), necesitas una imagen de 1200x1800 píxeles. Esa misma imagen mostrada en una página web a tamaño completo sería enorme—probablemente ocupando toda tu pantalla y un poco más. Por el contrario, una imagen web optimizada a 800 píxeles de ancho se imprimiría con solo 2.67 pulgadas de ancho a 300 PPI, o se vería pixelada si se estira a un tamaño de impresión más grande.

Siempre le digo a los clientes que piensen en la resolución como un presupuesto fijo de píxeles. Puedes gastar esos píxeles en un área grande (resolución más baja, impresión más grande) o concentrarlos en un área más pequeña (resolución más alta, impresión más pequeña o detalles más nítidos). Pero no puedes crear píxeles que no existen. Aumentar un 72 PPI imagen web a 300 PPI no agrega detalles—simplemente interpola los píxeles existentes, creando un lío borroso.

El estándar de la industria para impresión profesional es de 300 PPI para fotografías y gráficos detallados. A veces puedes salirte con 250 PPI para impresiones de gran formato vistas desde una distancia, y las vallas publicitarias pueden utilizar tan solo 30-50 PPI porque se ven desde cientos de pies de distancia. Pero para cualquier cosa que alguien sostenga en sus manos—folletos, revistas, tarjetas de presentación—300 PPI es innegociable.

Espacios de Color: RGB vs CMYK Explicado

El problema del espacio de color es donde veo incluso a diseñadores experimentados cometer errores. No se trata solo de convertir de uno a otro—se trata de entender por qué existen estos sistemas y cómo difieren fundamentalmente.

"La configuración de DPI en tu archivo de imagen es metadatos que los navegadores ignoran por completo—lo que importa para la visualización web son las dimensiones en píxeles, punto."

RGB (Rojo, Verde, Azul) es un modelo de color aditivo. Las pantallas emiten luz, y cuando combinas luz roja, verde y azul a plena intensidad, obtienes blanco. La ausencia de luz equivale a negro. Así es como funciona cada pantalla digital, desde tu teléfono inteligente hasta tu monitor 4K. RGB puede representar aproximadamente 16.7 millones de colores (256 tonos de rojo, verde y azul), y contiene algunos colores vibrantes, especialmente en los tonos de cian y verde brillante.

CMYK (Cian, Magenta, Amarillo, Clave/Negro) es un modelo de color sustractivo. Las impresoras comienzan con papel blanco y añaden tintas que absorben (sustraen) ciertas longitudes de onda de luz. La tinta cian absorbe la luz roja, la magenta absorbe la luz verde y la amarilla absorbe la luz azul. En teoría, combinar los tres debería crear negro, pero en la práctica, obtienes un marrón turbio, que es por qué añadimos negro verdadero (la "K") como una cuarta tinta.

Aquí está el tema crítico: CMYK tiene un gamut de color más pequeño que RGB. ¿Esos brillantes azules eléctricos y verdes vibrantes que ves en la pantalla? Muchos de ellos simplemente no pueden ser reproducidos con tintas CMYK. Cuando conviertes una imagen RGB a CMYK, los colores se desplazan—algunas veces drásticamente. Ese verde lima brillante podría volverse un tono más opaco, más olivo. Ese azul eléctrico podría volverse ligeramente púrpura.

Aprendí esta lección temprano en mi carrera al diseñar un logo para una startup de tecnología. Al cliente le encantó el cian-azul vibrante que había elegido—se veía perfecto en la pantalla. Cuando llegaron las tarjetas de presentación, el color era notablemente más opaco y un poco más gris. La impresora no había hecho nada mal; ese color RGB simplemente no existía en el espacio CMYK. Ahora siempre diseño en CMYK desde el principio para cualquier proyecto de impresión, o como mínimo, convierto temprano y muestro a los clientes una prueba suave para que no haya sorpresas.

Para el trabajo web, siempre usa RGB. Es el espacio de color nativo para pantallas, los tamaños de archivo son más pequeños, y tienes acceso a la gama completa de colores mostrables. Para impresión, convierte a CMYK antes de enviar los archivos a tu impresora y utiliza un monitor calibrado o solicita una prueba física para ver cómo aparecerán realmente los colores. Algunas impresoras prefieren hacer la conversión ellas mismas, pero siempre pregunto primero y proporciono archivos RGB con perfiles de color incrustados si ese es su flujo de trabajo.

Una cosa más: nunca conviertas de RGB a CMYK y viceversa múltiples veces. Cada conversión pierde información y desplaza colores. Haz tus ediciones en RGB, luego realiza una única conversión final a CMYK para impresión. Y siempre conserva tus archivos RGB originales como maestros.

Formatos de Archivo: Elegir el Contenedor Correcto

La selección del formato de archivo no se trata solo del software que estás usando—se trata de entender la compresión, el soporte de color y el caso de uso. He visto proyectos fallar porque alguien usó un JPEG para un logo o un TIFF para un sitio web, así que hagámoslo bien.

Para las imágenes web, tus formatos principales son JPEG, PNG, WebP y SVG. JPEG utiliza compresión con pérdida, lo que significa que descarta datos para reducir el tamaño del archivo. Es perfecto para fotografías donde una ligera pérdida de calidad es imperceptible, y normalmente se puede comprimir una foto entre un 60-80% sin degradación visible. Normalmente exporto JPEGs web a un 60-75% de calidad, lo que equilibra maravillosamente el tamaño del archivo y la calidad visual. Una foto de cámara de 5MB podría convertirse en 200-400KB—perfecto para cargas rápidas de página.

PNG utiliza compresión sin pérdida y soporta transparencia, lo que lo hace ideal para logotipos, gráficos con texto y cualquier imagen donde necesites bordes nítidos o fondos transparentes. PNG-8 soporta 256 colores y es excelente para gráficos simples, mientras que PNG-24 soporta millones de colores. El inconveniente es el tamaño del archivo—los PNGs son generalmente de 3-5 veces más grandes que los JPEGs equivalentes. Utilizo PNG para cualquier cosa que requiera transparencia o cuando necesito nitidez perfecta de píxel, como elementos de interfaz o infografías con texto.

WebP es un formato moderno que ofrece tanto compresión con pérdida como sin pérdida, soporte de transparencia y tamaños de archivo 25-35% más pequeños que JPEG a calidad equivalente. El soporte del navegador es ahora excelente (más del 95% de los usuarios), y he comenzado a usar WebP como mi formato predeterminado para nuevos proyectos, con retrocesos a JPEG para antiguos.