Utiliza esta guía para entender los conceptos básicos de las imágenes y las mejores prácticas al subir o descargar imágenes para obtener los resultados deseados.
Estás generando una imagen (código QR, creativo de medios impresos, boleto, etc.) y no estás seguro:
- Qué tamaño de imagen deberías subir donde sea necesario, especialmente si la unidad requerida está en píxeles
- Qué tamaño de imagen deberías exportar en píxeles para publicar en la web o para imprimir
Esta guía te ayudará a entender la resolución de las imágenes en píxeles.
Aquí tienes algunos conceptos básicos para empezar:
A. Fundamentos de las imágenes
a. Imágenes Raster
Una imagen raster o mapa de bits es una cuadrícula de píxeles individuales que componen colectivamente una imagen. Los gráficos raster representan las imágenes como una colección de innumerables cuadrados diminutos. Cada cuadrado, o píxel, está codificado en un tono o sombra específica.
(Image Credit: Printcnx)
Una imagen raster se define por el número de píxeles en su ancho y alto. Por ejemplo, si una imagen es de 300 x 200, entonces tiene un ancho de 300 píxeles y una altura de 200 píxeles y esta es la 'resolución' de la imagen.
Las industrias de impresión y preimpresión conocen los gráficos raster como contones (de "tonos continuos"). Lo opuesto a los contones es el "trabajo de línea", generalmente implementado como gráficos vectoriales en sistemas digitales.
Los formatos de imagen raster populares incluyen PNG, JPEG.
b. Vectores
Un vector está compuesto por puntos y líneas llamadas trayectorias. Estos puntos y líneas también se colocan en una cuadrícula de píxeles, por lo que tienen una 'resolución' como las imágenes raster.
Como los vectores no están compuestos de píxeles, las imágenes son mucho más nítidas.
(Image Credit: Printcnx)
Los formatos vectoriales populares son SVG, EPS, AI y PDF.
c. Remuestreo
Remuestreo Raster
Cuando se crea una imagen raster (digamos que se toma una fotografía con una cámara) tiene un número fijo de píxeles, es decir, una resolución fija. Sin embargo, a veces, la imagen que necesitamos debería ser de resolución más pequeña o más grande. El proceso de reducción o ampliación de una imagen se llama remuestreo.
Cuando una imagen se reduce, se remapea en una cuadrícula de píxeles más pequeña combinando píxeles de colores similares. Esto a menudo disminuye la calidad de la imagen. El proceso de suavizar los bordes se llama anti-aliasing. La calidad de la nueva imagen depende del algoritmo de remuestreo. Cuanto mejor sea el algoritmo, más cercana será la imagen remuestreada a la imagen original. Ten en cuenta que disminuir la imagen a una resolución mucho más baja resultará en la pérdida de detalles minuciosos.
Cuando una imagen se amplía, se remapea a una cuadrícula de píxeles más grande añadiendo píxeles de colores similares. Esto en la mayoría de los casos 'difuminará' la imagen.
d. Rasterización y Vectorización
La rasterización es el proceso de convertir un vector en una imagen raster. La mayoría de los profesionales primero crean vectores de diseño (digamos un logotipo de marca) en la resolución requerida y luego exportan la imagen en el formato raster requerido—PNG, JPG.
La vectorización es el proceso de convertir una imagen raster en un vector. Esto requiere un algoritmo de software sofisticado y es difícil de hacer, especialmente si una imagen tiene muchos matices.
e. Relación de Aspecto
La relación entre el ancho y la altura de una imagen se llama relación de aspecto. Cuando se redimensiona una imagen, la relación de aspecto debe mantenerse constante para evitar el 'estiramiento' de la imagen.
f. DPI/PPI
Una imagen se define por su resolución, es decir, número de píxeles. El tamaño de la imagen en una pantalla de computadora/TV se determinará por su resolución y la resolución de la pantalla.
Sin embargo, es diferente cuando una imagen se imprime. La impresión requiere 'dimensiones físicas' como pulgadas, milímetros y centímetros.
DPI o PPI es la configuración de una impresora que determina los 'puntos por pulgada' o 'píxeles por pulgada' que se deben imprimir. Cuanto menor sea el DPI, mayor será el tamaño de la imagen.
Los valores de DPI populares son 72, 300 y 600. Para impresión, la configuración ideal es 300 DPI.
Algunos formatos de archivo almacenan un valor de DPI, que es utilizado por las impresoras para determinar el DPI al que se debe imprimir la imagen.
Convirtiendo imágenes de píxeles a pulgadas/cm o viceversa
Digamos que quieres imprimir una imagen en una hoja A4. Y estás diseñando esta imagen en una herramienta de edición de imágenes como Adobe Illustrator, Sketch 3, MS-Paint, o Canva. La mayoría de las herramientas requieren que primero especifiques el tamaño del lienzo/tablero de dibujo en píxeles.
¿Cómo consigues este tamaño?
Sabemos que una hoja A4 mide 8,3 x 11,7 pulgadas. Necesitamos estas dimensiones en píxeles para una impresión de calidad.
En primer lugar, asumiremos que la calidad sea de 300 DPI, es decir, al menos se deben imprimir 300 píxeles en cada pulgada. Con esta suposición, podemos calcular:
Ancho = 8,3 pulgadas x 300 píxeles/pulgada = 2.490 píxeles Alto = 11,7 pulgadas x 300 píxeles/pulgada = 3.508 píxeles Por lo tanto, deberías elegir el tamaño del lienzo/tablero de dibujo de 2.490 x 3.508 píxeles para una impresión A4 de calidad.
Puedes utilizar la herramienta en línea Pixel Calculator para un cálculo rápido.
g. Compresión de imagen sin pérdida
Es posible que tengas una imagen de alta calidad que tiene, por ejemplo, un tamaño de 10MB. Pero la herramienta en línea que estás utilizando para subir/compartir la imagen tiene una restricción de, digamos, máximo 5MB. ¿Qué haces?
Una forma es redimensionar (reducir) la imagen si es innecesariamente grande. Por ejemplo, la mayoría de las pantallas no requieren imágenes de más de 2000 píxeles de ancho o alto.
La segunda opción es 'comprimir sin pérdida' la imagen. La compresión sin pérdida te permite mantener la calidad de la imagen pero disminuye significativamente el tamaño de la misma.
Puedes comprimir sin pérdida las imágenes utilizando la herramienta en línea TinyPNG.
B. Mejores Prácticas de Imagen
Al subir o descargar imágenes, asegúrate de lo siguiente:
1. Siempre sube imágenes en las dimensiones requeridas en píxeles
Por ejemplo, cuando subes una foto de portada de Facebook, Facebook sugiere que el tamaño ideal (mejor calidad) de la imagen debería ser de 1.800 x 704 píxeles.
Subir la imagen en la dimensión correcta garantizará que la imagen sea completamente visible (es decir, que no sea recortada por la herramienta) y de alta calidad (sin desenfoque o pérdida de detalles minúsculos).
Si no estás seguro de la resolución de la imagen que tienes, siempre puedes comprobar las propiedades de la imagen: Haz clic derecho en la imagen > Propiedades (Haz clic derecho en la imagen > Obtener información en Mac)
Si tienes una imagen de una dimensión diferente, podrías tener que recortar partes de la imagen. Puedes hacer esto usando la herramienta de imagen predeterminada en tu computadora—la aplicación Fotos en Windows y Vista Previa en sistemas Mac. Es mejor recortar la imagen tú mismo (y elegir las partes importantes de la imagen que quieres) en lugar de permitir que la herramienta (donde estás subiendo la imagen) lo haga por ti.
Si la herramienta tiene restricciones de tamaño y el tamaño de tu imagen es grande, utiliza la compresión sin pérdida (explicado en la sección anterior).
2. Siempre exporta la imagen en las dimensiones requeridas para una impresión de alta calidad
Si estás exportando una imagen (digamos una imagen de Código QR) y la herramienta te permite exportarla en el tamaño requerido, ¿qué tamaño eliges
Esto depende de dónde irá la imagen—en una pantalla o en un medio impreso.
Si va a ir en una pantalla, depende del área que ocupará en la pantalla. Por ejemplo:
- Un favicon (el icono de un sitio en la pestaña del navegador) es una imagen pequeña y una resolución de 16x16 píxeles será suficiente.
- Un fondo de escritorio o salvapantallas, por otro lado, necesitará coincidir con el tamaño de la resolución de la pantalla, es decir, digamos 2560 x 1600 píxeles para el Macbook Air 2019
En general, es más seguro exportar en una resolución mayor y reducir (si es necesario) que tener una imagen de menor resolución y aumentar (lo que desdibuja la imagen).
Si va a ser impresa, entonces probablemente tienes las dimensiones físicas en pulgadas o cm. Convierte este tamaño en píxeles (método compartido en la sección anterior) y exporta la imagen en el tamaño correcto para obtener los mejores resultados.
3. Cómo elegir el formato de imagen correcto
Si estás exportando una imagen (asumiendo que la herramienta permite la exportación en varios formatos), ¿cómo eliges el formato correcto?
De nuevo, esto depende de dónde irá la imagen—en una pantalla o en un medio impreso.
En general, para pantallas el vectorial (SVG) es mejor. La imagen SVG es más nítida. Pero es posible que no siempre puedas conseguir imágenes (por ejemplo, fotos) en formatos SVG. En ese caso, PNG/JPEG del tamaño correcto debería funcionar bien.
En caso de impresión:
- Si tienes una imagen (como un Código QR) que necesita más diseño/publicación (el diseñador necesita agregar la imagen del Código QR al material de impresión creativo), el vectorial (SVG) es mejor. SVG se puede importar en herramientas profesionales de edición de imágenes como Adobe Illustrator, Sketch 3, etc. De esta manera, el diseñador puede cambiar el tamaño de la imagen según los requisitos sin pérdida de calidad.
- Si estás importando la imagen en programas básicos como MS-Word, entonces PNG, JPEG es mejor ya que estas aplicaciones no pueden abrir archivos SVG. Solo asegúrate de exportar la imagen en el tamaño correcto (o en un tamaño grande si se desconoce el tamaño correcto).
Espero que esto haya sido útil. Si tienes más preguntas, comunícate con nuestro equipo de soporte en support@scanova.io