Photoshop: Optimizar imágenes para la web

Con el incremento del ancho de banda, me es cotidiano encontrar sitios webs que publican sus imágenes con un peso mayor al que deberían. Aunque le parezca increíble he visto imágenes de 250px x 250px pesando cerca de 40kbs. Pero ¿Por qué debemos optimizar imágenes para la web? Porque una imagen no optimizada sólo produce molestias al visitante.

El peso exagerado de una imagen demora la carga de la página, ocasiona un gasto de ancho de banda adicional y además, muchas veces es totalmente innecesario, pues aunque la imagen tenga la mejor calidad posible, el usuario igual no la va a percibir.

Veamos como optimizar una imagen para internet con Photoshop.

Tip #1: Resolución de 72 pixels por pulgada

Esto es algo básico, pero que algunas veces no se tiene en cuenta. Una gran parte de los usuarios tienen monitores con una resolución de 72 pixels por pulgada, por tanto no tiene sentido publicar una imagen con una resolución mayor, pues la mayor calidad no será percibida y lo único que se logrará es retrasar la visualización de la imagen.

Pero como cada vez hay más monitores con mayor resolución, alguien podría preguntar ¿Por qué no utilizar una resolución mayor? Aunque esto sea cierto, hay que tener en cuenta que no todos los usuarios utilizan estas resoluciones. Y si además consideramos que los usuarios lo único que quieren es navegar lo más rápido posible por la web, lo que lo demore en cargar será considerado molesto y de inmediato el usuario abandonará la página sin esperar más.

Tip #2: Modo RGB

RGB es el estándar de imagen de color que se utilice con monitores de video y pantallas de ordenador (Por esto, no tiene sentido usar el modo CMYK destinado principalmente para la impresión).

RGB ofrece una imagen compuesta por los colores primarios de luz: Rojo, verde y azul. Para las imágenes de color RGB, Adobe Photoshop asigna un valor de intensidad a cada píxel desde 0 (negro puro) a 255 (blanco puro) para cada uno de los componentes RGB.

Tip #3: JPEG para fotografías

Los formatos más usados a la hora de guardar las imágenes son GIF y JPEG, pues consiguen reducir el tamaño de la imagen a una fracción de la original ocasionando una pequeña pérdida de calidad, que será evaluada por cada diseñador.

Pero JPEG no debe utilizarse con cualquier imagen, sino, principalmente con fotografías, pues comprime las imágenes eliminando información que no es visible para el ojo y soporta un gran número de colores (16 millones de colores). Finalmente, recuerda que no es recomendable usar Mapa de Bits (WBMP).

Tip #4: PNG-8 para logos y figuras

Para optimizar logos, figuras y, en general, imágenes con poca cantidad de colores es recomendable utilizar el formato PNG-8. El cual, aunque no es tan usado como el GIF, logra la misma calidad con un peso más liviano.

El formato PNG soporta true color (PNG-24) y color paletizado (PNG-8). Además, nos permite utilizar el canal alpha para dar un fondo transparente a nuestras imágenes. En lo particular, no utilizó PNG-24, pues al estar destinado para optimización de fotografías, no tiene la misma eficacia (peso-calidad) que el formato JPEG.

Finalmente, en el menú lista marcado en la imagen de arriba, nos encontramos con las siguientes paletas:

• Perceptual: Produce una nueva paleta donde aparecen representados aquellos colores más sensibles al ojo humano.
• Selectiva: Parecido al modelo anterior, pero favorece los colores web.
• Adaptable: Estas paletas son las que mejor van a encajar con las imágenes que se realicen, pues se elegirán en función de la imagen que se tenga. Esto quiere decir que podrás elegir los colores de la paleta dependiendo de los colores que contenga la imagen que estés tratando.
• Web: Esta paleta representa exactamente los colores de la Web (256). Para imágenes que sólo usen colores Web será el método ideal, ya que apenas se notará el tramado.
• Personalizada: Mantiene la tabla de colores actual sin aplicar los cambios que se realicen sobre la imagen.
• Blanco y negro: La imagen se muestra solamente en blanco y negro.
• Escala de grises: Se muestra en todos los tonos intermedios entre el negro y el blanco.
• Mac OS: Paleta de los sistemas Mac OS.
• Windows: Paleta de los sistemas Windows.

Así, dependenderá de cada imagen el seleccionar el tipo de paleta que mejor se adecúe a nuestros requerimientos.