Como reducir correctamente nuestras imágenes para WEB

El otro día estaba pensando en el tema de la cantidad de fotografías que hacemos y las pocas que normalmente imprimimos, porque casi siempre las solemos o guardar o en todo caso, ahora con el tema de las redes sociales, las subimos a la WEB.

Además si vamos un poco más allá, vemos que las imágenes que tomamos tienen una resolución pasmosa, del orden de como poco ya unos 20 Mpx con lo que podríamos hacer impresiones tipo “sabana” enormes, pero no es lo que hacemos como ya he dicho antes, si no que lo que hacemos es subir esas imágenes a la web y claro a ese tamaño no se suelen poner, y las tenemos que reducir a tamaños que no llegan a un Megapixels , por ejemplo a unos típicos 800×600 = 480.000 pixels, ósea ni siquiera medio megapixel.

Fijaros que cosas, más curiosa tenemos fotos enormes y luego las vemos en tamaños en general muy pequeños comparados con el original, os voy hacer un dibujo para que veáis que nos pasa de verdad, porque siempre he pensado que de esa manera se ven mejor las cosas que con una explicación larga y profunda.

Imaginad que tenemos una foto de unos 20 Mpx ósea de 5472 x 3648 Px como la de una  EOS 5D MKIII o una G7X algo común  entre las cámaras ahora y la queremos ver en un monitor.

Pues si es grande y la queremos ver en un monitor que muchos de ellos ni siquiera son de 2,5 Mpx veríamos solo parte de ella, como os muestro en el dibujo que os pongo a continuación donde vemos la foto y lo que vemos en la pantalla que es un trozo de la misma.

Si queremos ver otra parte de la imagen, debemos de mover la fotografía con las barras de scroll a esa zona, pero seguiríamos viendo sólo una parte.

Por tanto ¿entonces que debemos de hacer si queremos verla al completo en nuestra pantalla?…. pues efectivamente reducirla y ajustarla a nuestra pantalla desde 5472 x 3648 Px al tamaño de nuestra pantalla, por ejemplo 1920×1280 px, y por tanto habrá un proceso de reducción con algún algoritmo que evidentemente deberá ser lo más preciso posible para que cuando la veamos sea una imagen buena y no una imagen simplemente reducida donde se pierdan detalles o se pierde nitidez.

Fijaros que estamos perdiendo un montón de datos al hacer esto, y debe hacerse bien porque si no ¿de qué sirve hacer un RAW estupendo, un procesado magistral para luego ver una porquería? Esto es algo que la gente no tiene en cuenta y es de vital importancia, pensamos en el ruido, en el margen dinámico, en tener una cámara maravillosa y luego este proceso lo obviamos.

Esta reducción es lo que hacen nuestros programas normalmente, y claro dependiendo de lo buenos que sean en este proceso los veremos mejor o peor, ya os adelanto que el visor de Windows es una patata. En una próxima entrada os diré como hacerlo para el monitor y la veáis perfecta, pero hoy voy hacerlo para las imágenes WEB.

Imaginad que queremos mostrar nuestra imagen al mundo entero en una WEB y claro queremos que salga bien a pesar de que sea pequeña y admiren nuestro trabajo, bueno pues tranquilos que algo se puede hacer, ya que vamos a reducir el peso de la imagen bastante pero manteniendo una calidad más que razonable de imagen.

Os diré que yo me apoyo en varios programas, pero tengo que decir que Photoshop lo hace bastante bastante bien ya que tiene una herramienta que para mi funciona estupendamente, reduciendo las imágenes para que las pongamos en nuestras WEB o en nuestras redes sociales sin que la pérdida de calidad sea grande y encima a un tamaño pequeño.

Imaginad que tenemos esta fotografía, que a su tamaño real se ve de forma excelente con una nitidez muy buena y es de 11 Mb.

Lo que hago es ir a Archivo – Guardar para web y me aparece la siguiente ventana con la imagen optimizada que es lo que nos propone Photoshop en función de los ajustes por defecto.

¿Qué ha hecho el programa al abrir esta ventana? pues teniendo en cuenta que la imagen inicial era de 11Mb y ahora ya está en 4,8Mb Photoshop ha reducido el “peso” de la imagen pero con el mismo tamaño, esto si os dais cuenta es una especie de optimización para guardarla en nuestro disco duro y que ocupe menos, pero no la hemos reducido que es lo que queremos para WEB.

Para ello ahora ajustamos ahora la imagen por ejemplo 1000×667 Pixels, con los parámetros que he puesto de calidad en la parte derecha de: compresión, SRGB, tamaño de la Imagen y algoritmo usado y además le he quitado los matadatos.

Fijaros que se ha reducido a 314 KB en un tamaño de 1000×667 pixels pero la calidad es perfecta, de hecho la podéis ver aquí:

Esto es lo que suelo hacer yo normalmente, algunas veces también suelo antes de aplicar este método, reducirla antes, pero vamos así es más que suficiente, como podéis ver.

¿Que hemos conseguido?

1) Un tamaño interesante

2) Un peso de imagen muy pequeño.

Espero que este pequeña entrada os ayude un poquito más en vuestro trabajo diario.