Optimización de imágenes para la web

Sin lugar a dudas, uno de los elementos más importantes dentro del desarrollo de una página son las imágenes que se utilizan. Principalmente, se pueden diferenciar dos tipos:

• Imágenes informativas: se añaden para tratar de aportar o representar determinada información que se podría describir mediante una pequeña frase.
• Imágenes decorativas: se añaden únicamente como un elemento de decoración visual para la web (estas no aportan ningún tipo de información).

Cuando se quiere comenzar con el desarrollo de una web, de cara a la experiencia de los futuros usuarios que la utilizarán, es necesario (o, al menos, muy recomendable) disponer de una serie de conocimientos básicos que permitan mejorar todo aquello que esté relacionado con el rendimiento y la usabilidad de la página.

Una parte de esos conocimientos básicos está muy relacionada con el tema de las imágenes: a día de hoy, con la alta competencia que existe por aparecer en los primeros puestos dentro de las búsquedas que se realizan en los principales buscadores (por ejemplo: Google, Bing o Yahoo!) y la alta exigencia que tenemos los usuarios respecto al tiempo de carga de la web (la respuesta de esta ha de ser lo más rápida posible: muchos son los estudios que resaltan la poca paciencia que tenemos frente a una página web), es prácticamente obligatorio utilizar imágenes que estén correctamente optimizadas (principalmente por las numerosas e importantes ventajas que ofrece, por el poco coste que conlleva realizarlo y por la penalización y las desventajas que presenta el no hacerlo).

Proceso de optimización

Pero… ¿a qué hace referencia exactamente el concepto de estar «correctamente optimizadas»? Pues bien, principalmente a tres aspectos fundamentales: al tamaño, al peso y al formato escogido.

• Tamaño

Es necesario utilizar un tamaño adecuado (es decir, unas dimensiones), que se encuentre adaptado lo máximo posible a cómo se van a presentar en la web: utilizar un tamaño mayor del que posteriormente se va a mostrar en la página implica cargar bytes que no se van a utilizar (se van a desechar) y, además, la web tendrá que redimensionar la imagen a la medida necesaria.

Un ejemplo de lo que se comenta podría ser el siguiente:

Se está desarrollando una web en la que las imágenes van a mantener una relación de aspecto 2:1 y tendrán un ancho máximo de 350 px. Es decir, las imágenes, como máximo, van a ser de 350 x 175.

Sin embargo, el desarrollador dispone de unas imágenes que tienen las siguientes medidas: 951 x 552, 760 x 418 y 879 x 300. Son de mayor tamaño y de diferente relación de aspecto que lo que realmente se va a mostrar en la web. Por lo tanto, ¿qué ocurriría en este caso si se cargan en la web con esos tamaños?

Se hace la carga de la imagen al completo (hay que tener en cuenta que, a mayor tamaño, mayor peso) con la medida original (no con la que se muestra en la web) y, una vez realizada la correspondiente espera de carga, se desechan los bytes innecesarios cuando el sistema detecta que tiene que redimensionar la imagen. Es decir, todo desventajas.

• Peso

Es necesario comprimir las imágenes reduciendo todo lo que se pueda el peso de las mismas. Sin lugar a dudas, uno de los elementos que más incrementan los tiempos de carga de una página son las imágenes. Por ello, es imprescindible aplicarle un proceso previo de optimización.

Considerando que, por ejemplo, se tiene un total de 5 imágenes y que cada una de ellas pesa unos 500 kB, como poco, la web tendría que hacer la carga de 2,5 MB solo en imágenes. Sin embargo, si se les aplica un proceso de compresión a cada una de ellas y se acaba obteniendo una optimización total de un 75 %, la web tendría que cargar 625 kB (frente a los 2,5 MB anteriores). ¿A que no es lo mismo? Pues no imaginas lo que un usuario puede agradecer esta optimización cuando está esperando a que su página cargue.

Existen numerosas herramientas (tanto online como de escritorio) que permiten reducir el peso de las imágenes.

Por un lado, dentro de las herramientas online se pueden encontrar algunas como TinyPng, Compressjpeg, compressor.io y Compressnow.

Por el otro, dentro de las herramientas de escritorio se pueden encontrar algunas como los programas Adobe Photoshop y Gimp.

• Formato

Es necesario escoger el formato adecuado (la extensión del archivo) en función de la imagen que se quiera utilizar.

En la actualidad existen muchos formatos diferentes que se pueden asignar a los archivos de imagen para guardarlos. Sin embargo, de entre la gran variedad existente, hay algunos de ellos que se pueden catalogar como los más populares: estos formatos son PNG, JPG y GIF. La inmensa mayoría de usuarios utiliza estos tres formatos para el almacenamiento de imágenes.

A continuación, se detallan las principales características de cada uno de ellos y cuándo es recomendable utilizar uno u otro:

Formato PNG (Portable Network Graphics): es utilizado cuando se quiere tener imágenes de máxima calidad, ya que es un formato de compresión SIN pérdida de calidad. Las imágenes de este formato soportan transparencias y está recomendado utilizarlo para imágenes sin fondo, imágenes que contengan texto, logotipos, iconos y dibujos lineales. Sin embargo, a pesar de poder disponer de mayor calidad en la imagen y más flexibilidad a la hora de trabajar, el tamaño del archivo va a ser siempre (o casi siempre) mayor que el de una imagen con formato JPG.

