Share
Lors du développement ou de la mise à jour d'un site Web, certains de vos objectifs principaux devraient être de fournir une expérience utilisateur optimale et d'améliorer les conversions de sites Web, car ces deux aspects sont essentiels pour générer des revenus et améliorer les résultats de votre entreprise. Mais un problème que vous pourriez découvrir est que, bien que votre utilisation croissante d’images permette de créer un design plus attrayant, elle pourrait également affecter négativement les performances de votre site Web..
Aujourd'hui, les images représentent plus de 60% du contenu téléchargé sur une page Web. L'optimisation des images peut donc améliorer considérablement les performances. Cependant, l'optimisation de l'image est à la fois un art et une science, nécessitant une évaluation minutieuse de divers paramètres et un équilibre délicat entre contenu, format, qualité et dimensions..
Que votre application Web prenne en charge les images téléchargées par l'utilisateur, que vous livriez des images statiques ou que vous affichiez des images de profil provenant de réseaux sociaux, vous devrez probablement les manipuler pour les adapter au graphisme de votre site. Dans ce didacticiel, nous allons explorer les fonctionnalités offertes par la solution complète de gestion d’images et de vidéos basée sur le cloud de Cloudinary. Vous verrez comment cela peut vous aider à optimiser les images et à améliorer les performances de votre site Web..
Les formats d'image peuvent avoir un impact significatif sur les temps de chargement. Mais déterminer manuellement le format et les paramètres d'encodeur optimaux pour le contenu de chaque image peut être complexe et inefficace.
Cloudinary détermine et diffuse de manière dynamique chaque image dans le format le plus efficace, en fonction du contenu de l'image et du navigateur. Les images peuvent être téléchargées sur Cloudinary dans différents formats et facilement converties en d'autres formats. Par exemple, il peut automatiquement livrer des images au format WebP à Chrome ou JPEG-XR à Internet Explorer. Dans certains cas, PNG peut être sélectionné lorsque vous devez conserver la transparence..
Il existe de nombreuses raisons pour lesquelles vous souhaitez modifier le format de l'image fournie:
Pour livrer des images dans un format différent, spécifiez simplement le nouveau format comme extension de fichier de l'URL de livraison. Lorsque vous utilisez des kits de développement logiciel Cloudinary, vous pouvez spécifier le nouveau format en tant qu’extension du nom de la ressource ou utiliser le paramètre format..
Exemple:
Voir la démo.
Ajuster automatiquement la qualité de compression
Un réglage précis de la qualité de la compression et des paramètres d’encodage peut réduire considérablement la taille des fichiers sans dégradation notable de la qualité visuelle. Cependant, trouver les bons réglages pour chaque image est plus compliqué qu'il n'y paraît.
Cloudinary automatise la taille du fichier par rapport à la qualité. Les algorithmes intelligents d'encodage et de qualité de Cloudinary analysent chaque image pour trouver l'équilibre optimal et produisent une image perceptuellement fine tout en minimisant la taille du fichier. Analyser chaque image individuellement pour trouver le niveau de compression optimal et les paramètres de codage de l’image permettent un réglage précis du niveau de compression, complété par un réglage précis des paramètres de codage, et peut réduire considérablement la taille du fichier sans dégradation notable pour l’œil humain..
Exemple:
 |  |
Voir la démo.
Vous pouvez voir la transformation de l'image ici.
La diffusion d'images dans des dimensions supérieures à la taille d'affichage requise utilise une bande passante inutile et ralentit le chargement de la page. Mais créer manuellement plusieurs versions de chaque image pour s’adapter à différentes résolutions d’écran peut nécessiter beaucoup de ressources. Cloudinary vous permet de redimensionner de manière dynamique la résolution de l'image pour obtenir la version optimale correspondant à la résolution de l'appareil et aux dimensions de la fenêtre d'affichage de chaque utilisateur, sans générer de pixels inutiles..
De plus, les images nécessitent souvent un recadrage afin de s'adapter aux dispositions réactives et aux différentes dimensions du périphérique. L'algorithme de recadrage Cloudinary tenant compte du contenu utilise une combinaison d'heuristiques pour détecter automatiquement la région d'intérêt dans chaque image, puis la recadrer à la volée..
Ces capacités de recadrage intelligentes garantissent que la focalisation de chaque image est incluse dans l'image dérivée résultante, non seulement pour les photos avec des visages, mais pour tout type de contenu. Chaque image est analysée individuellement pour trouver la région optimale sur laquelle se concentrer..
Image originale:
Exemple de différents modes de recadrage:
Voir la démo.
Pour voir l'image via son URL de transformation, affichez-la ici..
Cloudinary vous permet de transformer facilement vos images à la volée dans n'importe quel format, style et dimension, et optimise également la taille de fichier minimale des images pour une expérience utilisateur améliorée et une économie de bande passante..
Au cœur de la solution Cloudinary se trouve la possibilité de diffuser des images à l'aide d'URL dynamiques via un réseau de diffusion de contenu (CDN) rapide et mondial. L'URL contient l'ID public de l'image demandée, ainsi que tous les paramètres de transformation facultatifs. L'ID public est l'identifiant unique de l'image et est soit spécifié lors du téléchargement de l'image sur votre compte Cloudinary, soit automatiquement attribué par Cloudinary..
Toutes les instructions de transformation (manipulation) peuvent être ajoutées avant l'ID public dans l'URL de livraison. Lors du premier accès à l'URL, l'image dérivée est créée à la volée et livrée à votre utilisateur. L'image dérivée est également mise en cache sur le CDN et est immédiatement disponible pour tous les utilisateurs suivants qui demandent la même image..
Ces astuces ne sont que quelques-unes des manières dont Cloudinary peut vous aider à optimiser les images de votre site Web afin d'améliorer les performances et l'expérience de l'utilisateur final..
Le site Web Cloudinary fournit une documentation détaillée sur le fonctionnement de ces fonctionnalités. Vous pouvez également trouver des articles de blog qui expliquent les 10 principales erreurs que vous pourriez avoir commises lors du traitement des images de sites Web et comment les résoudre, ainsi que la façon d'analyser les images de sites Web pour améliorer la vitesse et réduire les coûts de bande passante..
Accentsconagua
