Imagenes en la WEB

Al empezar a hacer un Web siempre es importante seguir algunos de los pasos que los profesionales recomiendan aunque no son ley pero están pensados para ahorrar tiempo y esfuerzo al diseñador.

Planeación del Proyecto: Antes de que se empiece a trabajar directamente con la computadora es importante plasmar el proyecto en papel, haciendo un bosquejo general sobre como se van a dividir y subdividir los distintos temas de interés de nuestro sitio, o bien sobre la planeación de diseños a implementar. El bosquejo en papel es una técnica que todo diseñador, animador, arquitecto u otra persona profesional que su trabajo consista en crear ideas y plasmarlas en el mundo real o virtual siempre debe de llevar a cabo antes de empezar el proceso de elaboración, pues ahorra considerablemente tiempo y esfuerzo en la construcción de la idea y evita el andar divagando sobre el objetivo a realizar.

Stock de Imágenes: Para darle una imagen a nuestro Web debe de llevar diseños que capturen la atención del visitante, para esto se utilizan un diseño de pagina, imágenes 2D, 3D, animaciones, sonido, etc. Cuando el diseñador no tiene mucha experiencia en crear sus propias imágenes este debe de recurrir a la imágenes pre-diseñadas como lo son el clipart, o bien a fotos escaneadas. Corel nos ofrece una amplia variedad de fotografías, objetos, texturas, clipart, brochas, etc en los discos que vienen junto con el paquete.

Es importante tener siempre los archivos originales, esto es por si se debe de efectuar algún cambio impredecible al web o proyecto recurramos a las imágenes que contienen los objetos editables sin la necesidad de volver a crear la imagen, también se debe considerar la selección de fuentes para un site, debe ser cautelosa pues se deben escoger los tipos de letras mas legibles y claros al lector y no poner letras en las cuales se tenga que poner esfuerzo alguno para leerlas.

Color y Resolución: Siempre un web designer debe tener en mente que no todas las computadoras que navegan constan con la misma configuración de hardware y software, existen distintas resoluciones de monitor, color modes, navegadores y conexiones. Para esto hay que hacer el diseño de la pagina al menor requerimiento posible, que es 640 x 480 de resolución de pantalla , 256 colores y si se va a utilizar html avanzado o java script procurar que sean compatibles con los navegadores en versión 3 y 4.

Para empezar a trabajar con CorelDraw y PHOTO-PAINT para el Web primero hay que optimizar las paletas para tener una versión mas acercada a los colores que se van a ver en los navegadores, vaya a Herramientas / Opciones / Global / Administración de Color y deshabilita “Calibrar colores para visualización”, click Aceptar, vas a notar que los colores de las paletas van a obtener mas vida.

Generalmente la opción “Calibrar colores para visualización” viene habilitada de fabrica pues sirve para corregir los colores en pantalla de acuerdo al Perfil de Color del monitor, impresora o escáner que se tenga configurado.

Los Formatos

Hasta ahora los navegadores de internet solo soportan 3 formatos de imágenes, que son Graphics Interchange Format (GIF), Joint Photographic Experts Group (JPEG), y Portable Network Graphics (PNG), cada uno con sus diferentes características. ¿Por qué solo tres? Por que estos tres formatos son los que manejan la mayor compresión en imágenes y son universales o sea que pueden ser vistos fácilmente en cualquier plataforma a diferencia de los otros formatos, los navegadores no soportan los formatos nativos de Corel que son CDR, CMX y CPT, así es que si tienes un diseño en vectores y los quieres publicar en Internet es necesario convertirlo primero a bitmap y después exportarlo como GIF, JPEG o PNG. Ya esta en proceso de desarrollo el formato para internet Scalable Vector Graphics (SVG), que es relativamente nuevo y se encuentra en su versión beta, este promete la habilidad de poner nuestras graficas vectoriales en internet como vectores sin necesidad de convertirlas a bitmaps, conservando su detalle y ofreciendo mayor compresión que los formatos standart actuales, también soporta animación, transparencias, Cascading Style Sheet (CSS) y mas .

GIF: Para guardar nuestro bitmap como .GIF es necesario convertirlo a 256 colores o menos, aunque es una limitación usar imágenes en 256 colores es una resolución que casi todas las computadores pueden manejar sin problemas, las ventajas de este formato que lo caracterizan de los demás es que permite guardar imágenes con fondo transparente y hacer animaciones. Corel PHOTO-PAINT soporta exportar las imágenes estáticas o animaciones como GIF al estar en modo Blanco y Negro 1-BIT, Escala de Grises 8-BIT y Paleta 8-BIT. El formato GIF generalmente se usa para dibujos vectoriales y texto.

Si la imagen contiene un alto rango de colores mas de los que la tarjeta de video y de los que el navegador pueda manejar, el browser va a usar su propia paleta de colores y el resultado será una imagen muy punteada, este es el caso de computadoras de poca capacidad. Para evitar eso la optimización de imágenes 24-BIT o mas a 256 colores hay que hacerla lo mas apagada posible a los colores originales de la imagen de alta resolución. Pero no todo es en 256 colores, según se ha reportado la mayoría de las computadoras vendidas en los años 98 y 99 ya contienen una tarjeta de video capaz de soportar 24-bits, 32-bits o mas con resoluciones en pantalla superiores a los 1024 x 768 pxls.

