L'optimisation des images est, selon Lighthouse, l'un des problèmes les plus courants de vitesse et de performances médiocres des sites Web.

Il est possible que des images non optimisées ralentissent la vitesse de chargement de votre page de plus de 9 secondes, voire plus dans certains cas.

Les pages lentes entraînent un taux de rebond plus élevé et un positionnement SERP inférieur, ce qui en retour signifie moins de trafic et moins de clients payants.

Que comprend l'optimisation d'image ?

L'optimisation de toutes les images de votre site Web est un travail très complexe, qui nécessite une expertise et plusieurs heures pour le faire correctement.

Les plugins peuvent vous faire gagner du temps, mais ils peuvent également casser l'ensemble de la structure de votre site Web et supprimer définitivement certains de vos médias s'ils ne sont pas gérés correctement.

Pour comprendre pourquoi nous considérons qu'il s'agit d'un travail complexe, voici une liste de contrôle en 20 points de ce que Cloudimage considère comme essentiel pour une bonne optimisation des images :

1. Incorporer la livraison CDN
2. Optimiser le TTFB
3. Utiliser la vue produit à 360 degrés
4. Assurez-vous que vos images sont réactives
5. Redimensionner correctement les images
6. Utilisez le bon format d'image
7. Compresser les images
8. Optimiser les attributs alt
9. Légendez clairement les images
10. Soignez les angles de vos produits
11. Savoir mélanger les couleurs
12. Créez des visuels fusionnés d'émotions
13. Utiliser les arrière-plans correspondants au produit
14. Optimisez vos vignettes
15. Utiliser le sitemap des images
16. Appliquer un sous-échantillonnage de chrominance
17. Images non critiques à chargement différé
18. Déployer le spriting d'image
19. Commencer à mettre en cache les éléments d'image
20. Précharger les éléments d'image critiques

D'un point de vue technique, les points les plus importants, de la liste ci-dessus, sont le redimensionnement, l'optimisation du format, le chargement différé, la compression d'images, la réactivité et la livraison CDN.

Si vous avez, disons, 11 000 images sur votre site Web.

Combien de temps faudra-t-il pour finir de les optimiser ?

Imaginez maintenant pouvoir le faire automatiquement !

C'est ce que fait Cloudimage.

Vous pouvez télécharger en bloc toutes les images via notre logiciel et elles seront automatiquement encaissées et téléchargées sur le cloud.

Vient ensuite l'optimisation.

Redimensionnement d'image

Les serveurs de redimensionnement de Cloudimage, situés dans trois centres de données à travers le monde (Canada, France et Singapour) téléchargeront votre image originale à partir de origin_image_url, la transformeront en fonction des paramètres d'opération et de filtrage, et enfin, l'afficheront sur votre site Web ou votre application mobile via une fusée - CDN rapide.

Un exemple avec une image originale hébergée sur votre serveur Web, votre compartiment Amazon S3 ou tout autre stockage accessible via HTTP.

Lorsque vous spécifiez à la fois la largeur et la hauteur, les proportions de l'image d'origine peuvent être ignorées ou conservées. En outre, vous pouvez choisir d'ajouter un rembourrage à l'image. Cloudimage propose les modes de redimensionnement suivants :

Recadrer

Conserve les proportions de l'image en coupant l'image pour s'adapter à la largeur et à la hauteur définies.

Ajuster

Redimensionne l'image en gardant les proportions en ajoutant un rembourrage pour satisfaire les dimensions souhaitées.

Bondir

Essaie de redimensionner l'image tout en gardant les proportions. Semblable à l'ajustement mais sans rembourrage.

Couverture

Redimensionne l'image à la largeur et à la hauteur données en ignorant les proportions de l'image d'origine.

Tourner

Fait pivoter l'image selon un angle spécifié, dans le sens antihoraire

Garniture

Supprime un cadre monochrome autour de l'image.

Compression d'images

Vous pouvez modifier la compression (format de sortie et qualité) de votre image en utilisant des filtres de compression.

