Explicaremos las técnicas efectivas de optimización de imágenes que mejoran significativamente el rendimiento de tu sitio web.
1. Formatos de imagen
Elegir el formato de imagen correcto para cada tipo de imagen puede afectar significativamente el tamaño y la calidad del archivo de la imagen. Aquí está la lista de diferentes formatos de imagen que puedes utilizar para tu sitio web.
a. WebP
WebP es un formato de imagen desarrollado por Google que ofrece una mejor compresión y tamaños de archivo más pequeños en comparación con JPEG y PNG. Es compatible con la mayoría de los navegadores modernos (excepto algunas versiones de Safari e Internet Explorer). Para utilizar WebP, puede proporcionar formatos WebP y formatos alternativos como JPEG o PNG en tu HTML.
La compatibilidad de webP es:
b. JPG 2000
JPEG 2000 es otro formato de imagen de alta calidad con buena compresión. Sin embargo, su soporte en navegadores es limitado. De manera similar a WebP, puedes proporcionar una versión JPEG 2000 y formatos alternativos.
La compatibilidad de JPG 2000 es:
C. AVIF
AVIF es un formato de imagen más nuevo que proporciona una excelente compresión y calidad de imagen. Es compatible con navegadores modernos como Chrome y Firefox.
La compatibilidad de AVIF es:
Si bien WebP y AVIF son compatibles con los navegadores modernos, JPEG 2000 tiene una compatibilidad limitada. Por lo tanto, es esencial probar tu sitio web o aplicación en diferentes navegadores para garantizar una visualización adecuada de la imagen para todos los usuarios.
2. Imágenes adaptables
Las imágenes responsivas te permiten mostrar diferentes imágenes según el dispositivo y el tamaño de la pantalla del usuario. Esto evita que se carguen imágenes grandes en pantallas más pequeñas, ahorrando ancho de banda. Utiliza los atributos srcset y sizes en el elemento img para lograr esto:
sizes: informa al navegador del tamaño de visualización previsto de la imagen en función del tamaño. No afecta qué imagen elige descargar el navegador. srcset: enumera varias fuentes de imágenes con descriptores de ancho (800w). Cada descriptor de ancho representa el ancho real de la imagen en píxeles. Cuando el navegador encuentra ambos atributos (sizes y srcset), sigue estos pasos:
- Evalúa el atributo sizes para determinar el tamaño de visualización deseado de la imagen en función del ancho de la ventana gráfica del dispositivo.
- Luego utiliza este tamaño calculado, junto con los descriptores de ancho disponibles en srcset, para decidir qué imagen descargar. El navegador selecciona la imagen con el descriptor de ancho más cercano (más cercano al tamaño calculado) de srcset.
3. Carga diferida ‘Lazy loading’
La carga diferida es un método que pospone la carga de imágenes hasta que estén a punto de volverse visibles en la ventana gráfica del usuario. Esto reduce el tiempo de carga inicial de la página. Utiliza el atributo loading="lazy" en el elemento img (de forma predeterminada, el atributo loading está establecido como eager)
4. Precarga y almacenamiento en caché
Precarga imágenes críticas para reducir el retraso cuando realmente se necesitan. Utiliza la etiqueta link con rel="preload" en el encabezado de su HTML:
Además, considera utilizar service workers para almacenar en caché las imágenes para visitas posteriores. El siguiente es un ejemplo básico del uso de un service worker para almacenar imágenes en caché.
En una aplicación React, puedes usar el paquete react-helmet para agregar el enlace de precarga en la sección de encabezado HTML para imágenes críticas.
5. Sprites de imágenes
Una hoja de sprites es una única imagen que contiene varias imágenes o iconos más pequeños. Se utiliza para reducir la cantidad de solicitudes HTTP al representar numerosas imágenes pequeñas en una página web. Al cargar una sola hoja de sprites, puedes mostrar imágenes específicas ajustando la posición con el CSS.
Supongamos que estás creando una aplicación web de redes sociales y deseas mostrar varios íconos para acciones como dar me gusta a una publicación, comentar y compartir. Cada ícono es una pequeña imagen que normalmente se usa en diferentes partes de la aplicación.
Sin Sprites de Imagen:
En un enfoque tradicional, incluirías cada ícono como un archivo de imagen separado en tu HTML o CSS, así:
Con Sprites de Imagen:
Al utilizar sprites de imágenes, puedes combinar todos estos íconos en una sola hoja de sprites, lo que reduce la cantidad de solicitudes HTTP. Aquí hay un ejemplo de cómo se vería:
En este ejemplo, todos los íconos (me gusta, comentar, compartir, etc.) se combinan en una sola icons-sprite.png hoja de sprites. Las clases CSS (por ejemplo, .like-icon, .comment-icon, .share-icon) usan la propiedad background-position para mostrar la parte correcta de la hoja de sprites como fondo para cada ícono.
Puedes hacer lo mismo con la ayuda de herramientas como https://icomoon.io/ que te ayudará a generar la hoja de sprites y el CSS con el nombre de las clases que configures.
Beneficios:
- En lugar de cargar varios archivos de imagen, la aplicación web ahora carga solo una imagen (icons-sprite.png), lo que reduce el número de solicitudes HTTP.
- La hoja de sprites se carga una vez y el navegador puede almacenarla en caché, lo que mejora las cargas de páginas posteriores.
- Las clases de CSS controlan la visualización de íconos individuales de la hoja de sprites, lo que permite efectos de desplazamiento y desplazamiento fluidos sin demoras de carga adicionales.
- Esto conduce a experiencias de usuario más rápidas y eficientes con tiempos de carga mejorados.
6. Servicio de imágenes adaptable
Adaptive Image Serving es una técnica utilizada en el desarrollo web para entregar imágenes optimizadas para el dispositivo y las condiciones de red específicas del usuario. El servicio de imágenes adaptativo tiene como objetivo proporcionar la mejor calidad de imagen posible al mismo tiempo que minimiza el tamaño del archivo de imagen y garantiza un rendimiento óptimo.
Por lo general, este servicio se gestiona con un CDN o un servidor de imágenes con capacidades de cambio de tamaño dinámico y los detalles de implementación pueden variar según el servicio elegido. Por ejemplo, si prefiere utilizar AWS CloudFront, consulta este enlace para obtener más información sobre la optimización de imágenes: Blog de AWS: optimización de imágenes con Amazon CloudFront y AWS Lambda.
7. Eliminar metadatos
Eliminar metadatos de las imágenes es un paso esencial en la optimización de imágenes. Debido a que los metadatos de imagen a veces pueden ocupar una parte significativa del tamaño del archivo de una imagen, especialmente para imágenes capturadas con cámaras digitales o teléfonos, al eliminar los metadatos, puedes reducir significativamente el tamaño general del archivo de la imagen, lo que lleva a una carga más rápida de la imagen en las páginas web. Herramientas como ImageMagick u otras herramientas online te permite eliminar los metadatos de imágenes.
8. Utiliza SVG para iconos y logotipos
Los SVG son ideales para íconos simples porque están basados en vectores y se pueden escalar sin perder calidad.
El uso de SVG para íconos proporciona una solución liviana, escalable y visualmente atractiva que mejora el rendimiento de la página web, garantiza imágenes nítidas y mejora la experiencia general del usuario en varios dispositivos y navegadores.
El uso de SVG también puede ser útil para los logotipos, pero ojo, que como estrategia de marketing puede ser mejor que sea un formato estándar para que los usuarios puedan descargar el logo y poder visualizar y utilizar sin problemas de formatos.
9. Dimensiones de la imagen
Especificar las dimensiones de la imagen en HTML o CSS es esencial para evitar cambios de diseño y mejorar la velocidad de representación de la página. Al especificar las dimensiones de la imagen en HTML o CSS, proporciona al navegador la información necesaria para asignar el espacio correcto para la imagen durante el proceso de renderizado inicial.
Beneficios
- Evita cambios de diseño: especificar las dimensiones garantiza que el navegador conozca el tamaño exacto de la imagen antes de cargarla, evitando cambios repentinos de diseño.
- Representación de página más rápida: con las dimensiones de la imagen conocidas de antemano, el navegador puede representar el diseño de manera más eficiente, lo que acelera los tiempos de carga de la página.
- Experiencia de usuario mejorada: al eliminar los cambios de diseño, los usuarios tienen una experiencia de navegación más consistente y placentera.
Para especificar las dimensiones de la imagen, puedes incluir directamente los atributos width y height dentro de la etiqueta <img> o aplicar un estilo específico agregando un atributo de clase a la etiqueta <img> en CSS.
10. Blur
Aparte de las técnicas mencionadas anteriormente, puedes utilizar técnicas Blur como Blurhash que permite la compresión automática de imágenes con un CDN para una carga más rápida, donde la imagen se muestra inicialmente en baja resolución y mejora progresivamente su calidad a medida que se carga por completo, y la carga progresiva de imágenes para una mejora gradual de la calidad.
Conclusión
La optimización de imágenes es crucial para mejorar el rendimiento y la experiencia del usuario en aplicaciones web. La elección adecuada de formatos como WebP y AVIF, la implementación de imágenes responsivas, la carga diferida, el uso de hojas de sprites, servicios de imágenes adaptables, la eliminación de metadatos, la preferencia por SVG para íconos y logotipos, la especificación de dimensiones y la aplicación de técnicas como Blur son estrategias efectivas para reducir el tamaño de archivos, acelerar los tiempos de carga y ofrecer una experiencia de usuario mejorada en diversas plataformas y dispositivos.
