Conceptos

Generales

Tópicos de especialización II.

Creación de páginas Web
(Webmastering)

Unidad de Aprendizaje
Webmastering Conceptos Generales

Tipos de imágenes

Existen dos tipos de gráficos con los que se puede trabajar en la informática: mapas de bits y
gráficos de vectores. Es importante comprender la diferencia entre las dos categorías, pues
ello tiene muchas repercusiones en la forma de edición.

Mapas de bits

Los mapas de bits, también llamados imágenes rasterizadas, utilizan pequeños puntos de
colores o píxeles para representar las imágenes. Cada uno de los pixeles de un mapa de bits
posee una ubicación y un valor de color determinado. Debes tener en cuenta que cuando
trabajas con mapas de bits, lo que se editan son los pixeles que forman la imagen, y no las
formas.

En líneas generales, los mapas de bits se utilizan para fotografías, puesto que pueden
representar degradados y transiciones sutiles de sombrar y color. Poseen una gran
dependencia de la resolución, ya que, como contienen un número fijo de pixeles, pueden, por
tanto, perder detalle y mostrar bordes irregulares si se modifica el tamaño en pantalla o se
imprimen en una resolución inferior que aquella para la que fueron creadas. En el siguiente
ejemplo verás como al aumentar el tamaño aparecen los típicos bordes dentados de los
pixeles.

Susana Cordero Dávila Raúl Armando Valadez Estrada

1
Webmastering Conceptos Generales

Vectores

La otra categoría son los gráficos vectoriales, que se componen de líneas y curvas definidas por
objetos geométricos denominados vectores. Un vector es, una forma determinada con una
ubicación y un color específicos.

Esta naturaleza de los vectores determina que no dependan en absoluto de la resolución. Por
ello puedes aumentar su tamaño e imprimir en cualquier resolución sin que pierda detalle ni
calidad. Son, por tanto, la mejor opción para representar gráficos de líneas simples y nítidas
que puedan escalarse a distintos tamaños como, por ejemplo, los iconos o los logotipos. En
este ejemplo, al aumentar el tamaño de imagen continúa teniendo la misma definición que la
original.

Consejo

Aunque la diferencia entre mapas de bits y vectores está clara sobre el papel, no lo es en
pantalla, puesto que los monitores de las computadoras representan las imágenes siempre
como pixeles.

Profundidad de color:

La profundidad de color es la cantidad de colores que se manejan dentro de una imagen, y esta
se determina en bits.

Dado que un bit está definido como: “La unidad de asignación mínima de memoria”, es decir el
valor mínimo que puede existir dentro de un medio electrónico es el bit, no hay nada menor a
este, en el mundo en el que vivimos estamos acostumbrados al sistema decimal, el valor
mínimo que se puede obtener será un número negativo igual a infinito o el cero dependiendo
del punto de vista con el que se vea, en las computadoras el bit es lo menor desde el punto de
vista electrónico (binario), el bit equivale a un valor booleano de 0 ó 1, que se puede
interpretar como abierto –cerrado, apagado – prendido, falso – cierto, negro, negro – blanco,
etc. Las unidades de memoria están determinadas en bytes, el byte se encuentra formado por

Susana Cordero Dávila Raúl Armando Valadez Estrada

2
Webmastering Conceptos Generales

8 bits, y como cada bit puede valer 0 ó 1, lo que nos da 2 combinaciones (“0” ó “1”) en cada
una de las 8 posiciones del byte, dando pues 2 elevado a la 8va potencia dado un total de 256
combinaciones.

1 bit = 0 ó 1

1 byte = 8 bits 28 = 256 combinaciones.

Ejemplos de valores en 8 bits Valor decimal

(Combinación)
0 0 0 0 0 0 0 0 0
0 0 0 0 0 0 0 1 1
0 0 0 0 0 0 1 0 2
0 0 0 0 0 0 1 1 3
0 0 0 0 0 1 0 0 4
0 0 0 0 0 1 0 1 5
…
1 1 1 1 1 1 1 1 256

Por lo tanto 8 bits representan 256 combinaciones, hablando en colores pues, una imagen con
8 bits de profundidad, contiene 256 colores (por sus combinaciones).

Bits Potencia Total de colores

(Combinaciones)
1 21 2
2 22 4
3 23 8
4 24 16
5 25 32
6 26 64
7 27 128
8 28 256
16 216 65536
24 224 16.7 millones

Los bits pues representan la profundidad total de colores dentro de una imagen la más
comúnmente utilizada es la de 24 bits o sea de 16.7 millones de colores, aunque en la
actualidad hay tarjetas de video y monitores capaces de desplegar hasta 32 y 48 bits de
profundidad, pero el ojo humano no tiene la capacidad de visualizar tanta gama de colores,
dicha profundidad es necesaria para cálculos de algoritmos matemáticos aplicados a las
imágenes así como las de amplio rango dinámico (HDR).

Susana Cordero Dávila Raúl Armando Valadez Estrada

3
Webmastering Conceptos Generales

Gamas de color

La cantidad de colores que puede mostrar un modo de color varía de uno a otro. Una gama es
ese rango de colores que un sistema de color puede mostrar en pantalla o imprimir. Entre los
modeles de color que se utilizan, LAB tiene la gama mayor, ya que abarca todos los colores de
las gamas RGB y CMYK. La gama RGB contiene parte de estos colores, que son los que se
pueden ver en el monitor de la computadora o una televisión (que emite luz roja, verde y azul).

La gama CMYK es la más pequeña y sólo se compone de aquellos colores que se pueden
imprimir utilizando tintas de cuatricromía. Si algunos de los colores que se muestran en
pantalla no se van a poder imprimir, se les denomina colores fuera de gama, es decir, fuera de
la gama CMYK.

Por su parte, el modo de color indexado utiliza una paleta de 256 colores posibles y el modo
escala de grises una paleta de 256 tonalidades de grises. De esta forma, estos modos reducen
hasta su mínima expresión la información de color y dan resultados estupendos cuando se
trata de comprimir al máximo la imagen.

Consejo

Se puede saber el tipo de paleta o gama, resolución y tamaño que utiliza una imagen, eligiendo
del menú Imagen la opción Propiedades de la imagen.

Tipos de archivos de imagen

Anteriormente vimos las dos categorías de imágenes dependiendo de su naturaleza. Ahora

bien, el asunto se complica cuando entran en escena los archivos de imagen, que es el formato
en el que se guarda la imagen en un archivo. Muchos son los formatos admitidos por el GIMP,
aunque, en líneas generales, se pueden dividir en dos categorías: los dirigidos a la impresión y
los dirigidos a la web.

Susana Cordero Dávila Raúl Armando Valadez Estrada

4
Webmastering Conceptos Generales

Formatos típicos de impresión

PSD

Este es el formato nativo de Photoshop. Es el único que admite todas las funcionalidades de
Adobe Photoshop, como guías, canales alfa y capas.

EPS

El formato PostScript Encapsulado (EPS) lo admiten prácticamente todos los programas de

autoedición y de tratamiento de imágenes. Puede contener tanto gráficos vectoriales como de
mapa de bits. Para imprimir archivos EPS, debes usar una impresora PostScript.

El formato EPS tiene dos versiones avanzadas: el DCS, que permite guardar separaciones de
color de imágenes CMYK, y el DCS 2.0 que se utiliza para exportar imágenes que contienen
canales de tinta plana.

TIF

El formato TIF se utiliza para imágenes de mapa de bits y es admitido prácticamente por todas
las aplicaciones de autoedición y tratamiento de imágenes. Es uno de los más extendidos de la
industria gráfica por su calidad de imagen.

Formatos típicos de Internet

GIF

El formato GIF utiliza una paleta de color indexado, que puede tener un máximo de 256
colores. Una de sus mayores ventajas es que podemos elegir uno o varios colores de la paleta
para que sean transparentes, es decir, que esos colores desparezcan para dejar ver los
elementos que se encuentran por debajo. Además, GIF es uno de los pocos formatos de
imagen que permite mostrar animaciones, gracias a una técnica por la que distintos frames se
ejecutan secuencialmente.

JPG

JPG es una maravilla por sus posibilidades de compresión. Gracias a ella podemos tener una
imagen con millones de colores RGB sin que por ello el tamaño del archivo sea muy grande.
JPG es un formato compatible con casi todos los navegadores actuales, aunque tiene como
desventaja frente al GIF que no puede mostrar animaciones y que tampoco puede tener
colores transparentes, ya que esta no se basa en colores indexados. En resumen, podemos
decir que el formato JPG da más realismo a la imagen que el formato GIF.