Vous pouvez utiliser les filtres de compression parallèlement aux opérations de redimensionnement et aux filtres d'image.

Par défaut, Cloudimage fournit les images en tant que WebP. Si le format n'est pas pris en charge par le navigateur client, il revient au format JPEG ou PNG.

Optipress - Compression d'images basée sur l'apprentissage automatique

Le principal défi de la compression JPEG est de trouver le facteur de compression le plus optimal pour chaque image différente.

Différentes images compressées avec les mêmes paramètres de compression peuvent entraîner une qualité perçue différente.

De plus, la même image dans différentes tailles peut nécessiter différentes stratégies de compression pour obtenir un gain de taille maximal sans perte de qualité visible.

Pour surmonter cela, nous avons développé l'algorithme de compression Optipress JPEG.

Optipress trouve la meilleure approche de compression JPG en analysant les caractéristiques spécifiques de l'image et les paramètres de compression actuels.

Un modèle Machine Learning détermine la meilleure stratégie de compression pour cette image.

La qualité est ensuite évaluée sur la base d'un modèle de simulation du système visuel humain pour obtenir une compression optimale sans détérioration de la qualité perceptive.

Préréglages de transformation

Si vous souhaitez appliquer les mêmes transformations sur plusieurs images, vous pouvez définir des préréglages et appliquer des transformations uniquement en utilisant le nom du préréglage (X).

p=X

Toute transformation de redimensionnement ou filtre d'image peut être inclus dans un préréglage, ainsi que des filigranes et des paramètres de compression d'image.

Cela permet le processus d'optimisation en masse qui permet d'économiser plus de 50 % du temps d'optimisation d'image et peut être effectué facilement par toute personne impliquée.

Des images réactives simplifiées

Les images réactives adaptent la taille de l'image en fonction de la taille de l'écran de l'utilisateur final, permettant ainsi à votre site Web ou à votre application mobile de se charger plus rapidement sur différentes tailles d'écran.

L'équipe Cloudimage a développé un plugin JS pour tout automatiser pour vous.

La bibliothèque Cloudimage JS adaptera automatiquement toutes vos URL et offre une conception réactive intégrée, un chargement différé et bien d'autres fonctionnalités pour rendre votre site Web réactif, rapide et ajouter de beaux effets de chargement à vos images.

Avec le Lazy Loading et le cache activé, vous pouvez être certain que le temps de chargement de votre site Web s'améliorera d'au moins 40 %. Ajoutez CDN à cela et le pourcentage monte même à 60%.

Réseau de diffusion de contenu

Cloudimage s'appuie sur les réseaux de diffusion de contenu pour accélérer la diffusion de vos images dans le monde entier. Nous travaillons avec plusieurs fournisseurs de CDN pour optimiser la livraison de vos images et fournir une fiabilité exceptionnelle.

En plus d'accélérer vos images, le CDN fournit une protection DDoS (Distributed Denial of Service), qui agira comme un bouclier pour vos serveurs et évitera tout temps d'arrêt.

Les CDN mettent généralement en cache les images aussi longtemps que les images sont demandées par les utilisateurs finaux.

Mise en œuvre en quelques minutes

Ce qui rend Cloudimage unique, c'est que ses services peuvent être mis en œuvre très rapidement.

Si votre site Web connaît des pics de trafic fous, vous pouvez toujours contacter cloudimage, optimiser vos images et être sûr que ces pics seront absorbés instantanément.

Cela vous laisse avec des performances sans faille et une vitesse de chargement de page rapide sur divers appareils.

De plus, la mise en place est très simple et rend le processus de collaboration entre les équipes (équipes en charge du site de la production du contenu à la mise en ligne et au suivi) simple et efficace.

Ceci est particulièrement important lorsque la plupart d'entre nous sont obligés d'utiliser nos bureaux à domicile au cours de la prochaine période.
Pour plus d'informations sur le fonctionnement des services Cloudimage, rendez-vous sur cloudimage.io