Un completo curso de diseño gráfico, ilustración, diseño web y tipografía.

Optimización de imágenes para web

La preparación de imágenes para la web exige algunas precauciones cuando se parte de una imagen escaneada o cualquier otro tipo de imagen con alta resolución. Debemos tener presente que la resolución del monitor es aproximadamente de sólo 72dpi (puntos por pulgada). Si escaneamos a 300 dpi, estamos obteniendo imágenes que serán innecesariamente grandes y que no se verán en absoluto mejor que la imagen adquirida al mínimo de resolución. Una imagen mastodóntica puede tardar una eternidad en descargarse, ocupará espacio innecesario en vuestro servidor y probablemente los visitantes no tengan paciencia para esperar.

Uno de los errores más comunes en los principiantes al incluir imágenes es el tomarlas directamente del escaner y simplemente escalarlas al tamaño que desean en el programa de edición de páginas. La solución es muy sencilla; en el programa de tratamiento de imágenes, buscamos la opción que permita cambiar la densidad de la imagen (la resolución) o efectuar un nuevo muestreo (resample.) para ajustar el tamaño a la resolución de pantalla.

Las técnicas de recortar una imagen en varios fragmentos son muy útiles por varios motivos, entre ellos, la posibilidad de arreglar la estructura de la página con mucha más flexibilidad; por ejemplo se puede pseudo-rodear una imagen con el texto de una forma que sería imposible con el html pos sí solo.

Después de preparar los ficheros para las páginas web, debe guardarse siempre una imagen original con el tamaño, resolución y número de colores necesarios para podrla manipular sin limitaciones. Si queremos recuperar toda esta informaciòn después de alterar la imagen para optimizarla en pantalla, pueden surgir todo tipo de imperfecciones. En pocas palabras, los "originales" deben guardarse en un formato que no pierda calidad, y que conserve íntegra la información de los colores. Para los ficheros de mapa de bits, sirven TIFF y BMP, y los formatos nativos de Photoshop, PaintShop Pro, Photopaint... para los ficheros vectoriales, no hay problema: basta con guardar en el formato original del programa (AI -EPS, FH-, CDR, XAR...)

Cómo optimizar el tamaño de las imágenes.

Puesto que el tamaño de un fichero gráfico depende del número de colores, tamaño y resolución, todo lo que permita recortar estos parámetros implicará reducción del tamaño del fichero y por tanto, del tiempo de descarga necesario. Por otro lado, debemos elegir el formato de fichero adecuado, con los sistemas de compresión GIF y JPG. Ambos admiten diferentes opciones, y según elijamos, podemos llegar a una solución satisfactoria: imagen de buena calidad con tamaño aceptable.

Sobre la resolución, está todo dicho: basta con 72 dpi.
El tamaño de la imagen dependerá, evidentmente, de su tamaño y del grado de detalle que queramos mostrar. Debemos tener en cuenta que para una imagen de gran tamaño (por ejemplo, toda la pantalla),el tamaño puede ser muy grande y se hace imprescindible adoptar estrategias de optimización. A veces puede ser conveniente dividir la imagen en partes, optimizarlas al máximo por separado y preparar una tabla que muestre, aparentemente, una imagen única intacta.

exportación en gifEl número de colores para jpeg es casi irrelevante: como mínimo debe haber 256. Lo que permite ajustar mejor el tamaño de un jpeg es el grado de compresión, que se puede elegir en el programa de gráficos. Si vamos probando, podemos llegar al tamaño mínimo con el que la pérdida de calidad es insignificante. En cambio, para los gifs el número de colores sí que es importante; el máximo aquí es 256, pero si podemos mantener el número más bajo, el tamaño será menor. En el cuadro de diálogo para guardar como gif una imagen (ilustración adjunta) tenemos diversas opciones: elegir el número de colores, el tipo de paleta, qué hacer con los colores no presentes en ésta, transparencia...

La forma en que se simulan los colores no contenidos en la paleta que elijamos para el gif puede ser: a) convertirlos a los colores más próximos en la paleta disponible; b) simular una trama que se aproxime al color. Estos dos parámetros nos permiten hacer diferentes pruebas a la busca de la mejor solución en términos de calidad y tamaño.

Esta tarea de optimización, de todos modos, también se puede automatizar. Diferentes programas tienen la opción de procesar por lotes (conjuntos de imágenes) o pueden grabar macros o acciones del proceso de optimización, para después aplicarlos a un conjunto de gráficos simultáneamente.

Modelos de web en programas de gráficos.

Utilizando los programas de gráficos, se pueden hacer simulaciones del diseño de una web en forma de gráficos y probar fácilmente alternativas de color, diseño, tipografía...

Los programas de dibujo y pintura nos permiten crear diferentes simulaciones del diseño que tendrá nuestra web, sin el esfuerzo de crear tablas, colocar los elementos de texto y gráficos, y después rehacer todo. Es una forma de trabajar muy extendida entre los profesionales, y muy útil: el modelo que creamos en pantalla no sólo puede ser muy fidedigno, sino que además puede servir para la fase de creación de la página real, a modo de plantilla de calco.

Para comenzar, siempre suele trabajarse con papel y lápices; empezar a definir la imagen que queremos para la web; tomar notas, hacer listas de temas a considerar, estilo gráfico deseado, fuentes más apropiadas... estos esbozos básicos, tal vez con alguna nota de color, o acompañadas de recortes de alguna revista, pueden ser el punto de partida para seguir desarrollando ideas en el ordenador. En nuestro programa de gráficos favorito, creamos una forma rectangular con las dimensiones proporcionales a la pantalla y empezamos a crear todas las pruebas que podamos. Ahora es más conveniente el ordenador, porque podemos hacer mil versiones de forma reversible y rápida, guardar todas las alternativas y ver el efecto real en la pantalla.

Los programas de dibujo vectorial tienen ventajas adicionales sobre los de pintura: los elementso pueden reordenarse y cambiar de tamaño y forma; pueden alinearse con precisión y moverse donde sea, escalarse con precisión... y además podemos colocar ls imágenes fotográficas o bitmaps que hagan falta.

Cuando se llega a un diseño satisfactorio el paso siguiente es recrear la imagen general en forma de página web. No es tarea fácil... al menos con algunos programas. ¿Qué equivalencia habrá entre la imagen y la página web? Hay que decidir qué partes se resuelven con el texto y tablas con fondo de color; qué partes se reproducen con una imagen de fondo y finalmente, qué gráficos son necesarios para el resto del diseño. Algunas ideas fáciles en el programa de diseño tienen dificultades insospechadas para pasar a página html... o pueden exigir estructuras muy complicadas de tablas y gráficos. Puede ser preciso recortar la imagen modelo en trozos, optimizar separadamente, colocarlos en la página web en una tabla. Programas como Fireworks o Imageready son especialistas en esta tarea. También existe algún programa gratuito que hace lo mismo.

En el editor de páginas web deberemos realizar la última fase del proyecto: colocar cada cosa en su sitio. La forma más simple es definir la imagen modelo como fondo de la página e ir colocando las partes que la simulan en su lugar. Finalmente, deberemos borrar esta imagen de fondo, o colocar la imagen de fondo correcta para el diseño definitivo. Algunos programas como Dreamweaver facilitan el paso de la imagen modelo a la página definitiva, ya que permiten colocar una imagen como plantilla de calco; no se incorpora a la página, y permite colocar con precisión todos los elementos del diseño, tanto las tablas y capas como las imágenes, textos...