Carga adaptativa de imágenes
Nuevo reportaje sobre Tilda
Hemos implantado una tecnología de procesamiento de imágenes que las adapta al tamaño del contenedor de diseño y las convierte a un formato de última generación: WebP.
La carga adaptativa de imágenes está activa por defecto en todos los sitios web de Tilda, no es necesario hacer nada para activarla. Hemos probado esta tecnología durante varios meses y estamos encantados de presentártela.
Echemos un vistazo a todas las tecnologías utilizadas para optimizar la carga de imágenes en los sitios web de Tilda:
Carga perezosa
Lazy Load lleva mucho tiempo activo en Tilda. Las imágenes se cargan gradualmente a medida que el espectador se desplaza por la página, no todas a la vez.
La imagen está completamente cargada porque está en la pantalla
La carga comienza cuando la imagen se acerca 700 px a la pantalla
La imagen aún no ha comenzado a cargarse
1. La imagen está completamente cargada porque está en la pantalla
2. La carga comienza una vez que la imagen se acerca a la pantalla 700 px
3. La imagen aún no ha comenzado a cargarse
CDN
CDN, o Content Delivery Network, es una red de servidores desplegados por todo el mundo. Elige el servidor más cercano a la ubicación del visitante y ayuda a entregar las imágenes más rápidamente. Por ejemplo, si un visitante se encuentra en Berlín, recibirá una imagen directamente de Alemania, no de Estados Unidos.
NUEVO
Compatibilidad con WebP
Tilda convierte automáticamente todas las imágenes de un sitio web a WebP. Este formato de última generación permite una compresión que reduce el tamaño de la imagen hasta un 35% en comparación con JPEG sin pérdida de calidad. No necesitas subir imágenes a tu sitio web en formato WebP, Tilda las convertirá por ti.
JPEG - 1680х1120px, 166 Kb
WebP - 1680х1120px, 78,6 Kb
8,9 Mb
2,8 Mb
Comparamos la diferencia de tamaño de las imágenes antes y después de la optimización utilizando esta plantilla. El tamaño total de las imágenes sin Carga Adaptativa de Imágenes es de 8.9 Mb. El tamaño total de las imágenes después de activar Adaptive Image Loading es de 2.8 Mb
El tamaño total de las imágenes se reduce 3 veces tras la optimización
La mayoría de los navegadores modernos como Chrome, Opera, Firefox y otros soportan WebP. Mientras se carga el sitio web, el script comprueba si el navegador admite el formato y, en caso afirmativo, solicita imágenes WebP al servidor. Si no es compatible, entregará las imágenes originales tal y como se subieron, en JPEG o PNG. La conversión a AVIF, otro nuevo formato de imagen que ofrece una reducción aún mayor del tamaño de los archivos, está en proyecto.
NUEVO
Redimensionamiento adaptativo de imágenes
Esta tecnología detecta las dimensiones del navegador y del contenedor de diseño y, a continuación, solicita imágenes optimizadas al servidor.
Imagine que ha cargado una foto de 1680 px de ancho en un bloque con varias imágenes. El tamaño de cada contenedor de imágenes es de 450 x 300 px. Por lo tanto, un visitante no recibirá una foto original, sino una escalada según las dimensiones del contenedor.
Imagine que ha cargado una foto de 1680 px de ancho en un bloque con varias imágenes. El tamaño de cada contenedor de imágenes es de 450 x 300 px. Por lo tanto, un visitante no recibirá una foto original, sino una escalada según las dimensiones del contenedor.
JPEG - 1680x1119px, 252 Kb
WebP- 450x300px, 23.5 Kb
Supongamos que un visitante accede a un sitio web desde un teléfono. Para cargar la portada de un sitio web en este dispositivo, el script solicitará una imagen recortada a la resolución correcta adaptada a la pantalla.
JPEG -1680x1120px, 372 Kb
WebP - 560x1120px, 103 Kb
El sistema inteligente analiza constantemente el tráfico de sitios web en Tilda. El script prepara de antemano imágenes optimizadas para los dispositivos y navegadores más utilizados. Este método es más flexible que redimensionar sobre la marcha: a veces es más rápido descargar una imagen original que redimensionar y descargar una optimizada.
NUEVO
Pantallas Retina y conexión a Internet lenta
Si un visitante utiliza una pantalla con mayor densidad de píxeles, el script lo reconocerá y solicitará al servidor una imagen de alta resolución. De este modo, las imágenes aparecerán nítidas en los dispositivos Retina.
Aunque, en caso de que la conexión sea lenta (si un visitante navega desde el campo, por ejemplo), el sistema solicitará una imagen más pequeña. Esto evitará que la velocidad de carga de la página disminuya.
Aunque, en caso de que la conexión sea lenta (si un visitante navega desde el campo, por ejemplo), el sistema solicitará una imagen más pequeña. Esto evitará que la velocidad de carga de la página disminuya.
En algunos casos, es posible que la Carga Adaptativa de Imágenes no funcione. Esto puede deberse a varias razones:
1
Ha desactivado Lazy Load en la configuración de su sitio web.
2
Ha desactivado Lazy Load para un elemento en Zero Block.
3
Aún no se ha preparado una versión optimizada de una imagen. Esto ocurre si acabas de subir una nueva imagen a tu sitio web o si accedes desde un dispositivo o un navegador por primera vez.
4
Su navegador no soporta WebP. Encuentra la lista de navegadores que soportan el formato aquí.
5
La diferencia entre el tamaño original de la imagen y su versión optimizada es insignificante; en este caso, el sistema no comprimirá ni recortará la imagen.
La carga adaptativa de imágenes es una de las tecnologías de optimización más importantes que hemos implementado en Tilda. Seguimos trabajando duro para acelerar los sitios web creados en la plataforma. Permanece atento a más actualizaciones en el blog de Tilda, en tu cuenta personal y en las redes sociales.
Cree sitios web rápidos y fáciles de usar en Tilda
No se pierda nuestras últimas noticias, ¡síganos en las redes sociales!
