A la hora de subir imágenes y gráficos a tu página de Internet hay que tener en cuenta varios factores fundamentales siendo los principales los siguientes: formato y tamaño del archivo, colores y transparencia. partimos de la base de que los formatos más habituales en la red para las imágenes son:
- .gif
- .jpg
- .png

Para optimizar una imagen y guardarla en uno de estos formatos hay que partir de la base de poseer un programa de tratamiento de imágenes o retoque fotográfico (Photoshop, Fireworks, Paint, etc...). Para nuestro ejemplo, optamos por el más popular y extendido entre todos los usuarios de PC y Mac: el Adobe® Photoshop®.

Este programa posee dentro del menú "Archivo", una opción llamada "Guardar para Web" (el resto de programas poseen opciones similares que también encontrarás en el menú Archivo habitualmente). En Photoshop, esta opción abre un cuadro de diálogo que te permitirá previsualizar varias versiones distintas de una misma imagen optimizada pero sin efectuar cambios en el original. A continuación, te indicamos los pasos a seguir utilizando la imagen de la derecha:

1.- Selecciona "Guardar para Web".
Una vez abierta la imagen que has elegido, selecciona en el menú "Archivo" la opción "Guardar para Web" y selecciona una opción de visualización:
- Optimizado: la imagen aparece con los ajustes actuales.
- 2 copias: sirve para comparar la imagen original y la imagen optimizada.
- 4 copias: sirve para ver otras tantas versiones de la imagen optimizada. Elegimos esta última clickando en la pestaña marcada en rojo.

2.- Aplica los ajustes de optimización.
Selecciona una de las versiones mostradas haciendo click sobre ella y, en el desplegable "Ajustes" elige una de las opciones. Cada uno de los ajustes pretende matener un máximo de calidad reduciendo al mínimo posible el tamaño del archivo posible y el tiempo de su descarga. Debajo de la imagen te aparecerá el tamaño de la imagen en KB y el tiempo de descarga según las diferentes velocidades de conexión (puedes elegir diferentes velocidades descarga en el desplegable en forma de triágulo marcado con un círculo rojo).

Si quieres mantener la mayor calidad posible en la gama cromática opta por guardar la imagen como .jpg pero si quieres utilizar opciones de transparencia (y menor tamaño) opta por el formato .gif. Nosotros vamos a optar por este último formato pues deseamos que nuestra imagen tenga un fondo transparente para lo que marcamos la opción "Transparencia" (esta característica aparece gráficamente en la imagen como un fondo de cuadrados grises y blancos).

3.- Bloquea un color.
Con la herramienta del cuentagotas toma una muestra del color que quieres conservar y bloquealos en la tabla de colores de la parte inferior derecha. Así, aunque elijas un ajuste de optimización con menor número de colores (para disminuir el tamaño de la imagen), el color que has bloqueado se conservará.

4.-Asigna un color a la transparencia o cambia un color por otro.
Con la herramienta del cuentagotas selecciona un color y después hazclick en el botón para asignar transparencia en la tabla de colores. Este procedimiento también sirve para cambiar un color por otro. Nosotros hemos seleccionado como ejemplo el azul de Galeón Plus. con el cuentagotas y, después, haciendo doble click en la muestra de la tabla de colores, usamos el selector de color para elegir uno nuevo (el verde en este caso). Al cambiar un color o asignarlo como transparente, la muestra de la tabla de colores aparecerá marcada.
NOTA: El color sólo se cambia en la versión optimizada, no en el original.

5.- Determina el tamaño que deseas para la imagen.
Pulsa en la pestaña "Tamaño de imagen". A continuación especifica los valores "anchura" o "altura" que desees para la imagen optimizada. Pulsa "Aplicar" y la imagen con el nuevo tamaño se previsualizará (el tamaño del archivo original no variará). Un consejo: si no quieres perder calidad en la imagen, antes de aceptar los cambios de tamaño, elige en el menú "Calidad" el modo "Redondeada (bicúbica)" pues es el método más preciso y que produce gradaciones de tono menos bruscas.

6.- Aplica tramado de transparencia.
Ahora retomamos la imagen original con el fondo verde y seleccionamos éste como color para crear la transparencia. Esto nos permitirá colocar silueteada en cualquier web la imagen que hemos seleccionado sin importar el color de fondo de la página en cuestión. Selecciona "Transparencia" en "Ajustes". En el menú "Mate", selecciona "Ninguno". En el menú "Tramado de transparencia", selecciona "Tramado de transparencia de difusión" y establece el % de transparencia deseado con el regulador "Cantidad". El tramado de transparencia crea efectos de transparencia que se mostrarán sobre cualquier color de fondo. Hay tres opciones de tramado de transparencia disponibles: Difusión, Motivo y Ruido.

7.- Crea la imagen optimizada definitiva.
Pulsa el boton de "OK" y se generará la imagen optimizada según la versión de la misma que hayas seleccionado.


Otros temas de formación:
> Ver Indice