Corel PHOTO-PAINT contiene una variedad de paletas de colores predeterminadas entre ellas las paletas “Web Safe Colors” que son las paletas que usan Internet Explorer y Netscape Navigator , PHOTO-PAINT también le permite editar y crear sus propias paletas para mejores resultados. En los proyectos multimedia es altamente recomendado convertir todas las imágenes a 256 colores, pues ayuda al desempeño y agilidad del programa considerablemente y además reduce el tamaño de los archivos lo que hace consumir menos recursos al sistema. Recuerde que entre menos colores tiene la imagen menor es el numero de bytes de la imagen .


Si desea obtener mayor información sobre el dialogo de conversión a 256 colores consulte su menú de ayuda.

JPG: Es el formato que ofrece mas cantidad de compresión, puede reducir archivos grandes de varios mega bytes a simples Kilobytes, pero la compresión tiene su precio, si se aplica demasiada compresión para reducir el tamaño del archivo mayor es la distorsión de los píxeles de la imagen resultando una imagen muy degradada y distorsionada. Para fotografías digitales, imágenes escaneadas o imágenes de millones de colores como 24-bits 32-bits o más el formato JPG es la opción correcta.

El dialogo de exportación del formato JPEG en CorelDraw y PHOTO-PAINT ofrece varias herramientas que nos dan un gran control sobre la compresión de nuestra imagen. El dialogo ofrece dos tipos de compresión que son el Progresivo y el Optimizado, otra facilidad muy valiosa de este dialogo es que nos deja aplicar los valores de compresión manualmente con rango de 0 a 100.

Cuando el método Progresivo se le aplica a la imagen al momento de estar bajando el navegador la imagen la imagen se va viendo borrosa hasta que se enfoca totalmente cuando termina de bajar.

El metodo Progresivo ofrece una mayor compresión del 2 a 5% mas que el optimizado. El metodo Optimizado tiene una compresión mas “fina” que el Progresivo, la diferencia es notable cuando se exportan imágenes de alta resolución como las fotografías o textos.

Puse a prueba los dos métodos con la fotografía de las flores que se muestra arriba, el archivo original mide 283KB con el formato CPT. La versión de la fotografía en método Progresivo con sub formato Standart (4:2:2), compresión de 22 y la suavidad de cero el resultado final del archivo fue de 26.3KB. La versión Optimizada le asigne los mismos valores que a la progresiva y el resultado fue una imagen de 27.2KB.

La diferencia en KB de los dos archivos no es mucha pero donde realmente se aprecia la diferencia entre los dos métodos es que el Progresivo degrado mas los pixeles de transición entre un color y otro, dando una imagen mas borrosa, en cambio el método optimizado dio una versión mas acercada la versión original pero concientos de KB menos. Por eso el método mas recomendado para usar en fotografías o en imágenes con alto detatalle es el optimizado.

NOTA: Imágenes CMYK sí se pueden grabar como JPG pero no son soportadas por los navegadores de internet, si tiene una imagen CMYK y la quiere poner en el web primero conviértala a 24-bit RGB y después expórtela como JPG.

Para no causar confusión alguna, JPEG y JPG es el mismo formato, CorelDraw y PHOTO-PAINT le asigna por predeterminado la extensión JPG y no es necesario efectuar algún cambio a la extensión.

PNG: Este formato hay que considerarlo como una buena opción entre el GIF y el JPG, al igual que el GIF tiene las ventajas de grabar imágenes en modo Blanco y Negro 1-BIT, Escala de Grises 8-BIT y Paleta 8-BIT, soportando también entrelazado y transparencias. Al igual que el JPG el PNG también soporta imágenes en 24-BIT y permite comprimirlas.

Corel PHOTO-PAINT en todas sus versiones no tiene controles para especificar la transparencia de una imagen PNG, aun que Corel afirma que el formato las soporta. El único dialogo que presenta el formato PNG es para activar o desactivar el entrelazado. El entrelazado sirve para que la imagen se mire poco a poco mientras baja de la red, si esta desactivada esta opción la imagen no se visualizará hasta que termine de bajar por completo.

Aunque el PNG comprime las imágenes, no tiene la misma capacidad de compresión que el formato JPG, así es que el uso en internet de este formato debe ser discreto.

Y después de todo… ¿Qué formato es el que debo utilizar?

Al principio puede parecer confuso, pero no lo es. Cuando se tiene una imagen vectorial o bitmap con pocos colores o ocupa fondo transparente la opción adecuada es el GIF, para hacer animaciones para internet se usa el formato GIF, si su imagen implica millones de colores como las fotografías o imágenes con gran numero de colores hay que usar el formato JPG.



Este es un ejemplo claro de cuando se debe de utilizar el formato correcto para imagenes de millones de colores.

Recuerde que:

Imágenes grandes = más tiempo de espera = visitantes impacientes = pocos visitantes a su sitio web en Internet.