Pourquoi le traitement d'image à la volée bat le traitement manuel et backend

Les images donnent vie aux pages Web et aux applications mobiles. Un traitement d'image efficace est essentiel pour obtenir l'impact souhaité et obtenir des performances Web optimales. Cependant, toutes les techniques de traitement d'images ne sont pas faciles, fiables ou effectuées en temps réel.

Dans cet article de blog, nous décrirons brièvement les trois types de traitement d'image : traitement d'image manuel, backend et à la volée. Nous vous montrerons ensuite pourquoi le traitement d'image à la volée donne des résultats supérieurs.

Traitement manuel des images : la solution originale pour des images réactives

Pour répondre aux attentes des utilisateurs en matière de pages Web plus réactives, de nombreux concepteurs et développeurs créent manuellement plusieurs versions des mêmes images, adaptées à différentes tailles d'écran, résolutions d'appareils et mises en page.

Cette approche a beaucoup de problèmes.

• C'est à forte intensité de main-d'œuvre.
• Il est sujet à l'erreur humaine, d'autant plus que le volume de travail augmente.
• Il n'y a pas assez de versions pour répondre à la plupart des combinaisons appareil/navigateur les plus récentes ou les moins utilisées.
• Chaque fois que vous souhaitez modifier une image, vous devez modifier toutes les variantes.
• Cela augmente vos coûts de stockage.

L'essor du traitement d'images backend

Avec le traitement d'image backend, le logiciel génère automatiquement quelques versions de l'image d'origine pour répondre à une gamme d'appareils et de navigateurs. Le logiciel de traitement d'image backend stocke toutes les images rendues localement ou dans le cloud, pour une utilisation future. Cette méthode permet d'économiser beaucoup de temps de conception et de développement Web et élimine de nombreuses erreurs trouvées dans le processus manuel.

Le traitement backend est souvent effectué à l'aide d'un logiciel créé en interne, en tant que solution unique. Les outils prêts à l'emploi comme ImageMagick et Thumbor sont également des options populaires.

Là où le traitement d'image backend est insuffisant

Si vous passez au traitement d'image principal, vous rencontrerez toujours les mêmes problèmes que ceux rencontrés avec le traitement d'image manuel. Vous devez toujours stocker toutes les versions d'image, ce qui coûte de l'argent. Pour un grand site avec beaucoup d'images et pour les sites avec du contenu généré par les utilisateurs, les coûts sont conséquents.

Cela signifie que vous n'avez généralement pas la meilleure image, à la plus petite taille de fichier, pour bon nombre de vos utilisateurs. Ces fichiers sous-optimaux prennent également plus de temps à télécharger, ce qui nuit encore plus à l'expérience utilisateur.

Voici un résumé des problèmes liés au traitement des images backend :

• Pas optimisé pour chaque environnement. Le traitement backend ne génère pas la meilleure image compressée de manière optimale pour tous les navigateurs et appareils.
• Mauvaise prise en charge du contenu généré par l'utilisateur. Bien que le traitement backend puisse recadrer et redimensionner des images d'origine standardisées, il ne dispose pas d'une technologie de transformation sophistiquée pour gérer des images de tailles, de rapports d'aspect et de niveaux de qualité différents.
• Frais de stockage. Vous avez de nombreuses copies d'images à stocker et à conserver. Les nouveaux appareils et les nouveaux formats d'image, tels que WebP et AVIF, vous obligent à stocker un nombre toujours croissant de copies par image, ce qui augmente vos coûts.
• Coûts de la bande passante. Avec le traitement backend, vous générez un ensemble relativement petit d'options par image, ce qui signifie que vous enverrez souvent une image plus grande ou une image moins compressée que nécessaire.
• Temps de chargement des pages lent et mauvaise expérience utilisateur. Les images compressées de manière sous-optimale prennent plus de temps à télécharger, ce qui nuit à la perception des utilisateurs et réduit les conversions.

Traitement d'image à la volée et ses avantages

Le traitement d'image à la volée est une technologie plus récente et plus avancée qui remplace progressivement le traitement d'image principal.

Pour traiter les images à la volée, le logiciel restitue la meilleure version d'image en temps réel, lorsque l'utilisateur en a besoin, au lieu de générer un ensemble de rendus au préalable. Une fois qu'une image est rendue, elle est stockée dans le cache plutôt que dans le stockage d'origine.

Chaque utilisateur obtient l'image la plus attrayante, dans la plus petite taille de fichier et avec le temps de chargement le plus rapide possible :

• L'image optimale est servie à chaque fois. Il existe des possibilités de rendu presque infinies, mais chaque combinaison d'appareil et de navigateur obtient exactement la bonne image.
• Économies de stockage importantes. Comme les images rendues sont stockées dans le cache, et non à l'origine, il n'y a pas d'augmentation de vos coûts de stockage.
• Temps de chargement plus rapide. Avec des images compressées au niveau optimal, le temps de chargement des pages est beaucoup plus rapide.
• Livraison d'images à l'épreuve du temps. À mesure que de nouveaux formats d'image, de nouveaux appareils et de nouvelles technologies de traitement d'image émergent, le traitement à la volée répond, sans effort supplémentaire de votre part.

Le traitement d'image à la volée vous évite la majeure partie du travail et des dépenses et offre un résultat vraiment optimisé.

Ce tableau compare le traitement d'image manuel, le traitement d'image backend et le traitement d'image à la volée. Cependant, le tableau ne peut décrire pleinement à quel point la nouvelle technologie est plus facile et meilleure. Pour ceux qui ont lutté avec les approches plus anciennes, le traitement d'image à la volée semble un peu magique ; beaucoup moins de travail, beaucoup moins de coûts et une bien meilleure expérience pour l'utilisateur - tout cela produisant de meilleurs résultats commerciaux.

Comment réaliser un traitement d'image à la volée

Avec le traitement d'image à la volée, vous créez une image d'origine, puis définissez quelques règles. Vous pouvez soit spécifier les valeurs que vous souhaitez utiliser pour différents paramètres, soit laisser le logiciel optimiser l'image, la compression, etc. pour vous.

L'un des objectifs populaires des médias visuels est d'améliorer automatiquement les couleurs des images, en particulier avec les images générées par l'utilisateur. imgix offre un ensemble complet d' options d'amélioration des couleurs .

Un autre objectif commun atteint par le traitement d'image à la volée est la génération automatique de srcsets , code HTML qui offre au navigateur plusieurs images différentes parmi lesquelles choisir. Vous pouvez utiliser la génération automatique de srcset pour tenir compte des différentes résolutions de périphérique. Vous pouvez voir une démonstration de la façon dont cela fonctionne dans notre nouvelle vidéo sur ce sujet et des sujets connexes.

Conclusion

Avec ses nombreux avantages en termes de coût, de facilité d'utilisation et d'expérience de l'utilisateur final, le traitement d'image à la volée est une option supérieure au traitement backend pour les sites Web à forte intensité d'images et à fort trafic.

imgix est le leader du traitement d'images à la volée, offrant des transformations robustes, un déploiement simple et une livraison rapide via un CDN d'images global. Si vous avez des questions concernant l'optimisation d'image ou imgix, contactez-nous à [email protected] ou créez un compte gratuit .