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