Quieres publicaren internet y no tienes muy claro cuál es la mejor manera de hacerlo. Te explicamos los conceptos básicos

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

2. Publicar Imágenes en la web
¿Qué es una imagen?
-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.

3. Publicar Imágenes en la web
Imágenes Digitales
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
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

4. Publicar Imágenes en la web
Formatos
JPG: El más popular
❖
❖
❖
❖
❖
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

5. Publicar Imágenes en la web
Formatos
Gif: Formato de imágenes animadas
❖
❖
❖
❖
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.

6. Publicar Imágenes en la web
Formatos
Raw: Máxima Calidad, pero imágenes muy grandes
❖
❖
❖
❖
❖
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

7. Comparativa
Recomendaciones a no olvidar
❖
❖
❖
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 ;)

8. Publicar Imágenes en la web
El color de una imagen
● 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

9. Recomendaciones a no olvidar
❖ 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
Comparativa
RGB
CYMK

10. Publicar Imágenes en la web
Tamaños Recomendados para la WEB
●
Resolución:
Es el nº de puntos 96ppt de una imagen
+puntos= +pequeños=+detalles=+calidad
Imagenes Web
- Ideal: 96 ppt
- Asumible hasta 75 ppt
●
Imágenes para imprimir
- 150 ppt: Calidad
- 300 ppt Impresiones gran
formato
Dimensiones:
Es el nº de píxeles ancho x alto
Imagen Grande
- 1024x768 píxeles
+puntos= +pequeños=+detalles=+calidad
Imagen Mediana
Imagen Pequeña
320x240 a
1024x768 píxeles
- 320x240 píxeles
Imagen Muy Pequeña
-100x100 píxeles

11. Publicar Imágenes en la web
Tamaños Recomendados
●
Peso:
Es tamaño del documento, MB
Imagen Pesada
- 1 MB o +
+MB= +peso=+calidad=+lento de visualizar
Imagen Mediana
- 300 KB a 1 MB
Imagen Ligera
- menor de 300 KB
Imagen Muy Ligera
-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

12. Editores de Imágenes
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.

13. Editores de Imágenes
Pixlr
●
●
No hace falta abrir un perfil
Permite Crear nuestros propios dibujos.
●
●
●
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.

14. Editores de Imágenes
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

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