Chargement adaptatif des images
Nouveau dossier sur Tilda
Nous avons déployé la technologie de traitement d'images qui adapte les images à la taille du conteneur de mise en page et les convertit dans un format de nouvelle génération (WebP).
Le chargement adaptatif des images est actif par défaut sur tous les sites web de Tilda, il n'est pas nécessaire de faire quoi que ce soit pour l'activer. Nous avons testé cette technologie pendant plusieurs mois et nous sommes ravis de vous en parler.
Passons en revue toutes les technologies utilisées pour optimiser le chargement des images sur les sites web de Tilda :
Chargement paresseux
Lazy Load est actif sur Tilda depuis longtemps. Les images sont chargées progressivement au fur et à mesure que l'internaute fait défiler la page, et non pas en une seule fois.
L'image est entièrement chargée parce qu'elle est à l'écran
Le chargement commence lorsque l'image s'approche de l'écran de 700 px.
L'image n'a pas encore commencé à se charger
1. L'image est entièrement chargée parce qu'elle est à l'écran
2. Le chargement commence lorsque l'image s'approche de l'écran de 700 px.
3. Le chargement de l'image n'a pas encore commencé
CDN
Le CDN (Content Delivery Network) est un réseau de serveurs déployés dans le monde entier. Il sélectionne le serveur le plus proche de l'endroit où se trouve le visiteur et permet de diffuser les images plus rapidement. Par exemple, si un internaute se trouve à Berlin, il recevra une image directement d'Allemagne, et non des États-Unis.
NOUVEAU
Support WebP
Tilda convertit automatiquement toutes les images de sites web en WebP. Ce format de nouvelle génération permet une compression qui réduit la taille de l'image jusqu'à 35% par rapport à JPEG, sans perte de qualité. Vous n'avez pas besoin de télécharger des images au format WebP sur votre site web, Tilda se charge de les convertir pour vous.
JPEG - 1680х1120px, 166 Kb
WebP - 1680х1120px, 78.6 Kb
8.9 Mb
2.8 Mb
Nous avons comparé la différence de taille des images avant et après l'optimisation à l'aide de ce modèle. La taille totale des images sans Chargement adaptatif des images est de 8.9 Mb. La taille totale des images après l'activation du chargement adaptatif des images est de 2,8 Mo.
La taille totale des images est réduite de 3 fois après l'optimisation.
La plupart des navigateurs modernes tels que Chrome, Opera, Firefox et autres prennent en charge le format WebP. Pendant le chargement du site web, le script vérifie si le navigateur prend en charge le format et, le cas échéant, demande des images WebP au serveur. S'il n'est pas pris en charge, il fournit les images originales telles qu'elles ont été téléchargées, au format JPEG ou PNG. La conversion à AVIF, un autre nouveau format d'image offrant une réduction encore plus importante de la taille des fichiers, est en cours de préparation.
NOUVEAU
Redimensionnement adaptatif de l'image
Cette technologie détecte les dimensions du navigateur et du conteneur de mise en page, puis demande des images optimisées au serveur.
Imaginez que vous ayez téléchargé une photo de 1680 px de large dans un bloc contenant plusieurs images. La taille de chaque conteneur d'image est de 450 x 300 px. Par conséquent, le visiteur ne recevra pas une photo originale, mais une photo redimensionnée en fonction des dimensions du conteneur.
Imaginez que vous ayez téléchargé une photo de 1680 px de large dans un bloc contenant plusieurs images. La taille de chaque conteneur d'image est de 450 x 300 px. Par conséquent, le visiteur ne recevra pas une photo originale, mais une photo redimensionnée en fonction des dimensions du conteneur.
JPEG - 1680x1119px, 252 Kb
WebP- 450x300px, 23.5 Kb
Supposons qu'un visiteur accède à un site web à partir d'un téléphone. Pour charger une couverture de site web sur cet appareil, le script demandera une image recadrée à une résolution adaptée à l'écran.
JPEG -1680x1120px, 372 Kb
WebP - 560x1120px, 103 Kb
Le système intelligent analyse en permanence le trafic des sites web sur Tilda. Le script prépare à l'avance des images optimisées pour les appareils et les navigateurs les plus utilisés. Cette méthode est plus souple que le redimensionnement à la volée : il est parfois plus rapide de télécharger une image originale que de redimensionner et de télécharger une image optimisée.
NOUVEAU
Écrans Retina et connexion Internet lente
Si un visiteur utilise un écran avec une densité de pixels plus élevée, le script le reconnaîtra et demandera une image haute résolution au serveur. De cette manière, les images apparaîtront nettes sur les appareils Retina.
Toutefois, si la connexion est lente (si un visiteur navigue depuis la campagne, par exemple), le système demandera une image plus petite. Cela permet d'éviter un ralentissement de la vitesse de chargement de la page.
Toutefois, si la connexion est lente (si un visiteur navigue depuis la campagne, par exemple), le système demandera une image plus petite. Cela permet d'éviter un ralentissement de la vitesse de chargement de la page.
Dans certains cas, l'Adaptive Image Loading peut ne pas fonctionner. Il y a plusieurs raisons à cela :
1
Vous avez désactivé la fonction Lazy Load dans les paramètres de votre site web.
2
Vous avez désactivé Lazy Load pour un élément dans Zero Block.
3
Une version optimisée d'une image n'a pas encore été préparée. Cela se produit si vous venez de télécharger une nouvelle image sur votre site web ou si vous vous connectez pour la première fois à partir d'un appareil ou d'un navigateur.
5
La différence entre la taille de l'image originale et sa version optimisée est insignifiante ; dans ce cas, le système ne compresse ni ne recadre l'image.
L'Adaptive Image Loading est l'une des technologies d'optimisation les plus importantes que nous ayons mises en œuvre dans Tilda. Nous continuons à travailler dur pour accélérer les sites web créés sur la plateforme. Restez à l'écoute pour plus de mises à jour sur le blog de Tilda, votre compte personnel et les réseaux sociaux.
Créer des sites web rapides et conviviaux sur Tilda
Ne manquez pas nos dernières nouvelles, suivez-nous sur les médias sociaux !