Formato JPG (Joint Photographic Experts Group): es utilizado cuando se quiere tener imágenes en las que no se precisa disponer de la máxima calidad, ya que es un formato de compresión CON pérdida de calidad. Las imágenes de este formato no soportan transparencias (siempre van a tener un fondo de color sólido) y está recomendado utilizarlo cuando se desea trabajar con imágenes fotográficas, ya que estas suelen pesar mucho y tienen bastantes posibilidades de reducción (es aquí donde entra en juego la relación «nivel de compresión vs calidad de la imagen»: a mayor compresión, menor calidad de imagen). Estas imágenes, por norma general (dependiendo también del nivel de compresión), van a pesar menos que las de formato PNG.

GIF: es un formato que, a día de hoy, está prácticamente obsoleto, pero, sin embargo, se recomienda utilizar en los casos en que se quieran incluir imágenes animadas.

Sin embargo, con los avances tecnológicos que se producen casi a diario, están surgiendo nuevos formatos de imagen: los formatos de próxima generación. Según esta página web, «se trata de formatos de imagen que tienen características superiores de compresión y calidad, en comparación con los formatos PNG o JPG. En concreto, se trata de formatos como JPEG 2000, JPEG XR y WebP. Con estos formatos, además, se descargan más rápido las imágenes y se consumen menos datos móviles».

Presentan un inconveniente muy grande (que es el motivo por el que aún no están más implantados y no se utilizan más) y es, a grandes rasgos, las incompatibilidades que presentan con los principales navegadores.

Ejemplo de optimización

A continuación, vemos un ejemplo de optimización de una imagen en formato PNG en la que se llega a obtener un 65 % de compresión (es decir, una pérdida del 65 % de su peso total):

Ahora, otro ejemplo de una imagen en formato JPG en la que se llega a obtener un 79 % de compresión:

Ahora, teniendo una diferencia de peso tan abrumadora entre una imagen y otra, a simple vista, ¿qué diferencia en la calidad se puede apreciar entre las imágenes originales y las optimizadas? Ninguna, ¿verdad? Pues se ha pasado de tener que cargar 2,4 MB a 840 kB en la primera imagen y 758 kB a 156 kB en la segunda imagen.

Pues esto que parece (y que es) tan sencillo de realizar e inapreciable para la vista humana, como ya comenté anteriormente, reporta unos beneficios muy valiosos para el usuario y para el posicionamiento de la página en los buscadores.

Beneficios de la optimización

Una vez visto el ejemplo y cómo se pueden optimizar las imágenes que se quieren mostrar en la web, es el momento de ver cuáles son los principales beneficios que se obtienen después de haber realizado todo este proceso.

Muchos usuarios pueden llegar a pensar que invertir tiempo en el proceso de optimización de las imágenes está mal invertido. Sin embargo, se puede afirmar con total seguridad que, si se quiere obtener una web con tiempos de carga aceptables/buenos y con posibilidad de posicionar bien en los buscadores, pasar por este proceso es más que necesario. Esto permite disponer de archivos mucho menos pesados y mejorar en gran medida los tiempos de carga de la web:

• Favorece el SEO de la web: el posicionamiento (en qué lugar se aparece: primero, segundo, tercero, cuarto…) dentro de las búsquedas que los usuarios realicen a través de los buscadores.

• Mejora la usabilidad de la web: cuanto menos tiempo tarde la web en cargar, menos tiempo tendrá que estar esperando el usuario para poder ver el contenido que desea. Cada vez somos más los que esperamos menos y pecamos de impacientes para cambiar de web rápidamente si vemos que no carga el contenido: esto implica perder usuarios potenciales.

• Mejora la accesibilidad: cuanto más difícil sea ver el contenido (en este caso, por un tiempo alto de carga de su contenido) menos accesible será la web.

• Mejora en la navegación móvil: cuando se navega a través de conexión 3G o 4G, por norma general, no se dispone del mismo ancho de banda que cuando se realiza mediante conexión wifi. Por lo tanto, siempre se agradecerá más tener un menor tiempo de carga durante la navegación en smartphones.

Enlaces relacionados:

https://t-position.com/que-son-los-formatos-de-imagen-de-proxima-generacion/

Documentación:

https://www.wextensible.com/como-se-hace/html5-texto-alternativo/imagen-informativa-decorativa.html

https://kinsta.com/es/blog/optimizar-imagenes-para-la-web/

https://www.40defiebre.com/optimizar-imagenes-web

https://blog.ensalza.com/diferencias-entre-jpg-png-y-gif/

https://www.tuexperto.com/2020/01/09/jpg-vs-png-vs-gif-formato-es-mejor-mis-imagenes/

https://t-position.com/que-son-los-formatos-de-imagen-de-proxima-generacion/

Cita recomendada: CAPILLA, Conrado. Optimización de imágenes para la web. Mosaic [en línea], marzo 2020, no. 180. ISSN: 1696-3296. DOI: https://doi.org/10.7238/m.n180.2009