COMO SE FORMA UNA
IMAGEN
Conceptos teóricos
TIPOS DE IMÁGENES
• Existen dos grandes tipo des imágenes:
– Vectoriales: Utilizada principalmente para
representar dibujos que requieran gran nivel
de detalle. Sólo representa dibujos.
– Mapa de Bits: Utilizado en todo ámbito, pero
principalmente representa fotografías. Existen
varios formatos de compresión, algunos de
éstos son ampliamente utilizados en páginas
web.
IMAGEN VECTORIAL
IMÁGENES VECTORIALES
• Los vectores son líneas curvas o rectas, sencillas o
complejas, que vienen dadas por operaciones
matemáticas.
• Los programas de diseño vectorial se encarga de hacer
todos los cálculos geométricos y matemáticos, dejando al
usuario sólo la tarea de dibujar con figuras geométricas.
• El tipo de archivo genérico para guardar o compartir
imágenes vectoriales es el de extensión .eps. Otros
formatos: ai (Adobe Ilustrator), svg.
• Siempre que guardemos o enviemos a alguien un archivo
vectorial, sólo se podrá abrir con programas del tipo de
Illustrator, o similar.
CARACTERÍSTICAS
• Resolución??:
– No tiene
– Son independientes de la resolución, ya que no dependen de
una cuadrícula de píxeles dada. Por lo tanto, tienen la máxima
dimensión que permite el formato en que se almacena.
Imagen vectorial tamaño 100% Imagen vectorial
tamaño 200%
Tamaño imagen vectorial
Imagen vectorial tamaño
500%
Imagen vectorial tamaño
1000%
CARACTERÍSTICAS
• Ventaja:
– Se puede ampliar el tamaño de una imagen a
voluntad sin sufrir la pérdida de calidad que
sufren los mapas de bits.
– Permiten mover, estirar y girar imágenes de
manera relativamente sencilla.
– Usado también en imágenes de tres
dimensiones tanto dinámicas como estáticas.
IMAGEN MAPA DE BITS
IMÁGENES MAPA DE BITS
• Están construidas mediante una gran cantidad de
cuadraditos, llamados pixel dispuestos en una
cuadrícula.
• Cada uno de estos cuadraditos está relleno de un único
color, pero la sensación obtenida es el resultado de
integrar visualmente, en la retina, las variaciones de
color y luminosidad entre píxeles vecinos.
• Las imágenes de mapa de bits, también llamadas
bitmap, son las más adecuadas para reproducir objetos
sutilmente iluminados y escenas con gran variación
tonal.
IMÁGENES MAPA DE BITS
• Parte de una imagen ampliada en extremo,
donde se ven cada uno de sus pixeles
IMÁGENES MAPA DE BITS
Bitmap tamaño
100%
Bitmap tamaño
200%Bitmap tamaño
4500%
Pixel
IMÁGENES MAPA DE BITS
• Es el tipo de imagen utilizado para la fotografía y el cine.
• La calidad de la imagen dependerá de la cantidad de
píxeles utilizados para representarla (Mayor cantidad de
pixeles = mayor calidad)
693.600 pixeles 3.750 pixeles
8 CARACTERÍSTICAS DE LA
IMAGEN DIGITAL
La construcción de una imagen digital,
depende de muchos factores los cuales es
importante conocer para comprender mejor
como se forman este tipo de imágenes.
Estos factores son a su vez características
de estas imágenes.
PIXEL
• Un píxel es cada uno de los puntos o elementos
más pequeños que forman una imagen.
Pixel
PIXEL
• El color que compone cada píxel se obtiene
mediante tres colores básicos: rojo - verde -
azul. Modelo RGB (Red/Green/Blue).
• Los tres colores combinados pueden reproducir
más de 16 millones de colores.
• El tamaño de una imagen digital suele
expresarse como el producto del número de
píxeles en horizontal y en vertical.
Modelo de color
• El modelo de color es el color
de cada píxel dependiendo del
modelo empleado. Como
hemos comentado en el punto
número 1, el más habitual es el
RGB que, combinando
diferentes intensidades de los
tres colores (rojo, verde y azul),
obtiene toda la gama de
colores.
• En el ejemplo de la derecha
cada color tiene un valor entre 0
y 255 (256 valores distintos por
color). Esto significa que se
pueden formar 2563
colores distintos.La combinación de
estos 3 colores …
…forman este único
color
RESOLUCIÓN
• Indica el nivel de detalle con el que puede observarse la
misma. Se utiliza para definir la nitidez de una imagen
digital.
• Mayor resolución = imagen digital con más detalle y
calidad visual.
• El tamaño de los píxeles varía en cada dispositivo,
creando así diferentes resoluciones de pantalla en una
imagen digital, donde podemos encontrar más
resolución en una u otra.
• La resolución se mide en ppp (pixeles por pulgada).
Cuanto más pixeles en una misma pulgada tiene una
imagen, decimos que cuenta con mayor resolución.
RESOLUCIÓN
• La siguiente imagen tiene una resolución de 5 ppp
TAMAÑO
• El tamaño de la imagen digital va
completamente relacionado con los píxeles de
la misma y su resolución.
• Cuanto más píxeles tenga una imagen digital,
más grande la podremos hacer sin notar pérdida
de calidad.
• El tamaño de la imagen digital se define con las
dimensiones en píxeles.
• Observación: El tamaño de una imagen puede
ser irrelevante en el diseño digital, pero se torna
importante en el diseño impreso
CALCULAR TAMAÑO
En la ilustración se ve como GIMP muestra
el tamaño de una imagen: 640 x 320 píxeles.
Calcular el tamaño de imagen en pixeles:
dividir dimensiones en pixeles, entre la
resolución:
Ancho: 640 / 96 = 6,67 pulgadas
Alto: 320 / 96 = 3,33 pulgadas
Dimensión en centímetros: realizar la
conversión, teniendo en cuenta la siguiente
relación: 1 pulgada = 2,54 cm.
Por lo tanto, si convertimos de pulgadas a
cm:
Ancho: 6,67 x 2,54 = 16,94 cm
Alto: 3,33 x 2,54 = 8,46 cm
PIXELADO
• Se refiere a cuando ampliamos una imagen lo suficiente
como para que sus pixeles sean visibles, generando a la
vista una perdida de calidad.
COMPRESIÓN
• Esta característica nos permitirá poder
comprimir nuestra imagen digital para poderla
guardar, enviar y compartir de manera más
rápida, ya que la descarga de la misma será
más rápida debido a que el archivo que
enviemos será menos pesado.
• Dependiendo del formato, en la compresión
puede haber pérdidas, ya que disminuye el
tamaño de la imagen en detrimiento de su
calidad.
Formato BMP
• Fue desarrollado por Microsoft e IBM en
forma conjunta, lo que explica su uso
particularmente amplio en plataformas
Windows.
• Un archivo BMP guarda el 100% de sus
pixeles, por lo tanto no se puede
comprimir y por lo tanto no sufre pérdidas
de calidad. Resulta adecuado para guardar imágenes
que se desean manipular posteriormente. Admite
cualquier tipo de resolución y una profundidad de color
máxima de 24 bits (Mas de 16 millones de colores).
Formato BMP
• Ventajas: Guarda gran cantidad de información
de la imagen. Siempre se mantiene la versión
original de la imagen.
• Desventajas: Al no utilizar ningún método de
compresión, el archivo tiene un tamaño
extremadamente grande.
• Usos: Es usado en diseño gráfico para guardar
imágenes que luego se quieren volver a
manipular.
Formato JPG - JPEG
• Joint Photographic Experts Group
• Es un formato de compresión con pérdidas, ya
que desecha aquellos pixeles que son imperceptibles
para el ojo humano, por lo que las pérdidas apenas
se notan.
• El método jpg está basado en el hecho de que el ojo
humano percibe peor los cambios de color que las
variaciones de luminosidad. jpg divide la información de la imagen
en dos partes: color y luminosidad y las comprime por separado.
• Es un formato de buena calidad ya que admite modos en escala de
grises con una profundidad de 8 bits y en color hasta 24 bits.
Permite la carga progresiva en un navegador, lo que lo ha
convertido en el formato estándar en la web.
Formato JPG - JPEG
• Se debe tener en cuenta que la compresión se produce
automáticamente cada vez que se guarda el archivo, por lo que es
aconsejable guardar en este formato una única vez, osea, cuando la
imagen esté ya terminada.
• Ventajas: Admite una amplia combinación de colores (más de 16
millones). Es ideal para publicar fotografías en la web. Representa
muy adecuadamente los colores reales.
• Desventajas: Cada vez que se guarda una imagen luego de editar,
se pierde información en la compresión. Por esto no es aconsejable
modificar la imagen una y otra vez; siempre se debe de realizar las
modificaciones desde un mismo original.
• Usos: Cámaras digitales, páginas web que deseen mostrar
imágenes de buena calidad.
GIF
• Graphics Interchange Format
• Si bien es de baja calidad y ofrece una
escasa profundidad de colores,
permite unir varios cuadros para
formar una animación. Cosa
que lo hizo bastante popular.
Cada cuadro puede tener una paleta de hasta 256
colores, lo que los hace livianos y el archivo animado
resultante se reproduce sin problemas gracias a ese
mismo bajo peso.
• Si bien no se utiliza de forma estática por su baja calidad,
las animaciones en GIF son muy populares y,
actualmente, son una verdadera moda en la web.
GIF
• Ventajas: Es un formato idóneo para publicar dibujos en
la web. Soporta animaciones.
• Desventaja: No es recomendable para fotografías de
cierta calidad ni originales ya que solo soporta hasta
256 colores (y el color real o verdadero utiliza una
paleta de más de 256 colores).
• Usos: Imágenes animadas (gif animados). Banners en
páginas web. Fotografías de baja calidad también para
web.
PNG
• Portable Network Graphic
• Se trata de un formato de compresión
sin pérdidas (o muy pocas), con una
profundidad de color de hasta 16 bits
para blanco y negro y 48 bits en color
real. Además, soporta la transparencia de canal alfa, es
decir, la posibilidad de definir 256 niveles de
transparencia, mientras que el formato GIF permite que
se defina como transparente sólo un color de la paleta.
También posee una función de entrelazado que permite
mostrar la imagen de forma gradual.
PNG
• Ventajas: La compresión que ofrece este formato es
(compresión sin pérdida) de 5 a 25% mejor que la
compresión GIF. Puede representar una muy amplia
variedad de colores (más de 200 billones)
• Desventaja: el tamaño de los archivos png, debido a la
capa de transparencia, siempre es mayor que el de los
archivos jpg. También puede generar tamaños mayores si
se trata de una fotografía con muchas variedad de color.
• Usos: Fotos de muy buena calidad para páginas web.
Banners en páginas web. Debido a la capacidad de
generar fondo transparente, es muy utilizado en iconos de
buena calidad para web o programas.
Imágenes y la web
• De los formatos antes vistos, una página
web soporta los siguientes:
– JPG
– GIF
– PNG
FUENTES
• Ampliar información:
– https://www.deustoformacion.com/blog/diseno
-produccion-audiovisual/caracteristicas-
imagen-digital-vectorial
– https://www.deustoformacion.com/blog/diseno
-produccion-audiovisual/8-caracteristicas-
imagen-digital-que-debes-conocer