Todos los derechos reservados. Tiago García
logo

Optimización de imágenes para web, guía completa paso a paso.

optimiza tus imagenes, la guia completa paso a paso

Optimizar las imágenes para colocarlas en la web es ajustar por nuestra cuenta el formato que esta requiere para ser mostrada de forma eficiente en los distintos sitios en que la alojemos, redes sociales, navegadores o nuestras páginas web.

 

Como fotógrafos, las imágenes son nuestra mejor carta de presentación. No es algo que podamos dejar a la suerte, y, como ya te habrás dado cuenta, las compresiones que hacen por sí mismas las redes sociales, o las páginas que automatizan, no siempre nos ofrecen los resultados esperados. Todo ello decantando a una disminución en la calidad de la imagen, sea por diferencias de color, banding, ruido, pérdida de pixeles, luces  y en fin, acabamos rechinando los dientes.

Para evitarte disgustos es que en este post voy a mostrarte paso a paso la manera que he conseguido optimizar mis imágenes.

 

Merida-Maquillate-Bonito-Anette-Anette-Tiago-Garcia-3

(Fotografía de ejemplo: Anette, modelo para el proyecto “Maquíllate Bonito, Mérida, Tendencias 2016. La nota AQUÍ)

 

Una experiencia personal:

Algo como lo que te he planteado me ocurrió hace tiempo, durante la primera etapa de esta web. Tras el desencanto por la optimización automática de los plugins que usaba, decidí no usarlos más. Y subí las imágenes tal cual. Gracias a ello tuve una página insoportablemente lenta y una pésima nota en el insights del Google. Lo primero era lo más alarmante, claro está, pues mis colegas lectores y los posibles clientes se iban como el viento.

La primera lección que debemos aprender es que como fotógrafos necesitamos un archivo de imagen con mucha información para poder trabajarla. Nos acostumbramos a archivos grandes, no es mentira que en un principio el archivo en Photoshop se me iba a 1 Gb y creo que una buena práctica es manejarnos con lo necesario. También es cierto que necesitamos un archivo final con muy buena calidad, en función del formato de impresión. Pero la web tiene sus propias reglas.  La mejor resolución para impresión no es siempre la misma para web. Así las cosas.

En vista de esas circunstancias, realicé una optimización en masa. Valiéndome de una acción que creé en Photoshop.

Para esto empezaremos por optimizar una imagen, grabaremos los pasos  y haremos que Photoshop los realice automáticamente para las otras.

Aquí vamos.

 

Primeros pasos:

Lo primero que haremos será crear la acción en Photoshop. Crear una acción nos permitirá grabar los pasos que haremos a fin de repetirlos automáticamente cada vez que los necesitemos.

Para ello nos dirigiremos a la barra de acciones  y seleccionaremos “Crear nueva acción”. Le nombraremos de una manera que nos permita recordar para qué fue creada. En este ejemplo le puse “guardarparaweb”. Presionamos “Grabar”.

crear-accion-nueva

 

A continuación vamos a abrir nuestra imagen. Sugerencia. Para facilitar la transición coloca las imágenes que vas a optimizar en una única carpeta. En este caso he nombrado la mía “origen”.  Para efectos de este tutorial la he puesto en C:\

Si te aparece la ventana “Falta el perfil”, asigna el que muestra la imagen.

 

perfil-de-color-srgb-iec611966-21

Es importante elegir el perfil de color adecuado. Mira lo que pasará con los colores si no lo haces:

 

Elegir un perfil diferente puede cargarse los colores de tu imagen, mira los rojos en esta...

Elegir un perfil diferente puede cargarse los colores de tu imagen, mira los rojos en esta…

Perfil de color correcto, los colores permanecen como en la original

Perfil de color correcto, los colores permanecen como en la original

 

Lo siguiente que haremos será duplicar la capa. Ctrl+J Si tienes Windows.

duplicar-capa

 

