Reduce el tamaño de las imágenes de Squarespace en un 80 % con WebP
Esta publicación es una colaboración con BeyondSpace.studio
¿Se puede utilizar WebP con Squarespace? Squarespace no admite la subida de archivos WebP; los formatos oficialmente compatibles son JPG, PNG y GIF. Sin embargo, podemos hacerlo posible utilizando CDN de imágenes de terceros. Veamos cómo.
¿Qué es el formato de imagen WebP?
WebP es un formato de archivo de imagen desarrollado por Google que ofrece una compresión superior para las imágenes web. Los archivos WebP ocupan menos espacio que los JPEG y pueden mostrar fondos transparentes, al igual que los PNG. Además, WebP admite animaciones, de forma similar a los GIF.
Ventajas de utilizar WebP
Mejora del rendimiento del sitio web: Las imágenes WebP son más ligeras que las de formato JPEG y PNG, lo que se traduce en tiempos de carga más rápidos para las páginas que contienen imágenes WebP.
Ahorro de ancho de banda: WebP ayuda a ahorrar ancho de banda, lo que permite a los sitios web ofrecer a los usuarios una experiencia multimedia más envolvente.
Mejora del SEO: WebP contribuye a una mejor optimización para motores de búsqueda (SEO), tal y como recomiendan los Core Web Vitals de Google, que destacan la importancia de los formatos de imagen modernos como WebP.
Inconvenientes de WebP
Compatibilidad limitada: WebP está pensado principalmente para su uso en Internet, lo que lo hace menos práctico para ver imágenes sin conexión. Además, los navegadores más antiguos, como Edge 12-17 y Firefox 2-64, no son compatibles con WebP, lo que limita su compatibilidad (consulta la tabla completa de compatibilidad para obtener más detalles).
Sin carga progresiva: A diferencia del formato JPEG progresivo, WebP no admite la carga progresiva, lo que significa que tendrás que elegir entre ahorrar ancho de banda y mostrar la imagen rápidamente al cliente.
Echemos un vistazo al ejemplo, ¿eres capaz de encontrar la diferencia?
Ver imagen
JPG - 291 kB - 2500 x 1667
Ver imagen
JPG - 291 kB - 2500 x 1667
Ver imagen
WebP - Calidad: automática - 115 kB - 2500 x 1667
Este archivo webp es un 60 % más pequeño que su equivalente
¿Cómo publicar archivos en formato WebP en Squarespace?
El mecanismo de este enfoque consiste en utilizar CDN de terceros para almacenar en caché y servir las imágenes de Squarespace, lo que significa que no es necesario optimizar ni volver a subir manualmente los archivos de imagen. Además, se modifica el «Imageloader» de Squarespace para que cargue la versión en formato WebP de las imágenes.
En primer lugar, debes comprender cómo se muestran las imágenes de Squarespace al cliente: primero, se crean siete variantes de tus imágenes y se muestran en el navegador en función de determinadas condiciones para garantizar que se muestren las mejores imágenes; por ejemplo, es probable que un navegador en una pantalla grande reciba una variante de 2500 píxeles de ancho, mientras que una tableta recibirá una variante de 750 píxeles de ancho. Todo esto es posible gracias a ImageLoader de Squarespace.
ImageLoader espera que las imágenes de Squarespace incluyan los atributos src, data-src o srcset para poder cargarlas correctamente. Según hemos observado, srcset tiene mayor prioridad que data-src, lo que significa que, si una imagen tiene tanto data-src como srcset, Squarespace obtendrá primero la fuente de la imagen a través de srcset.
Así pues, si podemos modificar los atributos «srcset» y «data-src» de las imágenes, podremos, de alguna manera, obligar a Squarespace a cargar otras imágenes diferentes. Para poder ofrecer imágenes en formato WEBP desde Squarespace, necesitamos una transformación sobre la marcha que convierta y almacene en caché los recursos JPG y PNG, y los convierta a formatos de última generación como AVIF y WEBP; además, es necesario que los navegadores antiguos sigan recibiendo la versión original para garantizar la máxima compatibilidad.
He encontrado dos servicios que pueden cumplir este requisito, a saber:
Cloudinary
Para publicar imágenes de Squarespace, tienes que activar la opción «Fetch URL» para poder recuperar la imagen remota (desde la CDN de Squarespace).
El plan gratuito de Cloudinary te ofrece 25 unidades al mes. Estas unidades se pueden utilizar de tres formas diferentes:
Transformaciones de imágenes: puedes modificar u optimizar 25 000 imágenes al mes.
Almacenamiento: Puedes almacenar hasta 25 gigabytes (GB) de imágenes o vídeos.
Ancho de banda: Tus visitantes pueden ver hasta 25 GB de tus imágenes o vídeos al mes.
Estas actividades se contabilizarán dentro del total de 25 unidades. Para que te hagas una idea de lo que suponen 25 GB de ancho de banda en términos de visitas a la página web:
Si una página media de tu sitio web contiene aproximadamente 1 MB de imágenes, 25 GB permitirían unas 25 000 visitas al mes.
Suponiendo que un visitante medio consulte 3 páginas, esto equivale a unos 8.300 visitantes únicos al mes.
Los recursos recuperados cuentan para el límite de unidades de almacenamiento, y la caché se vacía cada 7 días.
ImageKit
Es compatible con el origen de las imágenes en el servidor web; podemos aprovechar esta función para servir imágenes directamente desde la CDN de Squarespace.
Lo que me gusta de Imagekit es que las imágenes alojadas en servidores remotos no cuentan para el espacio de almacenamiento (el plan gratuito ofrece 5 GB de almacenamiento), al igual que las transformaciones; lo único que hay que tener en cuenta es el límite mensual de ancho de banda, que es de 25 GB. La transformación de vídeos tiene un límite de 500 unidades al mes.
Supongamos que tienes 5.000 visitas con una media de 3 páginas vistas, lo que suma un total de 15.000 sesiones; si cada página contiene 5 imágenes con un tamaño medio de 250 kb, el ancho de banda mensual rondará los 18 GB.
En comparación con Cloudinary, Imagekit cuenta con un panel de análisis, que te permite consultar el ancho de banda exacto y otras estadísticas.
¿Estás listo para mejorar al máximo el rendimiento de las imágenes de tu sitio web de Squarespace?
Visita el blog de BeyondSpace para ver instrucciones paso a paso y fragmentos de código que te ayudarán a implementar esta solución WebP.
Pruebas
He probado los scripts con SEOSpace, que recomienda que las imágenes del sitio web tengan un tamaño inferior a 250 KB; si ya has subido un archivo grande, publicarlas en formato WebP puede reducir el tamaño del archivo al instante sin tener que pasar por el tedioso proceso de redimensionarlas y volver a subirlas.
He hecho otra prueba con Cloudinary WebSpeed Test y PageSpeed.
| Fuente de la imagen | URL de la página | Prueba de imágenes de Cloudinary | Prueba de PageSpeed |
|---|---|---|---|
| CDN de Squarespace (origen) | 📸 Ver imagen | 📝 Ver prueba | 📋 Ver prueba |
| CDN de Cloudinary | 📸 Ver imagen | 📝 Ver prueba | 📋 Ver prueba |
| ImageKit CDN | 📸 Ver imagen | 📝 Ver prueba | 📋 Ver prueba |
A continuación se muestran los resultados de nuestras pruebas de fuentes de imágenes utilizando diferentes CDN para estas páginas concretas en Cloudinary Image Test; otras pruebas pueden arrojar resultados distintos en cuanto al tamaño de los recursos:
JPEG original (CDN de Squarespace): El tamaño total del archivo es de 32 MB.
ImageKit CDN: El tamaño total del archivo se ha reducido considerablemente hasta los 4,8 MB.
CDN de Cloudinary: El tamaño total del archivo se reduce a 5,7 MB.
Número total de imágenes: 27
El uso de las CDN de ImageKit y Cloudinary reduce notablemente el tamaño total de los archivos en comparación con los archivos JPEG originales servidos desde la CDN de Squarespace. Esta reducción puede mejorar considerablemente los tiempos de carga de las páginas y su rendimiento.
Conclusión
El código personalizado de JavaScript anterior está configurado para ejecutarse en el DOMContentLoaded evento. Sin embargo, dado que la carga de imágenes en el navegador es una carrera, no resulta práctico anular todas las imágenes srcset atributos en las páginas. Como consecuencia, a veces las imágenes pueden seguir mostrándose en su formato original, especialmente por encima del pliegue imágenes. Por lo tanto, las imágenes situadas en la parte superior de la página, como los banners a pantalla completa o las imágenes de fondo, deberán optimizarse antes de subirlas.
Aviso legal: En las próximas semanas, publicaremos una solución completa que utilice Cloudflare para sustituir todas las imágenes src atributos antes la carga de la página.
Dado que hemos configurado el formato de entrega de estos servicios en «automático», el tipo de archivo de imagen lo determina el servidor. En casos excepcionales, esto podría dar lugar a que el servidor sirva el archivo JPG en lugar del WebP. Aunque puedes solicitar explícitamente la conversión a WebP, no es recomendable para garantizar la máxima compatibilidad.
Aún así, debes supervisar el uso del ancho de banda para comprobar si el plan gratuito se ajusta a tus necesidades.
Conclusión
Al explorar estos servicios para tu flujo de trabajo de imágenes en Squarespace, obtendrás una solución eficaz para publicar imágenes en formatos de última generación con optimizaciones automáticas y análisis detallados.
Si tu prioridad es la distribución de imágenes y la obtención de información detallada sobre su uso, ImageKit es la opción ideal.
Para funciones más avanzadas y transformaciones de vídeo, Cloudinary sigue siendo una alternativa muy válida.
Elige la opción que mejor se adapte a tus necesidades específicas para disfrutar de una experiencia web optimizada y atractiva.
