Source: https://leondesarrollo.es/tutorial/conceptos-basicos-sobre-las-imagenes/
Timestamp: 2020-05-26 20:47:45+00:00

Document:
Conceptos básicos sobre las imágenes
3 abril 2020 / 0 comentarios
Vamos a hacer un repaso rápido de conceptos básicos sobre las imágenes, ya que es necesario para entender el proceso.
Además explicaremos porqué pueden perder calidad las imágenes.
Resolución para web, redes sociales y pantallas en general
Para que sirven las imágenes con más resolución
Formatos luz
La compresión y la pérdida de calidad
Calidad y resolución según su utilización
Calidad para web, redes sociales y reproducción por pantalla
Calidad para impresión
Ya entendemos los conceptos básicos sobre las imágenes
El píxel es la unidad mínima en la que podemos dividir una imagen. Realmente es un pequeño cuadrado con un color uniforme en su interior.
Es uno de los conceptos básicos sobre las imágenes que debemos entender para poder trabajar con ellas.
La unión de dichos pixeles en forma de matriz (ancho x alto) compone una imagen.
Cuantos más pixeles de ancho y de alto tengamos mayor será su dimensión, y cuanto más pequeños sean dichos píxeles mayor será su calidad o resolución.
Píxeles de una imagen
Las dimensiones se definen en píxeles, y es la relación de ancho x alto. Por ejemplo: 1800×1300.
Con respecto a las proporciones, podemos tener los siguientes casos:
Ancho > Alto: Imagen horizontal.
Ancho < Alto: Imagen vertical.
Ancho = Alto: Imagen cuadrada.
La expresión de «los megapixeles» se ha explotado hasta llegar a condicionar el precio de una cámara de fotografías o un teléfono, pero ¿qué es?
Los megapixeles sencillamente es el resultado de multiplicar la anchura por la altura (el número total de pixeles). Vamos a utilizar como ejemplo las dimensiones anteriores:
Cálculo de los megapixeles de una imagen
1800 x 1300 = 2.340.000px
2.340.000px -> 2,34mpx
Cuando compramos un dispositivo con cámara de fotos no debemos fijarnos únicamente en la resolución (los megapixeles), ya que en muchos casos lo exageran. Los conceptos básicos sobre las imágenes con respecto a la calidad, nos dicen que es más importante el sensor.
En algunos formatos de imagen (como ejemplo png y gif) además de la matriz de pixeles, también hay una capa llamada canal alfa (∝).
El canal alfa (∝) de las imágenes, es una capa que no se aprecia al ojo humano, pero que sirve para definir la opacidad de cada pixel.
Digamos, que cada pixel de la imagen puede tener una opacidad comprendida entre el 0% y el 100%. Dicho valor permite que las imágenes tengan transparencias, o que su forma no sea cuadrada (circular por ejemplo).
La relación de aspecto es el resultado de dividir la anchura entre la altura de la imagen.
RELACIÓN = ANCHO / ALTO
El valor resultante nos permite calcular la relación entre la anchura y la altura, por lo que si queremos redimensionar el ancho de nuestra imagen y no queremos que se pierdan las proporciones debemos calcular la altura dividiendo la anchura actual entre la relación de aspecto.
Imagen: 1800X1300
R. Aspecto: 1800px/1300px = 1,384...
Redimensionamos la anchura:
Nueva anchura: 1500px
Nueva altura: N.ANCHURA/R. ASPECTO = 1500px / 1,384... = 1084px (Se redondea, ya que no se puede dividir un pixel)
Redimensionamos la altura:
Nueva altura: 2000px
Nueva anchura: N.ALTURA*R. ASPECTO = 2000px * 1,384... = 2768px (Se redondea, ya que no se puede dividir un pixel)
Si no queremos que nuestra imagen se deforme, debemos hacer que la relación de aspecto se mantenga SIEMPRE. Para ello activaremos un candado que veremos más adelante.
Proporciones de la imagen, cómo no se debe hacer
Es uno de los conceptos básicos sobre las imágenes que más difíciles son de entender.
La resolución de la imagen define la cantidad de pixeles que contiene un espacio métrico. La unidad métrica utilizada en general el la pulgada (2,54cm).
Se mide en píxeles por pulgada (ppp).
Con la resolución, no solo definimos la información que se almacena por cada pulgada, si no que se define el tamaño físico del pixel.
Cuanta más resolución, más información almacena la imagen, por lo tanto tiene más calidad, y cuanta menos resolución, menos información tendrá la imagen.
Hasta ahora todo muy bonito, pero nos puede surgir otra pregunta ¿por qué no se utiliza la resolución máxima en las imágenes?:
Porque las imágenes ocuparán mucho espacio en el disco duro.
Porque el medio que lo reproduce no analiza toda la información, por lo que será despreciada.
Lo más importante es que no todos los dispositivos interpretan todos los pixeles a la hora de mostrárnoslos (por ejemplo las pantallas o las impresoras), por lo que se han definido resoluciones estándar según el dispositivo utilizado.
Por lo general se suele utilizar 72 ppp y el motivo es que en el momento de la interpretación se desprecia la información sobrante.
Si que es cierto que con con la velocidad que avanza la tecnología de las pantallas, ya admiten más resolución aunque en la mayoría de los casos no es así.
La resolución para impresión es un poco más relativa. Para las impresoras domésticas como las que tenemos la mayoría, con 300ppp es más que suficiente.
En el caso de que la impresión se realice en una máquina profesional, es conveniente informarse previamente de la resolución máxima permitida.
La resoluciones más altas sirven para poder aumentar el tamaño de la imagen sin perder calidad. Todo depende del dispositivo al que estén destinada. Vamos a explicarlo con un ejemplo:
Documento Tamaño Resolución Escala
Original 1800×1300 600ppp 100%
Impresión 3600×2600 300ppp 200%
Web 15000×10833 72ppp 833,33%
El formato de imagen se define por una serie de estándares, aunque aquí sólo vamos a hablar de los más utilizados. También cabe destacar los formatos de imágenes vectoriales, los cuales veremos un poco por encima, ya que su comportamiento nada tiene que ver con los píxeles, y formatos luz.
EL formato de la imagen está definido por la forma que tiene de almacenarse la información y la compresión utilizada. Para identificarlos podemos comprobar la extensión del archivo.
La imágenes Raster son todas aquellas que se componen de un mapa de pixeles (lo que hemos visto anteriormente), y se pueden dividir en:
Formatos sin compresión.
Formatos comprimidos con pérdida.
Formatos comprimidos sin perdida.
JPEG/JFIF .jpeg ó .jpg Si 24 bits No No
JPEG 2000 .jp2 Si 48 bits No No
TIFF .tiff No 48 bits No No
GIF .gif Si 8 bits Si Si
PNG .png Si 24 bits Si No
WebP .webp Si No No
Existen muchos más formatos, pero los más utilizados son estos. Ahora voy a explicar para que se recomienda utilizar cada uno:
Imágenes con transparencia:
Poca calidad (por ejemplo logotipos a 2 colores): GIF.
Alta calidad (imágenes con degradado a transparente): PNG.
Para web: JPEG o PNG.
Impresión: JPEG.
Símbolos, iconos o formas:
Las imágenes vectoriales son aquellas que se definen a partir de fórmulas matemáticas. Dentro de aquellas fórmulas se almacenan puntos, líneas y atributos de las mismas.
Su utilización está tan extendida ya que permite la realización de gráficos a un tamaño indeterminado, ya que únicamente hay que multiplicar o dividir cada fórmula.
Los dos formatos más conocidos son SVG y AI.
Estos últimos años se creó un nuevo formato que permitía almacenar la información exactamente igual que la reciben los sensores de las caras de fotos, por lo que cuanto mejor es el sensor mejor es la calidad.
Dichos formatos permiten la edición de la fotografía como si fueran los ajustes que se realizan en las cámaras. Al no almacenar píxeles, no tienen pérdida alguna.
Si hemos comprendido bien los conceptos básicos sobre las imágenes, utilizando la lógica podemos hacer que nuestro trabajo pierda la mínima calidad.
Como hemos hablado anteriormente muchos formatos de imágenes realizan una compresión de la misma, por lo que generan pérdida de información.
Elegir el formato adecuado es la parte más importante a la hora de su calidad. Voy a explicar unas pautas a seguir desde que tomamos una imagen hasta que la publicamos o la imprimimos para perder la mínima información.
Configurar la cámara en formato RAW (formato luz) o en la máxima calidad JPEG.
No utilizar bajo ningún concepto el zoom digital, ya que lo que hace es recortar la imagen y mostrarla más grande (se muestran más grandes los píxeles o los interpretan inventando los colores).
Almacenarlas en nuestro ordenador la versión original.
Realizar la edición en este orden:
Ajustes de luz o color.
Edición de zonas con la máxima resolución (copiar elementos, borrar parte de la foto, corregir errores).
Recortar la imagen (si es necesario).
Guardar los cambios como archivo nuevo.
A la hora de exportar vamos a elegir el tamaño final (ya sea para web o para imprimir).
Almacenarlo en el formato más adecuado (si es fotografía JPEG).
No guardar los cambios realizados en la exportación, ya que se puede perder información.
Lo que hay que tener en cuenta es que cada vez que pinchamos sobre el botón «Guardar», si trabajamos con un formato de imagen con pérdidas, se perderá información, por lo que es conveniente no guardar el archivo más que lo necesario.
Como es obvio, no podemos aumentar el tamaño más que lo que nos permita nuestra resolución, ya que los programas lo que hacen es interpretar los píxeles. A simple vista se verá bien, pero si aumentamos veremos la falta de definición.
Vamos a resumir un poco todo lo que hemos tratado anteriormente y vamos a ver unas buenas prácticas a seguir si queremos que nuestro trabajo se vea al 100% como nosotros queremos, y no como quiera la máquina.
Las imágenes que se vayan a reproducir por pantalla tienen que cumplir los siguientes requisitos:
Dimensiones: Justo lo que necesitemos (pantalla completa 1600 o 1800px de ancho).
Fotografías: JPEG 60% de calidad.
Logotipos: PNG o GIF.
Animaciones: GIF.
La calidad para impresión depende de la impresora de destino. Por lo general para las impresoras domésticas 300ppp son más que suficientes.
Resolución: 300ppp o el máximo que admita la impresora.
Dimensiones: El máximo posible, el software de impresión se encarga de ajustarlo a los medios.
Formato: JPEG 100% de calidad.
Ahora sólo nos queda aplicarlos. Ya podemos empezar a trabajar con las imágenes al más alto nivel.

References: Resolución 
 resolución

 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 resolución 
 Resolución 
 resolución