Optimizar nuestras imágenes para la web es muy importante a la hora de compartir portafolios digitales, subir nuestras imágenes a nuestra página personal e incluso compartir las imágenes en redes. Sin embargo, comprimir la información resulta en una pérdida de calidad sobre la fotografía. Así que, ¿cómo podemos reducir el tamaño y peso de nuestras imágenes antes de perder demasiada calidad?

Identificar el propósito

El primer error que muchos fotógrafos cometen cuando exportan sus imágenes para la web es comprimir la imagen sin modificar su tamaño. Ya que la resolución es más que la necesaria, la compresión también debe ser mayor, reduciendo la calidad general de la fotografía. Por eso, lo primero que debemos ajustar en nuestras imágenes es el tamaño final.

La mejor forma de hacerlo es entrando a Photoshop y presionando Ctrl+Alt+I en el teclado. Esto abrirá la ventana de ‘Tamaño de imagen’. Como podéis ver en la imagen de abajo, el tamaño original de la imagen era de 11.2 MB.

Manteniendo activo el mantener la proporción de tamaño podemos cambiar el tamaño del largo más largo de la imagen. Por ejemplo, un tamaño promedio para compartir en web es 1500 píxeles de largo, así que ajustamos la foto a ese largo.

Podéis ver cómo la imagen pasa de 11.2MB a tan solo 4.29MB. El peso general se redujo más del 50%. Ahora, ¿cómo podemos comprimir la información para no perder mucho detalle o calidad?

Comprimiendo al máximo

Una de las herramientas más útiles en photoshop es el panel de ‘Exportar para Web’ al cual se puede acceder presionando Ctrl+Alt+Shift+S en el teclado. Este panel está diseñado para guardar imágenes optimizados para web en varios formatos de archivo como JPEG, GIF y PNG. Al abrirlo, se recomienda abrir el panel de 4 Ventanas, se verá algo como abajo.

Esta vista nos permite ver varias opciones de exportación al tiempo para ver cómo afectan los ajustes a la imagen. En la vista de arriba podéis ver la imagen original y una exportación en JPEG a 100% de calidad, 50% de calidad y 25% de calidad.

En Xataka Foto

Por qué y cómo optimizar las imágenes para nuestro portfolio web

En el panel de la derecha, en la parte superior podemos ajustar la calidad del método de compresión. Para mantener la mejor calidad, es recomendable mantenerlo siempre en ‘Máximo’ o ‘ Muy alta’. De esa manera evitaremos que la imagen se deteriore tanto al comprimir.

Así mismo, podemos activar la casilla de optimizar, la cual genera una compresión adicional, que puede reducir hasta un 20% adicional el peso tras la compresión. Sin embargo, el punto más importante es el ajuste de la calidad de compresión de la imagen.

En la imagen de abajo podemos ver cómo se afecta la calidad. Al 100% hay una pequeña variación de color que se da por la optimización para el espacio de color de la web. Sin embargo, mantenemos un alto nivel de detalle y tenemos una imagen que tan solo pesa 758 KB. Al 50% podemos notar que hay mucho más ruido digital, pero todavía se ve un buen nivel de detalle y tan solo pesa 92 KB. Al 25% podemos ver que la compresión destruye las gradientes de los tonos, se forman artefactos digitales y hay una gran pérdida de calidad, así tan solo pese 25 KB.

La clave de balancear calidad y peso está en ajustar el porcentaje de compresión para cumplir con un estándar de visualización. Debemos hacer que la imagen se vea lo mejor posible para nosotros. Debemos aceptar que no es perfecto, pero que si no se ve mal en el medio final, tampoco será un problema. En este caso, podemos ver el ejemplo de comprimirlo al 70% de calidad (un porcentaje usualmente balanceado). No hay mucho ruido agregado, el detalle se mantiene bien y tan solo pesa 210 KB.

Abajo podéis ver cómo queda el resultado final.

¿Qué os parece este método?

Probablemente reducir nuestras fotos para subirlas a internet, mandarlas por correo, o simplemente para tenerlas a menos resolución es una de las acciones que más usamos a diario cuando trabajamos con Photoshop.

Y normalmente, para hacerlo, lo hacemos de la siguiente forma: Imagen – Tamaño de imagen, le damos una nueva dimensión en píxeles y pulsamos OK. Pero pocas veces reparamos que en que existe un menu desplegable donde podemos decirle al programa de que manera remuestrear la imagen, para optimizar este redimensionado.

Para mejorar la calidad de una foto reducida bastará con usar la opción bicúbica más enfocada (óptima para reducciones) que básicamente nos aplica la máscara de enfoque apropiada en función de la resolución de salida.

Las diferencias se notan de forma considerable:

Reducción por defecto:

Reducción bicúbica más enfocada:

Supongo que lo apreciáis, aunque en función de la foto obtendremos mejores o peores resultados. Normalmente cuanto mayor sea la profundidad de campo, más notaremos la diferencia.

El caso contrario también es evidente. Si queremos ampliar una imagen, usaremos bicúbica más suavizada (óptima para ampliaciones) con lo que conseguiremos que las imágenes se pixelen menos y se suavicen mejor, cuando pasamos de una foto con pocos píxeles a una de gran tamaño.

Ideal si queremos usarlo para interpolar fotos a grandes tamaños.

Ampliación por defecto:

Ampliación bicúbica más suavizada:

Bueno, pues ya sabemos algo más, aunque nos encontramos con el problema de que no es muy cómodo tener que cambiar esta opción cada vez que queremos reducir o ampliar una foto con esta configuración, pero también hay una solución a esto.

Si habitualmente lo que hacemos es reducir fotos, podemos configurar photoshop para que nuestra opción por defecto sea bicúbica más enfocada. Para ello sólo tendremos que ir a

• Preferencias > General > Interpolación de imagen > bicúbica más enfocada

Y ya lo tendremos configurado para que sea la opción por defecto.

Para el caso contrario, pues igual.