Imágenes en la WEB

Publicación de contenidos en la Red

Propiedad Intelectual por Cristina Arroyo de Castro se distribuye bajo una Licencia Creative Commons Atribución 4.0 Internacional.

-Una imagen (del latín imago) es una representación visual de un objeto real o imaginario. Aunque también se aplica como extensión para otros tipos de percepción, como imágenes auditivas, olfativas, táctiles, sinestésicas, etcétera.

Las imágenes que la persona no percibe sino que vive interiormente son denominadas imágenes mentales.

Mientras que se designan como imágenes creadas (o bien como imágenes reproducidas, según el caso) las que representan visualmente un objeto mediante técnicas diferentes: dibujo, diseño, pintura, fotografía o vídeo, entre otras.- (Wikipedia)

Las imágenes pueden ser reales o digitales.

Imagen Digital: Cualquier imagen que es un fichero de ordenador, es decir una imagen creada con una

matriz numérica, generalmente binaria: compuesta por 1 y 0. Es, por tanto, un conjunto de números o bits.

Publicar Imágenes en la web

¿Qué es una imagen?

Existen muchos formatos de imágenes digitales, para elegir la que más convenga debemos tener en cuenta dos características:

● El nº de colores que contenga: más colores = archivo más grande= más bits = más calidad de imagen

● El tipo de compresión: más compresion = archivo más pequeño= menos bits = más pérdida de calidad

Publicar Imágenes en la web

Imágenes Digitales

nº de bits nº máx. de Colores que contiene

8 bits 256

16 bits 65.536

24 bits ( Supera la percepción del ojo humano) 16.777.216

36 bits (Soporta transparencia) 16.777.216 + 256 de niveles de transparencia

Para publicar una imagen en la web debemos encontrar el equilibrio entre calidad y tamaño del fichero

JPG: El más popular

Publicar Imágenes en la web

Formatos

❖ Formato Ideal para publicar en Internet❖ Es el más flexible de los formatos: Permite una gran compresión de la imagen, y por tanto reducir su

tamaño, sin excesiva pérdida de calidad.❖ Son imágenes de 8 bits normalmente pero soporta hasta 24 bits.❖ Usar en fotografías con muchos tonos y calidades.❖ Es el formato por defecto de la mayoría de las cámaras digitales

PNG: Recomendado para imágenes grises o de colores planos o con transparencia

❖ Permite una gran compresión de la imagen sin pérdidas.❖ Son imágenes de 8 bits ❖ Usar en fotografías con pocos colores y que sean planos❖ Ideal para imágenes de alto contraste, y con transparencia

Gif: Formato de imágenes animadas

Publicar Imágenes en la web

Formatos

❖ Formato Ideal para generar animaciones❖ Es el formato para publicar dibujos de alto contraste y colores planos, nunca para fotografías de gran

calidad.❖ Son imágenes de 8 bits.❖ Con la llegada del PNG, ha perdido popularidad

Tiff: Recomendado para imágenes que queremos imprimir

❖ Son imágenes Sin pérdidas de Calidad❖ Genera archivos bastantes grandes no publicables en la web❖ Es el formato ideal si queremos impresiones de mucha calidad.

Raw: Máxima Calidad, pero imágenes muy grandes

Publicar Imágenes en la web

Formatos

❖ Formato Ideal para imprimir con calidad no para publicar en la web❖ Es el formato que no tiene ninguna pérdida de calidad❖ Son imágenes de 36 o 48 bits ❖ Usar en fotografías para imprimir en formatos grandes❖ Ciertas cámaras permiten realizar este fotografía en este formato.

BMP: ❖ Formato de Windows, el más simple de todos.❖ Genera archivos de gran tamaño❖ No sufre pérdidas de calidad de imagen❖ No es recomendable para publicar en internet

❖ Compresión= Calidad de Imagen❖ Guarda siempre una copia de la

