Optimizar imágenes para su uso en Internet es un delicado proceso en constante equilibrio entre calidad y peso. Queremos que nuestra imagen se vea correctamente al tamaño adecuado, pero también queremos que pese lo justo y necesario para optimizar los tiempos de carga de nuestra web, un detalle bastante importante para optimizar nuestra web de cara al SEO.

Exportar imágenes para web

Aunque gestionar el tamaño de una imagen es el factor principal a la hora de optimizar su peso, existen otras opciones relativamente sencillas para ajustar el peso de una imagen utilizando la herramienta “Guardar para Web” de Adobe Photoshop.

Primero, abrimos la fotografía en la que nos interese trabajar y elegimos Archivo > Guardar para Web.

exportar imagen para web

Detalles clave para optimizar imágenes en photoshop

Una vez hayamos dado a “Exportar ➡️ Guardar para web”, aparecerá un cuadro de opciones como el que vamos a mostrar a continuación.

detalles para optimizar imagen en photoshop

Puede resultar muy intimidante ya que presenta multitud de opciones y pestañas, pero para el caso que nos interesa, vamos a centrarnos exclusivamente en cuatro elementos:

1. El tipo de archivo. Esta pestaña nos permite elegir entre JPEG, GIF (a 8 o 24) y PNG. Para este ejemplo concreto trataremos exclusivamente el caso de JPEG por ser el más habitual, simplemente recordar que los GIF se utilizan sobretodo para guardar pequeñas animaciones y que tendremos que utilizar PNG si queremos que la imagen mantenga el fondo transparente que hayamos preparado en Photoshop.

2. La calidad de la imagen: Estas dos pestañas son parte de la magia de “Guardar para Web”. Nos permite elegir entre varias calidades predeterminadas en la pestaña izquierda, o escoger numéricamente a la derecha. Cuanto mayor el número, mayor calidad y mayor peso de la imagen.

3. El tamaño de la imagen: en este cuadro de opciones es donde más impacto vamos a poder generar sin perder calidad en nuestra imagen. Normalmente este paso suele realizarse antes de guardar, usando Imagen > tamaño de imagen, pero “Guardar para Web” nos permite una segunda oportunidad para ajustar el tamaño de nuestra imagen a las dimensiones que necesitemos. Siempre debemos utilizar imágenes del tamaño justo para el lugar que deseamos que ocupen, ni demasiado grandes, pues pesarán demasiado y harán la carga de nuestra web demasiado lenta, ni demasiado pequeñas, ya que perderemos calidad.

4. Información del archivo: aquí nos permite apreciar el cambio en peso y tamaño de nuestra imagen original (en el recuadro superior, marcada como “original”). Las cuatro pestañas justo encima de las imágenes nos permiten cambiar el tipo de visualización, en el caso de este ejemplo estamos en “2 copias”, que nos permite comparar la imagen original con su copia “guardada para web”.

Una vez estemos satisfechos con el resultado del ajuste de calidad y hayamos confirmado que el tamaño de la imagen es correcto, solo queda guardar nuestra nueva imagen optimizada y subirla a la web.

Como ya hemos comentado en varias ocasiones, subir a nuestra web imágenes al tamaño adecuado para el espacio que van a ocupar es la mejor manera de optimizar los recursos de nuestra web.

Tal vez nuestros lectores más avispados se hayan dado cuenta de que en ningún momento hemos nombrado otro factor importante dentro del mundo de la fotografía, la resolución de la imagen.

El mito de la resolución de imágenes en internet

A excepción de los fotógrafos y dibujantes más anacrónicos, la amplia mayoría de las imágenes que se producen actualmente son digitales. Esto significa que están construidas a partir de pequeños cuadrados de colores llamados píxeles. Y los píxeles tienen una cualidad desconcertante: no tienen tamaño fijo.

Como podemos observar en esta imagen, todos los cuadrados tienen las mismas dimensiones de alto y ancho, pero las dimensiones de los píxeles que los componen es muy diferente. En el primer cuadrado solo cabe un píxel mientras que en el último caben cien por cada lado. Esto es lo que llamamos resolución en píxeles.

Tradicionalmente, las imágenes que se utilizan para impresión de alta calidad suelen utilizar una resolución de 300ppp o “píxeles por pulgada”, mientras que las imágenes para web utilizan tradicionalmente una resolución de 72 ppp, casi cuatro veces menos densidad de píxeles.

¿Por qué?

La razón es tan curiosa como banal: allá por 1980, Apple puso a la venta su primera computadora Macintosh con una pantalla de 9 pulgadas y una resolución de 72ppp, que al trabajar con sus impresoras ImageWriter de 144ppp, justo con el doble de resolución, era muy sencillo escalar las imágenes que mostraba el monitor y que los usuarios pudieran ver exactamente cómo iba a quedar lo que mandaran a la impresora.

Aunque fuera una resolución estándar exclusiva de Apple, y que haya caído en desuso con los años, mucha gente sigue creyendo que las imágenes a 72ppp se verán de forma “más correcta” en los entornos web, y que estarán mejor optimizadas al pesar menos.

Pero eso no es cierto.

La verdad es que la resolución de píxeles por pulgada solo afecta a las dimensiones de impresión de una imagen, no a su representación en un entorno digital. Veamos algunos ejemplos.

comparativa de resolución

Arriba podemos ver la información técnica de la misma imagen en Adobe Photoshop, a la que hemos modificado la resolución manteniendo las dimensiones. Como podemos ver, el tamaño en megabites no varía, la imagen pesa exactamente lo mismo.

comparativa de resolución en imagen

Ahora veamos una comparativa de la misma imagen pero remuestreada. Esto permite que el ordenador modifique las dimensiones de la imagen para mantener la proporción de la resolución con respecto a la imagen original. Es decir, ponerlo a 300ppp y que los pixeles tengan las mismas proporciones. Como podemos apreciar, aquí el cambio del tamaño es evidente: de 17,6 MB, o 18.022,4KB a tan solo 256,7 KB, casi setenta veces menos.

Pero ¿qué pasa con la calidad de las imágenes? Vamos a verlo con otro ejemplo:

Estas tres imágenes tienen las mismas dimensiones, y pesan prácticamente lo mismo. Pero tienen 72ppp, 240ppp y 500ppp de resolución. ¿Sabrías distinguir cuál es cuál?

Si mandáramos las tres imágenes a imprimir recibiríamos resultados muy diferentes, pero en un entorno digital son prácticamente indistinguibles.

Así pues, lo que determina el tamaño de una imagen y su peso a la hora de cargar nuestra web no depende de su resolución sino de sus dimensiones. Por ello, optimizando las imágenes a sus dimensiones adecuadas, conseguiremos una navegación mucho más ágil y agradable para nuestros usuarios.