En la capa duplicada aplicaremos una máscara de enfoque. Vamos a Filtro -> Enfocar -> Máscara de Enfoque y seleccionamos  cantidad radio y umbral como muestra la imagen. Si no te parece suficiente,  un rango seguro para el radio para mi gusto va de  0.2 a 0.5 y  el umbral hasta 7.  Dale Ok.

mascara-de-enfoque

 

Lo siguiente será ir a Archivo-> Guardar para web.

En esta ventana vamos a modificar Calidad: a 70%, y el tamaño de la imagen al 40% y en calidad seleccionaremos “bicúbica  más suavizada”

Seleccionamos Guardar y- elegimos la carpeta de destino. Para efectos de este tutorial he creado una carpeta llamada “destino”en C:\

optimizacion de imagenes para web

 

Comparamos el archivo para comprobar que ya tiene un tamaño más decente y que la calidad no ha mermado la foto.

Hecho esto, nos vamos a Archivo->Cerrar y cerramos el archivo.

En el botón de acciones, detenemos la grabación.

detener grabacion photoshop

 

Hasta este punto tenemos una imagen optimizada y una acción para realizar la optimización.

antes y despues de una imagen para web

Ahora ejecutaremos esta acción por Lotes, para optimizar en masa un conjunto de imágenes.

¿Hasta aquí vamos bien?

Realizar la optimización por lotes:

Nos iremos a Archivo->Automatizar->Lote

En Reproducir. Buscamos “Acción” y elegimos la acción que acabamos de crear.

En Origen. Elegimos “Carpeta” y en “Elegir” la carpeta donde tenemos nuestras imágenes sin optimizar. Para efectos de este tutorial es C:\origen.  Palomeamos la pestaña “Ignorar comandos Abrir de la acción”, “omitir cuadros de dialogo de la apertura de archivos”, y “omitir avisos sobre perfiles de color” ya que nuestra acción los ha automatizado.

En Destino. Elegimos “Carpeta” y  colocamos la ruta de la carpeta donde se crearán las imágenes optimizadas. Para efectos de este tutorial será en C:\destino.

No tocaremos la extensión del archivo para que cree archivos con el mismo nombre.  Observa estos ajustes en la imagen de abajo.

Y seleccionamos OK.

 

optimizacion de imagenes por lote

 

Verás ejecutarse la acción en cada imagen. Ve por un refresco y deja que Photoshop haga lo suyo.

Cuando el programa termine verás en la carpeta “destino” tus imágenes, pero con una notoria disminución de peso. Observa tus imágenes y juzga si estás satisfecho con los resultados.

 

¡Y voilá!

Has optimizado tus imágenes para la web.

Tras esto, en mi caso, logré tener mis imágenes optimizadas, sin comprometer la presentación ni la calidad, lo que se tradujo en una página más ágil, controlado este proceso sin depender de plugins ni rutinas web.

archivos de imagenes optimizados para web

 

 

Conclusiones: La imagen es la mejor carta de presentación que tiene un fotógrafo. Optimizar tus imágenes te permitirá tener el control de la calidad con que será mostrada en la web, por lo que es de suma importancia incluir la optimización de nuestras imágenes en el flujo de trabajo de cada uno de nuestros proyectos.

Espero que lo que te comparto te sea de utilidad.

Plus:

Tengo para ti esta acción lista para ejecutarse. Puedes obtenerla AQUÍ.

Para agregarla, descomprime el archivo y carga la acción desde la pestaña superior derecha de la barra de acciones.

cargar acciones en photoshop

 

¡Empieza ya a sacarle jugo, y siéntete libre de compartirnos tus imágenes optimizadas!

Un comentario en “Optimización de imágenes para web, guía completa paso a paso.”

  1. Muchas gracias Tiago, me sirvió mucho, justo lo que necesitaba para no perder calidad en web.

    Saludos y sigue escibiendo estos tips tan útiles 🙂

Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *