Unidad 9. Mapas de bits (VI)

9.3. Documentos para web

La conversión de mapas de bits en dibujos de vectores, a través del calco de imagen, no es por supuesto la única vía con la que Illustrator puede trabajar con mapas de bits. El proceso contrario, convertir dibujos de vectores a mapas de bits, que ya habíamos definido como rasterización, es una labor recurrente con este programa, toda vez que muchas ilustraciones son utilizadas como mapas de bits para muy diversos fines. Uno de los más frecuentes es utilizar las ilustraciones para incorporarlas a páginas web.

Illustrator es una herramienta ideal para crear gráficos destinados a ser publicados en una página web. Estos gráficos pueden ser imágenes estáticas o en movimiento. Si nuestra intención es crear uno de estos gráficos, hemos de tener en consideración unas cuantas opciones para tener los mejores resultados:

Utilizar el perfil de documento para Web. Esto establecerá la mayoría de las opciones óptimas para generar gráficos web, como las dos opciones siguientes.

El modo de color será RGB, y siempre que podamos utilizaremos colores compatibles con Web.

La resolución para los efectos de rasterizado será suficiente con un valor de 72 ppp.

Para generar el gráfico, utilizaremos el comando Archivo → Exportar → Guardar para web (heredado), que nos permitirá elegir el mejor formato de salida, normalmente PNG o GIF para imágenes de hasta 256 colores y con grandes áreas del mismo color, y JPG para imágenes más detalladas, y ajustar fácilmente la relación entre calidad y tamaño.

Ajustar correctamente la relación entre calidad y tamaño es especialmente importante en estos gráficos, ya que en una página con muchas imágenes, si estas son muy grandes puede tardar mucho tiempo en cargarse, y aunque este problema está perdiendo importancia con las conexiones de cada vez mayor velocidad, una página ágil proporciona una mejor experiencia para el usuario.

Hay que tener en cuenta que aunque trabajemos con gráficos vectoriales, al final obtendremos un mapa de bits. La imagen resultante será la misma que se ve con el zoom al 100%. Pero si agrandamos la imagen final, veremos los píxeles, aunque no mientras trabajamos con el documento. Podemos ver el documento tal y como se vería después del rasterizado con el comando del menú Ver → Previsualización de píxeles.

 

Al crear una imagen destinada a ser publicada en una página Web, nos interesa ajustar al máximo la relación entre calidad de la imagen y tamaño. Para este fin, la mejor opción que nos ofrece Illustrator es hacerlo a través del menú Archivo, eligiendo Guardar para Web y dispositivos.

Llegamos así a una ventana que nos permite probar cómo quedaría la imagen según el formato que elijamos.

En la parte central de esta ventana encontramos nuestra imagen, y cómo quedaría en el formato seleccionado. Sobre la imagen, encontramos una serie de pestañas que nos permiten ver más de una copia de la imagen. Esto es muy útil para comparar la calidad en distintos formatos.

En la parte derecha, encontramos el panel que nos permite elegir un formato u otro. Cuando hay más de una copia de la imagen, las propiedades del panel corresponden a la imagen seleccionada. Lo más interesante de cada formato es poder ajustar sus propiedades para disminuir su tamaño manteniendo una calidad suficiente.

Veremos que al cambiar la mayoría de las propiedades, el tamaño varía. Las opciones más habituales para reducir el tamaño es disminuir la calidad en los JPEG y GIF o reducir el número de colores en los GIF y PNG.

En el desplegable Ajustes preestablecidos encontramos combinaciones de parámetros para cada formato.

El tamaño final de la imagen, lo podemos ver en la parte inferior de la copia.

.

Una vez configurado el formato de la imagen, podemos seguir trabajando con ella, pero ya con el formato seleccionado, pulsando en Hecho, o guardarla en nuestro disco duro pulsando en Guardar.