En este tutorial, utilizamos la version CS 2 de Photoshop. Vamos a aprender a optimizar imágenes para nuestra web. El objetivo es conseguir el mínimo peso de la imágen, con la máxima calidad. Lo primero, es configurar la Herramienta “Guardar para Web” de forma correcta.

Nota: Nuestras imágenes para la web deberán estar siempre a 72 ppp (puntos por pulgada) de resolución. Lo veremos en el tutorial “Resolución y Tamaño de las imágenes“.

Vamos a abrir una imagen en Photoshop y vamos a guardarla para la web (Archivo/Guardar para Web o Mays+Ctrl+Alt+S). Se nos abrirá la ventana de Guardar para Web…

En la esquina superior izquierda de esta ventana, tenemos cuatro pestañas que nos proporcionan cuatro vistas distintas de la imágen que estamos optimizando, comparándola con la imágen original para poder ver antes de guardar si la pérdida de calidad es o no notable. Os recomiendo trabajar con dos vistas: la imágen original y la imágen optimizada con los parámetros que nosotros hemos indicado.

En la esquina opuesta, podemos ver una minúscula flecha. Haciendo click sobre la misma, se nos desplegarán las opciones de guardado (compresión) para distintos tipos de velocidades de conexión a internet. Vamos a seleccionar los siguientes parámetros: Usar el pérfil de color del documento y Tamaño/Tiempo de descarga (DSL/cable de 512 Kbps). Sí… sé que hoy en día el ancho de banda de las conexiones a internet es superior a 512 Kbps y que el que más y el que menos, tiene 1 ó 3 Mb; pero hay que tener en cuenta que estas velocidades no están garantizadas, que los usuarios siempre tienen varias páginas abiertas, que otras aplicaciones y el mismo SO también consumen ancho de banda y que casi todos los usuarios tienen algún programa de descarga en funcionamiento. De esta forma, nos aseguramos que nuestra imágen está optimizada para una correcta velocidad de descarga en casi cualquier circunstancia. Una vez seleccionadas estas opciones, se guardan por defecto y no hace falta volver a seleccionarlas.

En la columna de la derecha, seleccionaremos los parámetros de nuestra imágen. Las imágenes para nuestra web las guardaremos casi siempre en formato *.jpg; seleccionaremos una calidad Alta y marcaremos la casilla de Progresivo. Con estos parámetros, ya podemos hacer click en Guardar.

Otros formatos de imágen como *.gif o *.png, los utilizaremos para imágenes con fondo transparente. El formato *.png en concreto, os recomiendo utilizarlo solo con imagenes con fondo transparente de pequeño tamaño (iconos, marcas, flechas, banners, etc.); puesto que suelen pesar bastante más que una imagen *.gif o *.jpg. En este formato, os recomiendo utilizar la opción “png24” y marcar la opción Transparencia.

Relacionado

• 10 julio, 2010 -- Tamaño de la imágenes (0)
  En este breve tutorial, vamos a explicar como cambiar el tamaño de las imágenes con Photoshop y...