Imagina este escenario: comienzas un emprendimiento, haces tu logo con una herramienta gratuita online y decides mandar a hacer 5 camisetas. Envías el logo por correo al proveedor; y cuando llegan las camisetas, ocurre lo impensable: el logo se ve con colores distintos y borroso. Un completo desastre 😱.
Esta y otras historias de terror son más comunes de lo que crees. Pero no te preocupes; aquí encontrarás una comprensión clara de los archivos de imagen más utilizados, sus características y cuándo usar cada uno.
Archivo para WEB vs IMPRIMIR
Hay dos grandes categorías de archivos de imagen:
- Archivos para WEB (archivos bitmap)
- Archivos para IMPRIMIR (archivos vectoriales)
Todos los tipos de archivos - JPG, PNG, PDF, EPS, etc.; pertenecen a una de estas dos categorías, y hay una diferencia fundamental entre ellas.
Los archivos para web son bitmap (mapa de bits): se construyen sobre un conjunto fijo de píxeles.
Según la Universidad de Oxford, un pixel es la unidad básica de una imagen digitalizada en pantalla, compuesta por puntos de color o en escala de grises.
Estos archivos se ven bien mientras no se amplíen; al hacerlo, comienzan a pixelarse y desdibujarse.
Los archivos para imprimir son vectoriales: se construyen con líneas matemáticas en lugar de píxeles, por lo que pueden escalarse y ampliarse sin perder calidad, sin importar el tamaño final.
Ejemplo: si tienes el mismo logo en formato bitmap y en formato vectorial, al ampliarlos el bitmap se ve borroso y el vectorial sigue perfectamente nítido.
¿Recuerdas el escenario del logo borroso en la camiseta? Fue exactamente esto: se usó un archivo bitmap cuando se necesitaba uno vectorial.
Por eso es importante saber que programas como Adobe Photoshop trabajan con bitmaps, mientras que Adobe Illustrator e InDesign trabajan con vectores.
1. Archivos para Web
Son pequeños, optimizados para pantalla y de carga rápida, pero se pixelan si se amplían.
- Tipo de archivo: Bitmap
- Espacio de color: RGB (rojo, verde, azul)
- Resolución: 72 dpi (puntos por pulgada)
- Dimensión: generalmente menos de 1920px de ancho
- Peso: en kilobytes (KB)
Tipos más comunes para web:
- JPEG (Joint Photographic Experts Group) - El más común. Funciona tanto en baja resolución para web como en alta para impresión de fotografías.
- PNG (Portable Network Graphics) - Permite fondos transparentes. Pesa más que el JPEG, pero es ideal para logos y gráficos sobre fondos de color.
- GIF (Graphics Interchange Format) - Permite animaciones cortas sin sonido. Muy usado en redes sociales y mensajería.
- PSD (Photoshop File) - El formato nativo de Adobe Photoshop. Para usarlo en web se debe exportar primero a JPEG o PNG.
2. Archivos para Imprimir
Se crean para ampliarse sin perder calidad. Ideales para impresión, pero suelen ser demasiado pesados para web o correo electrónico.
- Tipo de archivo: Vector
- Espacio de color: CMYK (cian, magenta, amarillo, negro)
- Resolución: 150–300 dpi
- Dimensión: generalmente entre 3000px y 4000px de ancho o alto
- Peso: en megabytes (MB)
Tipos más comunes para imprimir:
- PDF (Portable Document Format) - El más usado para documentos impresos. Puede funcionar también para web.
- EPS (Encapsulated Postscript) - Perfecto para logos y diseños de imprenta. Al ser genérico, tiene más compatibilidad que los archivos AI.
- AI (Adobe Illustrator) - El formato nativo de Illustrator. Generalmente se exporta a PDF o EPS antes de imprimir. Su contenido también puede guardarse como JPEG o PNG.
- INDD (InDesign Document) - Usado para documentos de varias páginas (revistas, catálogos, folletos). Se puede exportar como PDF.
Excepciones
Algunos formatos rompen la regla bitmap/vector:
- SVG (Scalable Vector Graphics) - Es un archivo vectorial ideal para web: escala sin perder calidad y pesa muy poco. Perfecto para íconos y logos en páginas web. Para imágenes complejas con transparencias, PNG sigue siendo mejor.
- RAW - Es el archivo bitmap en “crudo” de cámaras profesionales. Contiene todos los metadatos de la fotografía y es ideal para editar en Lightroom. Muy pesado para web, pero perfecto para impresiones de alta calidad.
Características clave
A. Espacio de color 🎨
Los archivos web están en RGB (rojo, verde, azul); un espacio de color más amplio y vibrante, porque la pantalla emite luz propia que intensifica los colores.
Los archivos para impresión están en CMYK (cian, magenta, amarillo, negro); una mezcla de tintas físicas que, al imprimirse sobre papel o tela, se oscurecen y extienden.
Si diseñas en RGB y lo envías a imprimir, los colores saldrán diferentes. Por eso el diseño debe estar en CMYK desde el inicio.
La próxima vez que trabajes en un editor de imágenes, verifica que el espacio de color corresponda al uso final: RGB para pantalla, CMYK para impresión.
B. Resolución 🖥
La resolución (DPI; dots per inch, o puntos por pulgada) define cuántos puntos de color caben por pulgada en el archivo.
- Web: 72 dpi; archivos ligeros que cargan rápido
- Impresión: 150–300 dpi; archivos pesados que se ven nítidos al ampliar
Una imagen a 500px de ancho a 72 dpi es significativamente más pequeña que la misma imagen a 500px pero a 300 dpi.
Antes de subir una foto a tu página web, optimízala: reduce su resolución y peso para que no ralentice la página.
Recomendamos las herramientas gratuitas ILoveIMG e ILovePDF para optimizar imágenes y PDFs respectivamente.
C. Dimensión 📐
La dimensión se mide en píxeles. Para archivos vectoriales no es crítica (pueden escalarse). Para archivos bitmap, definir la dimensión correcta desde el principio es fundamental; ampliarla después causa pérdida de calidad.
- Web: no más de 1920px de ancho (estándar HD)
- Impresión: entre 3000px y 5000px de ancho o alto
Si subes una foto tomada con tu celular (que puede llegar a 4000px y 6.5 MB), sin optimizar antes, ralentizará drásticamente tu página web.
D. Peso ⚖️
El peso de los archivos se mide en KB (kilobytes) y MB (megabytes):
- Web: siempre tan ligero como sea posible → en KB
- Impresión: archivos de alta resolución → en MB
Conclusiones clave
Estas son las lecciones más importantes; algunas aprendidas a la fuerza:
Haz el logo en Illustrator, no en Photoshop. Illustrator trabaja en vectores, por lo que podrás exportarlo en cualquier tamaño sin perder calidad. Siempre guarda los archivos editables (AI, EPS o PDF) y los exportados (PNG o JPG) en las resoluciones que necesites.
Optimiza las imágenes antes de subirlas a la página web. Una imagen sin optimizar puede pesar 10× más de lo necesario y arruinar la velocidad de carga.
Agregar un bitmap en Illustrator no lo convierte en vector. Si insertas un JPG en un archivo AI, el JPG sigue siendo bitmap. Al ampliar el archivo, lo vectorial se mantiene nítido, pero la imagen importada se pixela.
Imágenes enviadas por WhatsApp pierden calidad. WhatsApp comprime automáticamente las imágenes. Si necesitas enviar un diseño para imprimir, envíalo como “documento adjunto” (botón clip 📎 → “documento”), nunca como imagen. Así se mantiene la resolución original.
Para imprimir: usa PDF o EPS en espacio de color CMYK. Siempre confirma con la imprenta qué archivo y espacio de color necesitan antes de enviar.
Si tienes dudas, pide ayuda. Hay muchas personas dispuestas a orientarte; y de paso evitas una historia de terror 👻.
Si estás en el proceso de crear tu marca o negocio, muy posiblemente ya sabes la importancia de tener una página web profesional. Conócenos y cotiza tu proyecto →
Gracias por leer hasta aquí, y muchos éxitos en tu proyecto 💪
Diseño premium, entrega en 72 horas y hosting incluido desde $450 USD. Sin sorpresas ni letra pequeña.
Quiero mi página web ahora