DISEÑO DE PÁGINAS WEB

COMO SE FORMA UNA IMAGEN

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.

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.

IMÁGENES VECTORIALES

• Los archivos de imágenes vectoriales se almacenan como

una lista que describe cada uno de sus vectores

componentes, su posición y sus propiedades.

• En cuanto a la resolución, 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 resolución que permite el

formato en que se almacena.

• La ventaja más buscada en los gráficos vectoriales es poder

ampliar el tamaño de una imagen a voluntad sin sufrir la

pérdida de calidad que sufren los mapas de bits. De la misma

forma, permiten mover, estirar y retorcer imágenes de

manera relativamente sencilla.

• Usado también en imágenes de tres dimensiones tanto

dinámicas como estáticas.

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.

• 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.

IMÁGENES MAPA DE BITS

• Parte de una imagen ampliada en extremo,

donde se ven cada uno de sus 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.

• 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.

PROFUNDIDAD DE COLOR

• Es el número de bits utilizados para almacenar

información sobre el color de cada píxel en una

imagen digital.

• También se conoce como la profundidad de

color o bits por píxeles (bpp).

• Conociendo la profundidad de color de una

imagen y la cantidad total de pixeles, se puede

saber el tamaño en bytes que ocupará una

imagen (sin comprimir ) en el disco:

– PIXELES X PROFUNDIDAD = TAMAÑO

PROFUNDIDAD DE COLOR

• Los detalles de las

propiedades de una imagen

nos muestra la profundidad

de color.

• En este caso se muestra

una profundidad de 24 bits.

Es decir que cada pixel

tendrá un tamaño de 24 bits

para representar el color.

PROFUNDIDAD DE COLOR

• Calculemos la cantidad total de

pixeles:

450 x 440 = 198000 pixeles

• Cantidad total de bits que ocupa

la imagen:

198000 x 24 = 4752000 bits

• Convertido a Bytes

4752000 / 8 = 594000 Bytes

• Convertido a KB

594000 / 1024 = 580 KB

• Tener en cuenta que este tamaño corresponde a

una imagen sin comprimir (ejemplo formato bmp)

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).

• 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