Photoshop: Optimizar imágenes para la web

baluart19 Marzo 2006 - 8:47pm 8 comentarios
Enviar por Email Imprimir

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.

Resolución de 72 pixels por pulgada

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).

Modo RGB

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.

Formatos GIF, JPEG, PNG-8, PNG-24, WBMP: JPEG para fotografías

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.

PNG-8 para logos y figuras

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.

Comentarios

Imagen de RoQ
RoQ

Excelente, gracias por el tip

Imagen de Gerald

Buen tip, sonre el retoque de imagenes para la www

Imagen de juanita pancracia
juanita pancracia

hi frends.. my mane is juanita pancracia ok... ;)..there is speak spanish, i not ok.. ;);)

Imagen de María bas
Imagen de Redes Sociales

gracias por el consejo, lo tomare encuenta para optimizar mis paginas.

Imagen de fredy Seytuque
fredy Seytuque

Man tengo una consulta, cuando diseño en photoshop cs5 los colores son vivos, pero cuando la subo a las web cambia de color opacandolo notablemente. lei en toro articulo que para web se trabaja en SRGB,intento con ese perfil pero igual noc si podrias ayudarme con eso

Imagen de baluart
baluart

Si después de exportar la imagen con Photoshop observas los colores vivos, y esa misma imagen la subes a la web, hay dos opciones: O se esta creando una copia (de baja calidad) de la imagen original y esta copia es la que se sube o a la hora de exportar la imagen a JPG no estas utilizando los parametros adecuados.

Para la exportacion de una imagen de calidad para web, te recomiendo Firefox. Esta mucho mejor preparado para este tipo de trabajo.

Saludos!

Imagen de Adaasd
Adaasd

muy bien!!!

Tutoriales

Cómo descargar videos de VK.com
En este artículo voy a explicar como descargar videos y películas...
Descargar Facebook Móvil Gratis
Por si aún no lo han hecho, es posible descargar Facebook Móvil...
Cómo generar tráfico web con las redes sociales - Paso a Paso
Muchas empresas están publicando contenidos como la forma de crear...

Artículo Recomendado

3 Tips cruciales para recuperar archivos eliminados
¿Te imaginas perder el trabajo de toda una semana en tan solo unos segundos? Todos hemos pasado por este problema. Quizás eliminamos por error un archivo importante o lo borramos sin pensar que era valioso para otro... más