3 trucos sencillos para mejorar el rendimiento de imágenes

Los sitios web lentos y con mal rendimiento afectan directamente la efectividad de un servicio, en particular si su principal canal de ventas es a través de la web. Nadie en su sano juicio le pondría una puerta de 300 kilos a su local para que los usuarios inviertan más tiempo y esfuerzo para entrar, un sitio de varios MB tiene el mismo efecto sobre los visitantes web.

En general, el código HTML y JS no consume mucho ancho de banda, el código en JavaScript en ocasiones puede ser un poco más intensivo con los recursos pero raras veces y generalmente a causa de múltiples librerías externas o frameworks es que su tamaño llega a medirse en megabytes.


Los archivos multimedia son los que más datos consumen y en particular las imágenes, al ser las más utilizadas son las que tienden a generar problemas de optimización, en este artículo nos enfocaremos en este formato en particular para ofrecerte Tres trucos de optimización de imágenes.

1 - Guarda tus imágenes en el formato correcto

Uno de los errores más comunes es tomar las imágenes de alta resolución que usan los diseñadores y agencias para publicarlas directamente en la web. Con frecuencia esas imágenes están creadas para medios impresos que utilizan una resolución muy alta. También utilizan algoritmos de baja compresión que no son eficientes para la web.

Usa siempre imágenes con una resolución de 72 ppi (píxeles por pulgada) 

Sobre el formato de imagen, prefiere formato GIF o PNG en los casos que uses colores sólidos o texto. El formato JPG funciona mejor con imágenes con gradientes de color, como fotografías o imágenes complejas. Cada imagen es diferente y puede tener resultados diferentes en cada formato, no olvides experimentar y comparar con diferentes compresiones, codecs y formatos para obtener los mejores resultados.

2 - Escala al tamaño adecuado

Otro error común es utilizar imágenes de gran tamaño para áreas más pequeñas.

Si una imagen está pensada para desplegarse en un área de 300 x 300 px ,el tamaño de la imagen que se utiliza  no debe medir más de eso. Al utilizar una imagen de mayor tamaño se están transmitiendo datos innecesarios y en ocasiones se distorsiona la imagen reduciendo su calidad.

Una forma fácil y rápida de encontrar el tamaño verdadero de una imagen es hacer click derecho sobre ella desde el navegador Chrome, seleccionar la opción “inspect”, buscar la etiqueta de la imagen en el código fuente y allí ver sus propiedades.

3 - Elimina datos innecesarios

En ocasiones, las imágenes incluyen datos adicionales que no son necesarios para desplegar en la web, por ejemplo fotografías capturadas en una cámara contienen datos EXIF o imágenes PNG procesadas en algunos editores insertan datos de capas y parámetros de edición.

Al momento de exportar una imagen asegúrate de que está en formato web y que no incluya capas o datos adicionales.

Bonus: Herramientas para optimizar imágenes

Existen muchos servicios online que pueden optimizar imágenes y reducir automáticamente su tamaño, entre los más populares están

• Tinypng.com
• Imageoptim.com
• Squoosh.app

A continuación te voy a incluir 2 imágenes que se ven del mismo tamaño y tienen el mismo efecto visual, pero una mide casi 1mb  mientras la otra, que fue procesada con las herramientas y consejos mencionados en este artículo, se redujo en un 96% del tamaño original, ahora mide solo 31 kb. Como comparativa, en una conexión lenta de celular la imagen original tarda 90 segundos mientras la optimizada solo toma 10 segundos.

Con una simple optimización y usando buenas prácticas de revisión constante en tu sitio, puedes garantizarte que el rendimiento puede aumentar dramáticamente y facilitarle el acceso a tus usuarios.

Photo by Soragrit Wongsa on Unsplash.