Cómo optimizar imágenes para la web con Photoshop


Las imágenes constituyen uno de los elementos más atrayentes e informativos de las páginas web, y su inclusión en ellas fue el avance más significativo dentro de la evolución del diseño web, tanto que hoy por hoy es muy raro encontrar algún sitio o página que no las incluya dentro de su estética.

No obstante, el uso de imágenes puede sobrecargar la web, haciendo lentos los tiempos de carga, y por eso hoy te traigo un sencillo tutorial que te mostrará paso a paso cómo optimizar imágenes en Photoshop para minimizar su peso y mantener su calidad.

Los ejemplos que te muestro están hechos en la versión CC de Photoshop, pero no te preocupes si tienes otra, pues el proceso es el mismo en cualquiera de ellas. Comencemos.

1. Corrige el contraste y la exposición

Corrección

Ante todo asegúrate de que tu imagen posee un correcto contraste, pues este es uno de los elementos más importantes de la fotografía. Para eso abre la imagen en Photoshop haciendo clic derecho sobre ella y luego pulsando Abrir con > Adobe Photoshop.
En el menú Imagen selecciona Ajustes > Curvas y ajusta el contraste y el brillo desplazando la curva hasta que la imagen tenga el aspecto correcto, luego acepta.

Curvas

2. Abre el cuadro de diálogo Guardar para Web

Selecciona Archivo > Guardar para Web. Verás que aparece un cuadro de diálogo, haz clic en la ficha 4 copias. Aquí obtendrás una vista de la imagen original y de otras tres previsualizaciones, cada una con diferentes ajustes de optimización.

4 copias

Fíjate en que cada previsualización incluye debajo el tamaño que tendrá la imagen y el tiempo de descarga estimado para Internet, lo que te permitirá ver el resultado de los ajustes y seleccionar el que mejor se adapte a lo que necesitas.

3. Ajusta la imagen

Haz clic en una de las previsualizaciones para seleccionarla y elige un valor de formato en el menú que aparece a la derecha, esto te mostrará las diferencias en cuanto a calidad y tamaño.

Formato

Aquí ten en cuenta las características que posee cada formato que brinda Photoshop para poder elegir el más apropiado:

  • JPEG: es un estándar de compresión útil para imágenes de tono continuo, como una fotografía. Mantiene una amplia gama de color e introduce algunas variaciones de brillo, pero no admite la opción Transparencia para el fondo.
  • GIF: es un formato gráfico utilizado tanto para imágenes como para animaciones, útil para imágenes de colores uniformes o repetidos, como líneas de arte o logotipos. Admite la opción Transparencia de fondo.
  • PNG-8: es un estándar de compresión sin pérdida para imágenes en mapa de bits, útil en imágenes de colores uniformes con detalles nítidos. Admite la opción Transparencia, pero debe tenerse en cuenta que los navegadores más antiguos no admiten este formato.
  • PNG-24: lo mismo que el formato JPEG, el PNG-24 se utiliza para imágenes de tono continuo, manteniendo una amplia gama de color y sutiles variaciones de brillo, pero llega a alcanzar más calidad y nitidez que el JPEG. Permite la opción de Transparencia, aunque tampoco lo admiten los navegadores más antiguos.
  • WBMP: es un formato de imágenes monocromas para el uso de dispositivos móviles. Llega al tamaño de imagen mínimo pues sólo utiliza los colores blanco y negro.

Cada formato te brindará una serie de opciones que podrás ajustar a tu gusto para lograr las características que deseas en la imagen. Aquí te muestro como ejemplo las opciones del formato PNG-8.

Opciones

4. Ajusta el tamaño

Si deseas cambiar el tamaño de la imagen porque aún consideras que es muy grande, haz clic en la ficha Tamaño de Imagen que aparece en el lateral derecho del cuadro de diálogo. Allí podrás especificar las dimensiones que deseas para Altura y Anchura.

Tamaño

5. Previsualiza la imagen y guárdala

Para ver cada detalle de la imagen y comprobar el resultado de los ajustes que has hecho, selecciona el 200% o uno superior en el menú de zoom que se encuentra en la esquina inferior izquierda del cuadro de diálogo.

Si deseas comparar otras zonas de la imagen selecciona la herramienta Mano situada en el lateral superior izquierdo y arrastra la imagen. Verás que todas las previsualizaciones se mueven al mismo tiempo, permitiéndote comparar la calidad de cada una en cada área.

Zoom-mano

Selecciona la previsualización que mejor se adapte a tus necesidades y, si ya estás complacido/a, haz clic en Guardar y define la carpeta en que la guardarás y el nombre que le darás.

Para mayor seguridad, Photoshop guardará la versión optimizada como una nueva imagen, sin realizar cambios a la imagen original, y así no la perderás.

Conclusiones

En esta entrada te he mostrado cinco sencillos pasos con los que podrás optimizar tus imágenes para web utilizando Photoshop, lo cual te ayudará a conseguir archivos menos pesados que mantengan su calidad y no demoren la velocidad de la página al cargar.

Aunque este artículo fue dirigido a optimizar imágenes en Photoshop, no estaría completo si no te comento sobre una aplicación muy peculiar que permite optimizar al máximo imagenes JPEG con una taza de pérdida de calidad casi nula.

El programa se llama Advanced JPEG Compressor y está disponible para Windows. Es una aplicación de pago, pero puedes tener un trial de unos días para que veas lo grandiosa que es dicha pieza de software.

Esto es todo. Cuéntame ¿Te ha servido de ayuda? Si es así no olvides dejarme tus impresiones en los comentarios.

Happy designing!