Susana Cordero Dávila Raúl Armando Valadez Estrada

5
Webmastering Conceptos Generales

PNG

Tanto el GIF como JPG son los dos formatos gráficos más extendidos, hoy por hoy, en la web,
pero en los últimos años ha tomado mucha fuerza el formato PNG, que posee muchas ventajas
respecto a los otros dos. De hecho podríamos decir que PNG posee gran parte de las ventajas
de un GIF y gran parte de las ventajas de un JPG. Por ejemplo, permite altos niveles de
compresión, con lo que genera archivos muy pequeños. Además, permite utilizar la técnica de
la indexación para crear colores transparentes, semitransparencias o transparencias
degradadas. Y, finalmente, no está limitado a una paleta de 256 colores, sino que puede
utilizar millones de colores. Su única limitación es que con PNG no podemos crear archivos
animados.

Consejo

Con estos seis formatos no se completa, ni de lejos, la nómina de posibles tipos de archivos de
imagen. Otros son BMP, PICT, RAW o Targa, que también pueden abrirse en GIMP, aunque los
más comunes y extendidos son estos que hemos tratado en la lección.

Tamaño y resolución

Entender estas dos propiedades de cualquier imagen es fundamental para conocer las causas
por las que una imagen pierde calidad al ser impresa o de qué manera podemos optimizarla
para su visualización en Internet.

Dimensiones en pixeles

Una imagen de mapa de bits puede ser medida sumando los pixeles que se encuentran a lo
largo de su altura y su anchura. Esa medida es llamada dimensión en pixeles de una imagen y
determina, junto con el tamaño y ajuste del monitor, el tamaño en que dicha imagen se
visualizará en una pantalla.

Por ejemplo, en un monitor de 15 pulgadas con la configuración típica de 800 pixeles

horizontales por 600 verticales, una imagen con dimensiones de 800 X 600 pixeles llenaría toda
la pantalla. En un monitos de 17 pulgadas con un ajuste, también, de 800 X 600 pixeles, la
misma imagen volvería a llenar la pantalla, pero cada uno de los pixeles tendría un tamaño
mayor. Si se cambia la configuración de este segundo monitor a 1024 X 768 pixeles, la imagen
se mostraría en un tamaño más pequeño, sin llegar a ocupar toda la pantalla.

En el siguiente ejemplo se puede ver como una imagen de la misma dimensión en pixeles es
mostrada de forma distinta en un mismo monitor con configuraciones diferentes.

Susana Cordero Dávila Raúl Armando Valadez Estrada

6
Webmastering Conceptos Generales

Con estas consideraciones, entenderás porqué es importante que ninguna imagen que vaya a
ser vista en Internet posea una dimensión en pixeles mayor de 800 X 600. En caso contrario,
rebasaría los límites de un monitor que tuviera este ajuste.

Resolución de imagen

Esta medida viene dada por el número de pixeles de una imagen que se muestran en una
unidad de longitud impresa. Normalmente se mide en pixeles por pulgada (ppi o ppp). Las
dimensiones en pixeles y la resolución de imagen mantienen una relación de dependencia, ya
que si la primera medida determina la cantidad de pixeles que contiene una imagen (y, por
tanto, su nivel de detalle), la segunda especifica cómo se reparten estos pixeles en el espacio.
Por ello, puedes modificar la resolución de una imagen sin cambiar los datos de los pixeles
reales de la imagen; lo único que se cambiará es el tamaño impreso de la imagen. Pero si lo
que quieres es mantener las mismas dimensiones de impresión, al cambiar la resolución de
imagen tendrás que efectuar también un cambio en el número total de pixeles que forman la
imagen.

Cuando imprimes una imagen con una resolución alta, ésta contiene más pixeles (y, por tanto,
más pequeños) que una imagen del mismo tamaño con una resolución baja. Por ejemplo, una
imagen de 1 X 1 pulgada con una resolución de 300 ppp contiene un total de 90.000 pixeles. En
este ejemplo puedes ver la misma imagen, la de izquierda tiene una resolución de 300 ppp y la
de la derecha de 72 ppp.

Susana Cordero Dávila Raúl Armando Valadez Estrada

7
Webmastering Conceptos Generales