imagen original sin comprimir. ¡Cuando se pierde calidad ya no se

recupera!❖ Truco personal: si vas comprimiendo

la imagen poco a poco guardando los cambios, se pierde menos calidad ;)

Recomendaciones a no olvidar

Comparativa

● RGB:○ Red: Rojo- Green:verde- Blue: azul○ Se basa en la creación de colores partiendo de la mezcla de

estos tres primarios○ Puede mostrar colores muy diferentes dependiendo del

dispositivo en el que la veamos la imagen.

● CMYK:○ Cyan: azul - Magenta - Yellow: amarillo- Black:negro○ Se basa en la creación a partir de la mezcla de estos cuatro

colores, básicos para la impresión de una imagen.○ Es necesario utilizar este sistema para controlar la

impresión de nuestras imágenes

Publicar Imágenes en la web

El color de una imagen

❖ RGB= Imágenes digitales❖ CYMK: Para Imprimir

❖ Es complicado controlar la calidad de los colores al cambiar de dispositivos o al imprimir una imagen❖ Truco personal: Intenta configurar lo mejor posible el monitor dónde trabajas

Recomendaciones a no olvidar

Comparativa

RGB CYMK

● Resolución: Es el nº de puntos 96ppt de una imagen +puntos= +pequeños=+detalles=+calidad

● Dimensiones: Es el nº de píxeles ancho x alto +puntos= +pequeños=+detalles=+calidad

Publicar Imágenes en la web

Tamaños Recomendados para la WEB

Imagenes Web Imágenes para imprimir

- Ideal: 96 ppt- Asumible hasta 75 ppt

- 150 ppt: Calidad- 300 ppt Impresiones gran formato

Imagen Grande Imagen Mediana Imagen Pequeña Imagen Muy Pequeña

- 1024x768 píxeles 320x240 a 1024x768 píxeles

- 320x240 píxeles -100x100 píxeles

● Peso: Es tamaño del documento, MB +MB= +peso=+calidad=+lento de visualizar

Publicar Imágenes en la web

Tamaños Recomendados

Imagen Pesada Imagen Mediana Imagen Ligera Imagen Muy Ligera

- 1 MB o + - 300 KB a 1 MB - menor de 300 KB -menor de 100 KB

Recomendaciones a no olvidar

❖ 1MB = 1.000 KB = 1.000 B❖ Recomendación personal, intenta que las imágenes que publicas sean siempre muy ligeras

❖ No te olvides de hacer copia del original, antes de nada❖ Intenta no disminuir en exceso las dimensiones de la imagen

fotor

● Es un editor muy sencillo e intuitivo.● No hace falta abrir un perfil● Permite retocar la imagen, crear marcos

introducir imágenes predeterminadas….● Compartir la imagen directamente en una

red social o guardarla en nuestro disco Duro.

● Ideal para hacer collage.

Editores de Imágenes

Pixlr● No hace falta abrir un perfil● Permite Crear nuestros propios dibujos.

Editores de Imágenes

● Podemos retocar una imagen de nuestro ordenador o trabajar con un documento que esté en la web.

● Tiene un sistema de trabajo por capas igual que le de Photoshop

● Podemos guardar el trabajo en nuestro disco Duro.

PickMonkey

● Es un editor muy sencillo e intuitivo.● No hace falta abrir un perfil● Permite Tunear imágenes de nuestro

ordenador, dropbox, Flickr o Fb● Tiene muchas plantillas, efectos muy

fáciles de aplicar.● Para poder utilizarlo libremente

debemos pagar una cuota de 2,75S al mes

● Podemos guardar el trabajo en nuestro disco Duro o en la dropbox

● Ideal para hacer trabajos rápidos y sencillos

Editores de Imágenes

Arroyo de Castro, Cristina, Imágenes en la WEB, Publicación de contenidos en Red, Diciembre 2011, Última modificación, diciembre 2013