Efficacité de services tels que Cloudinary, Imgix
Je veux construire un site Web avec beaucoup d’images et donc des manipulations d’images comme Amazon, eBay, Flipkart, etc. On m'a suggéré d'utiliser des services tels que Cloudinary, Imgix, etc. pour redimensionner mes images, car il serait préférable de stocker une version de chaque image bien que j'aurais besoin de plusieurs versions de tailles différentes. J'aimerais savoir à quel point ces services sont efficaces. Y at-il des problèmes? J'aimerais que mon site soit très rapide et réactif. J'ai entendu des préoccupations telles que: «Prenez en compte le fait que vous doublez au moins la latence de transfert impliquée, ce qui prendra souvent le temps nécessaire pour effectuer une opération d'image.
Normal: utilisateur_fin-> votre_utilisateur-> utilisateur_fin
Via ces services: utilisateur_fin-> votre_utilisateur-> vous-> votre_utilisateur-> utilisateur_fin "
(Avertissement: je gère les relations avec les développeurs chez imgix et je répondrai à ce message dans la mesure où il s'applique à notre pile)
Vous avez absolument raison de dire que pour une image totalement non mise en cache, il y a plus de "houblons" impliqués pour servir une image. Pour le premier utilisateur qui visualise une image, cela peut entraîner une latence légèrement accrue. Après cela, cependant, l’image est mise en cache à la fois par notre cluster de rendu et par le CDN global, ce qui accélère considérablement les demandes ultérieures d’images basées sur l’original. Dans tous les cas, les économies d’octets générées par la fourniture au navigateur d’images de taille correcte dépassent presque toujours toute latence supplémentaire liée aux demandes initiales d’image.
Voici un schéma simple qui montre le flux lorsqu'une image n'a pas encore été mise en cache:
┌─────────────────┐ 4. Origin responds
│ Your Origin │ with full-size
│ (S3/web folder) │ `dogs.png` image.
└─────────────────┘
▲ │
│ │
│ │
│ ▼
3. Image is not ┌─────────────────┐ 5. imgix caches the
cached at imgix, send │ imgix │ full-size image, then
request to Origin for │ │ resizes it to 300px
`dogs.png` └─────────────────┘ wide and caches that
▲ │ derivative.
│ │
│ ▼
2. Image is not ┌─────────────────┐ 6. The imgix CDN
cached at CDN, │ imgix CDN (Edge │ caches the 300px wide
forward to imgix │nodes worldwide) │ variant and serves it
rendering cluster. └─────────────────┘ to the browser.
▲ │
│ │
│ │
│ ▼
1. Browser requests ┌─────────────────┐ 7. The browser
`dogs.png?w=300` │ User's Browser │ receives and renders
│ │ 300px wide `dogs.png`.
└─────────────────┘
Une fois l'image mise en cache (après qu'un seul utilisateur le demande), la boucle devient beaucoup plus étroite:
2. The imgix CDN has ┌─────────────────┐
this variant cached, │ imgix CDN (Edge │
and serves it to the │nodes worldwide) │
browser. └─────────────────┘
▲ │
│ │
│ │
│ ▼
1. Browser requests ┌─────────────────┐ 3. The browser
`dogs.png?w=300` │ User's Browser │ receives and renders
│ │ 300px wide `dogs.png`.
└─────────────────┘
Après la mise en cache d'une image d'origine sur notre cluster de rendu, la génération de dérivés est également beaucoup plus rapide (dans ce cas, une version large de 600 pixels), puisqu'ils ne nécessitent pas de déplacement supplémentaire sur votre serveur Origin:
3. Full-size image is ┌─────────────────┐ 4. imgix resizes the
already cached at │ imgix │ cached full-size image
imgix, no Origin │ │ to 600px wide and
request needed. └─────────────────┘ caches that
▲ │ derivative.
│ │
│ ▼
2. Image is not ┌─────────────────┐ 5. The imgix CDN
cached at CDN, │ imgix CDN (Edge │ caches the 600px wide
forward to imgix │nodes worldwide) │ variant and serves it
rendering cluster. └─────────────────┘ to the browser.
▲ │
│ │
│ │
│ ▼
1. Browser requests ┌─────────────────┐ 6. The browser
`dogs.png?w=600` │ User's Browser │ receives and renders
│ │ 600px wide `dogs.png`.
└─────────────────┘
J'utilise imgix sur 1 an. Je pense que l'hébergement d'images par un serveur d'images professionnel est bien meilleur que par vos serveurs.
Haute performance
1- Comme Paul Straw l'a dit: Imgix a une stratégie de cache appropriée. Cela n'ajoute pas la latence pour charger l'image. Il déduit même la latence car il ne récupère pas l'image principale à chaque chargement de la page. Il récupère l'image du cache.
2- Cloudinary et imgix utilisent un CDN large et rapide. Ainsi, l'utilisateur qui doit télécharger une image peut obtenir le fichier à partir de CDN Edge, qui est plus proche de son emplacement. Par conséquent, la latence sera supprimée et le téléchargement sera plus rapide.
3- Le meilleur moyen de s’assurer que les images n’affectent pas le temps de chargement de votre page est de fournir les dimensions correctes pour un appareil donné (ou aussi près que possible). Même de petites différences entre les tailles réelles et souhaitées d'une image peuvent considérablement augmenter la taille du fichier. La caractéristique la plus élémentaire des services d'hébergement d'images est la possibilité de redimensionner les images à la volée pour les adapter à tous les périphériques.
En plus de la haute performance de ces services, j’ai vu d’autres avantages dont je mentionne quelques-uns ici:
Images sensibles
De nos jours, de nombreux propriétaires de sites Web, responsables des ventes et du marketing et… se soucient de nombreux aspects du marketing. Ils choisissent les images avec soin afin de convertir un utilisateur en acheteur ou d'atteindre un certain objectif sur leur site web. Redimensionner une image pour un écran différent est peut-être suffisant pour un design réactif, mais pas pour augmenter le taux de conversion de votre site Web. Parfois, vous devez recadrer l'image pour la redimensionner. Avec les services d’hébergement d’images, vous pouvez choisir exactement le lieu de recadrage, quelle partie de l’image est essentielle au maintien du marketing et quelle partie peut être recadrée. vous pouvez avoir tous ces contrôles à la volée avec ces services sans utiliser Photoshop et préparer plusieurs images hors connexion.
Support de la rétine
La plupart des images peuvent être bien vues sur des écrans normaux, mais lorsque vous les voyez sur des écrans haute densité tels que Apple Retina ou certains appareils Android, ils ne sont pas bons du tout. Le rapport de pixels du périphérique permet de convertir facilement des pixels indépendants du périphérique en pixels. Cela permet d'afficher des images avec la densité de pixels correcte sur divers appareils, tels que les écrans Apple Retina et Android. Dans imgix, vous pouvez choisir de charger des images avec un DPR plus élevé si l'écran peut prendre en charge des images haute densité. vous pouvez le faire avec les tags srcset. Lire la suite ici
Manipulation d'image à la volée
Tout ce que vous voulez faire sur une photo peut être fait à la volée. Vous n'avez pas besoin d'utiliser Photoshop pour manipuler de petites images. Cela réduit considérablement la vitesse de conception.
Meilleur classement SEO
La taille de l'image contribue grandement à la vitesse de chargement des pages, qui est à son tour une mesure clé pour déterminer le classement des résultats de recherche de vos pages. Réduire la taille de l’image peut considérablement améliorer votre classement, en particulier si vous pouvez obtenir le chargement complet de la page en deçà du seuil où de nombreux utilisateurs commencent à perdre leur impatience.
[Divulgation, je suis le CTO de la société qui propose ImageEngine]
Mention de notre propre ImageEngine est en ordre ici. ImageEngine se situe exactement dans le même espace que les autres solutions mentionnées par l'OP, avec quelques avantages supplémentaires: son CDN a été construit à partir de la base, avec pour objectif l'optimisation mobile. Outre les navigateurs de bureau, les serveurs Edge d'ImageEngine peuvent détecter avec précision des fonctionnalités telles que la taille de l'écran, la résolution et les codecs d'images pris en charge, et optimiser les images en conséquence. Cela se produit grâce à WURFL, la même solution Détection de périphérique adoptée par Facebook et Google, et permet d’optimiser davantage (jusqu’à 80% d’économie de bande passante) et de réduire les factures CDN. Nous appelons ce concept "Smart Bytes".
Une autre grande différence est la facilité d'intégration. ImageEngine n'exige pas que les organisations téléchargent des images où que ce soit. Cela convient parfaitement aux entreprises qui doivent gérer des images héritées. Alors que ImageEngine autorise les directives (via les paramètres d'URL) à spécifier comment une image donnée doit être optimisée, il prend également en charge le "mode automatique", c'est-à-dire. ImageEngine récupère les images du site Web Origin (il n'est pas nécessaire d'héberger des images sur le serveur de quelqu'un d'autre) et optimise automatiquement l'image au format optimal, tel que déterminé par le composant Détection de périphérique et les conseils du client. Par exemple, les appareils et les navigateurs prenant en charge .webp obtiendront .webp. Les clients activent simplement ImageEngine devant leur site existant et la magie opère sans qu'il soit besoin de peaufiner davantage. Les clients actuels (en particulier le commerce électronique) adorent cette fonctionnalité.
au travail, nous utilisons une combinaison de
- l'optimisation d'image de pipeline générique, par exemple les plugins Grunt
- amener les équipes de conception de clients à utiliser des applications pour l'optimisation d'image
- nous utilisons également Cloudinary sur beaucoup de nos sites.
La solution varie généralement en fonction des coûts et des budgets des clients, mais nous constatons que Cloudinary fonctionne moins cher, en particulier pour les clients qui ne souhaitent pas que leur équipe interne ou nous-mêmes consacrions du temps à l'optimisation de l'image et se concentrent uniquement sur les fonctionnalités.
En déchargeant les images et les vidéos sur cloudinary, cela nous libère du temps nécessaire pour nous concentrer sur l'amélioration du site, les tests AB et d'autres activités génératrices de revenus. La latence des transferts, qui ne semble pas poser de gros problèmes en raison de la mise en cache et des CDN, serait un petit prix à payer pour des heures/des jours libérés pour se concentrer sur la création de produits et le développement de l'entreprise.
Vous devriez déterminer ce que votre temps vaut et combien d’argent vous pourrez gagner si vous l’avez libéré pour faire d’autres choses. Quelles autres choses voudriez-vous essayer?
Pour que vos images se chargent rapidement, vous voulez que leur taille soit aussi petite que possible et que vous souhaitiez une bonne architecture de mise en cache et de diffusion.
Lorsque vous utilisez un service pour livrer vos images, celles-ci sont servies à l'aide d'un CDN, ce qui permet de résoudre le problème de la mise en cache et de la livraison.
Il existe plusieurs services CDN puissants comme Cloudinary ou Imagix. Chaque service a ses avantages et ses inconvénients, ce qui soulève plusieurs questions:
- Quel service CDN a la meilleure portée vers vos zones géographiques cibles?
- Existe-t-il des fonctionnalités CDN spécifiques dont votre site ou votre application a besoin, mais tous les services ne les traitent pas?
- Que se passe-t-il lorsque le service CDN que vous utilisez présente des pannes ou des ralentissements?
- Les pics de trafic affectent-ils tous les CDN de manière égale?
- Est-il possible d'optimiser davantage la diffusion en utilisant différents services CDN pour différentes zones géographiques, différentes heures de la journée ou d'autres variables de performance?
Les réponses à ces questions sont difficiles et en constante évolution. Dans une tentative d'optimisation de la diffusion à différents moments et dans différentes régions, Cloudinary active plusieurs CDN.
Une fois le processus de configuration initial terminé, les clients Cloudinary peuvent tirer parti de l’une des deux solutions d’optimisation multi-CDN :
Commutation dynamique multi-CDN: utilise les données en temps réel pour sélectionner automatiquement le service CDN le plus performant ou le plus approprié pour chaque demande d'utilisateur et chaque emplacement.
Sélection Smart CDN: des ingénieurs de support dédiés vous aident à déterminer le service CDN pris en charge qui convient le mieux à vos fonctionnalités requises et à votre public cible
En ce qui concerne le problème d'optimisation des images, Cloudinary prend en charge le redimensionnement des images en taille d'affichage, le réglage de la qualité des images, la sélection automatique du format de fichier en fonction de la détection du client, la conversion de format d'image, etc.
Disclaimer: Je travaille en tant qu'ingénieur logiciel chez Cloudinary.
Il ne fait aucun doute que vous ne chargez que des images de la taille dont vous avez besoin. Le plus gros bonus sera le temps de chargement. Nous savons tous que les utilisateurs n'aiment pas attendre que les pages se chargent. Ainsi, si vous disposez de plusieurs copies ou si vous compressez toutes vos images en fonction de la taille de l'écran, vous offrirez une meilleure expérience utilisateur. Google base également l’affichage de la recherche sur les temps de chargement, en fonction de la taille de l’image. Je suggère également d'utiliser un service qui offre un CDN pour les images afin que vous puissiez tirer parti de la mise en cache.