Las imágenes con una resolución más alta reproducen más detalle y transiciones de color más
suaves que las imágenes con resolución más baja. Si utilizas una resolución demasiado baja
para una imagen impresa se produce entonces el fenómeno de la pixelación, con pixeles de
gran tamaño que dan a la imagen un aspecto de poca definición.

Consejo

La resolución recomendada para imágenes con destino a Internet es de 72 ppp, mientras que
para una imagen que va a ser impresa en una impresora chorro de tinta es de 150 o 300 ppp.

Susana Cordero Dávila Raúl Armando Valadez Estrada

8
Webmastering Conceptos Generales

GIMP (GNU Image Manipulation Program)

Programa de Manipulación de Imágenes de GNU.

El GIMP es una herramienta de manipulación fotográfica multiplataforma. GIMP es un

acrónimo de GNU Image Manipulation Program. En el GIMP se pueden realizar todo tipo de
tareas de manipulación de imágenes, incluyendo retoque fotográfico, composición de
imágenes y creación de imágenes.

Ofrece muchas funcionalidades. Puede ser usado como un simple programa de dibujo, como
un programa de retoque fotográfico profesional, como un sistema en línea de procesamiento
por lotes, como un generador de imágenes para producción en masa, para convertir una
imagen de formato, etc.

GIMP es expandible y extendible. Está diseñado para ser ampliado mediante complementos
(plug-ins) y extensiones para hacer casi cualquier cosa. La interfaz avanzada de guionado
(scripting) permite automatizar desde las tareas más simples hasta los procedimientos más
complejos de manipulación de imágenes.

Uno de los fuertes de GIMP es su libre disponibilidad desde varias fuentes para muchos
sistemas operativos. Casi todas las distribuciones de GNU/Linux incluyen al GIMP como una
aplicación estándar. El GIMP también está disponible para otros sistemas operativos como
Microsoft WindowsTM o Mac OX XTM (Darwin) de Apple. El GIMP no es freeware. Es una
aplicación de Software Libre cubierta por la Licencia Pública General (GPL_license). La GPL
brinda a los usuarios la libertad de acceder y modificar el código fuente de que se construyen
los programas.

Autores

La primera versión del GIMP fue escrita por Peter Mattis y Spencer Kimball. Muchos otros
desarrolladores han contribuido más recientemente y miles han provisto su asistencia y
prueba. Los lanzamientos del GIMP actualmente son orquestados por Sven Neumann y Mitch
Natterer y mucha otra gente denominada el GIMP-Team.

El sistema de ayuda del GIMP

El equipo de documentación del GIMP y otros usuarios proveen de la información necesaria

para entender cómo usar el GIMP. El manual de usuario es una parte importante de este
documento. La versión actual está en el sitio web del equipo de documentación [GIMP-DOCS]

Susana Cordero Dávila Raúl Armando Valadez Estrada

9
Webmastering Conceptos Generales

en formato HTML. Puedes obtener ayuda sensible al contexto mientras usas el GIMP
presionando la tecla F1. Se puede acceder a la ayuda en ítems específicos del menú
presionando F1 mientras el mouse enfoca en dicho ítem.

Propiedades y capacidades

Esta es sólo una lista resumida de las propiedades del GIMP:

• Suit completa de herramientas de pintura incluyendo brochas, un pincel, un aerógrafo,

clonador, etc.
• Manejo de memoria basado en bloques de pixeles (tile-based), el tamaño de la imagen
está limitado sólo por el espacio disponible en disco.
• Muestreo de sub-pixel para todas las herramientas de pintura para obtener un anti-
dentado (anti-aliasing) de alta calidad.
• Asistencia completa para el manejo de canal alfa.
• Capas y canales.
• Una base de datos procedural para llamar a funciones internas del GIMP desde
programas externos como Script-Fu.
• Capacidades de guionado avanzadas.
• Múltiples deshacer/rehacer (limitado sólo por el espacio en disco).
• Herramientas de transformación incluyendo rotar, escalar, inclinar y voltear.
• Los formatos de archivo abarcados incluyen JPEG, PNG, XPM, TIFF, TGA, MPEG, PS,
PDF, PCX, BMP y muchos otros.
• Herramientas de selección incluyendo rectangular, elíptica, libre, difusa, bezier e
inteligente.
• Extensiones (plig-ins) que permiten agregar fácilmente nuevos formatos de archivo y
nuevos filtros de efectos.

Susana Cordero Dávila Raúl Armando Valadez Estrada

10