Cómo optimizar imágenes web y mejorar el rendimiento

Introducción

La optimización de imágenes para la web es importante, pero también es un tema complejo. Hay innumerables formas en que puedes optimizar las imágenes de tu sitio web: asegurándote de que tengan el tamaño perfecto para tu contenido, utilizando formatos de imagen y algoritmos de compresión correctos, y reduciendo las solicitudes HTTP implementando técnicas de diseño responsive o detección de dispositivos del lado del servidor. Para ayudarte en este sentido, hemos elaborado esta guía sobre cómo optimizar tus imágenes para la web.

Asegúrate de que tus imágenes tengan el tamaño exacto necesario.

Tu sitio no debe usar imágenes más grandes de lo necesario. Si deseas asegurarte de que tus usuarios obtengan el mejor rendimiento, las imágenes de tu sitio deben tener el tamaño necesario y no ser demasiado grandes ni demasiado pequeñas.

Verificando que todas las imágenes de tu página estén optimizadas correctamente y no incluyas imágenes innecesarias. Esto evitará que las páginas se ralenticen al cargarlas en un navegador.

Considera utilizar gráficos vectoriales en lugar de gráficos de mapa de bits.

Si deseas optimizar tus imágenes para la web, deberás considerar el uso de gráficos vectoriales (SVG) en lugar de gráficos de mapa de bits. Ambos tipos de imágenes usan píxeles (puntos diminutos) para mostrar una imagen en un navegador, pero existen diferencias importantes entre ellos.

Los archivos de mapa de bits son estáticos y los archivos vectoriales son dinámicos:

Los archivos gráficos de mapa de bits contienen información sobre cada píxel individual de una imagen. Esto significa que no se pueden ampliar o reducir sin perder calidad. Los archivos de gráficos vectoriales almacenan formas y líneas que describen la imagen; no contienen ninguna información de píxeles real. Como resultado, los gráficos vectoriales se pueden cambiar de tamaño sin pérdida de calidad y también le permiten una mayor flexibilidad al editar sus imágenes porque puede cambiar sus dimensiones sin afectar su apariencia o cambiar los valores de color dentro de ellos.

Los gráficos vectoriales tienden a ser más fáciles que los mapas de bits porque no son tan complejos: si estás diseñando algo como una infografía con mucho texto superpuesto a elementos visuales (como gráficos), crear esos elementos visuales en un formato vectorial lo hará más fácil para los lectores que pueden necesitar tamaños de letra más grandes que otros debido a problemas de visión, por ejemplo. Además, es necesario para usuarios con conexiones a Internet más lentas o dispositivos sin procesadores potentes, como tabletas o teléfonos inteligentes, esto también tiene sentido, ya que se requiere menos potencia de procesamiento en comparación con los mapas de bits que requieren tanto espacio de almacenamiento de memoria como demanda de potencia de CPU durante el tiempo de renderizado.

Usa el formato de imagen adecuado.

Lo primero que debes hacer es decidir qué formato vas a utilizar. Si estás utilizando fotos, JPEG es probablemente la opción correcta. Es "lossy", por lo que mantendrá el tamaño de los archivos bajo sin sacrificar demasiada calidad, perfecto para fotos que no requieren detalles de alta resolución o una precisión de píxeles perfecta.

Sin embargo, si estás trabajando con gráficos (como logos o ilustraciones), WEBP o PNG son más adecuados ya que no pierden tanta calidad y admiten bien la transparencia; es lo que recomendamos usar si es posible.

Tu sitio no debe usar imágenes más grandes de lo necesario

Optimiza tus imágenes.

Puedes optimizar tus imágenes de varias maneras. Utiliza la herramienta adecuada para el trabajo:

• Usa una aplicación como Photoshop o Affinity Photo para editar y optimizar archivos sin formato.
• Usa un complemento como ImageOptim (Mac) para comprimir archivos WEBP, JPEG y PNG. Estas herramientas son excelentes para la optimización por lotes, pero no funcionan en todos los formatos de fotos (por ejemplo, TIFF).
• Prueba un servicio en línea como compressor.io o TinyPNG, que analizará cada imagen y la comprimirá en función de su contenido. ¡No cargues el archivo original en tu página web!

Optimiza las solicitudes HTTP iniciales mediante la implementación de imágenes adaptables y sugerencias de clientes.

Si un navegador solicita una imagen que es más pequeña que el tamaño real de la imagen, el navegador puede enviar un encabezado de solicitud que contenga el ancho y el alto de la imagen. Esto reduce los datos enviados a través de la red, lo que mejora el rendimiento.

Para implementar imágenes adaptables en Tu sitio, utilíZAlas en el elemento HTML y configurA puntos de interrupción en tu CSS o consultas de medios para que las imágenes se ajusten a su tamaño de ventana gráfica correspondiente.

Diseño receptivo y detección de dispositivos del lado del servidor.

El diseño receptivo es un enfoque de diseño web que tiene como objetivo proporcionar una experiencia de visualización óptima (lectura y navegación fáciles con un mínimo de cambio de tamaño, desplazamiento panorámico y desplazamiento) en una amplia gama de dispositivos. La práctica consiste en una combinación de cuadrículas flexibles, diseños líquidos y consultas de medios CSS.

Las imágenes receptivas son una extensión de los principios del diseño receptivo. En lugar de diseñar para un tamaño de pantalla en particular (el método más común) o varios tamaños de pantalla a la vez (el método de "cuadrícula CSS"), podemos diseñar para cualquier dispositivo posible ofreciendo diferentes archivos de imagen según las características de la ventana gráfica del dispositivo.

Optimizar imágenes automáticamente a través de un servicio de imágenes CDN o una herramienta de optimización de imágenes

Una alternativa a la optimización manual de imágenes es usar un servicio de imágenes CDN o una herramienta de optimización de imágenes que haga el trabajo por ti.

• La mayoría de los servicios de CDN, como Stackpath, tienen una función de optimización de imágenes integrada. Simplemente carga tus imágenes originales de alta resolución en sus servidores, y automáticamente generarán versiones más pequeñas de esas mismas imágenes en diferentes resoluciones en varios formatos (jpeg, png, etc.). Estos activos más pequeños pueden ser entregados por el proveedor de CDN directamente a través de una URL, lo que significa que los visitantes no tendrán que esperar a que se descarguen antes de mostrarlos en su sitio. El principal beneficio es que los visitantes no necesitan esperar archivos grandes antes de ver algo en su página porque todo ya ha sido optimizado por CDN, ¡lo que hace que las páginas se carguen más rápido en general!