4 raisons d'utiliser le traitement d'image pour optimiser les médias du site Web –

Cet article sponsorisé a été créé par notre partenaire de contenu, KeyCDN . Merci de soutenir les partenaires qui rendent SitePoint possible.

L'optimisation d'image est un gros problème en ce qui concerne les performances du site Web . Vous vous demandez peut-être si vous couvrez toutes les bases en gardant simplement la taille du fichier sous contrôle. En fait, il y a beaucoup à considérer si vous voulez vraiment optimiser les images de votre site.

Heureusement, il existe des outils de traitement d'image et des réseaux de distribution de contenu (CDN) qui peuvent gérer toutes les complexités de l'optimisation d'image. En fin de compte, ces services peuvent vous faire économiser du temps et des ressources, tout en couvrant plusieurs aspects de l'optimisation.

Dans cet article, nous allons examiner l'impact que l'optimisation de l'image peut avoir sur les performances du site. Nous allons également passer en revue certaines approches standard du problème et explorer des options de traitement d'image plus avancées.

Pourquoi lésiner sur l'optimisation d'image peut être un tueur de performances

Si vous décidez de ne pas optimiser vos images, vous attachez essentiellement un poids très lourd à tous vos éléments multimédias. Tout ce poids supplémentaire peut faire glisser votre site vers le bas. Heureusement, l'optimisation de vos images élimine les données inutiles que vos images peuvent transporter.

Si vous n'êtes pas sûr de la performance actuelle de votre site Web, vous pouvez utiliser un outil en ligne pour obtenir un aperçu.

Une fois que vous avez une meilleure idée des éléments de votre site Web qui sont à la traîne ou qui vous entraînent, il existe un certain nombre de façons de gérer spécifiquement l'optimisation d'image, y compris:

• Choix des formats d'image appropriés . Il existe un certain nombre de formats d'images parmi lesquels choisir, et chacun a ses forces et ses faiblesses. En général, il est préférable de s'en tenir aux JPEG pour les images photographiques. En revanche, pour les éléments de conception graphique, les PNG sont généralement supérieurs aux GIF. De plus, de nouveaux formats d'image tels que WebP de Google ont des applications prometteuses, dont nous discuterons plus en détail plus tard.
• Maximiser le type de compression . En ce qui concerne la compression, l'objectif est d'obtenir chaque image à son plus petit «poids» sans perdre trop de qualité. Il existe deux types de compression qui peuvent le faire: «avec perte» et «sans perte» . Une image avec perte ressemblera à l'original, mais avec une certaine baisse de qualité, alors qu'une image sans perte est presque impossible à distinguer de l'original mais aussi plus lourde.
• Concevoir avec la taille de l'image à l'esprit . Si vous travaillez avec des images qui doivent s'afficher dans une variété de tailles, il est préférable de fournir toutes les tailles dont vous aurez besoin. Si votre site doit les redimensionner à la volée, cela peut avoir un impact négatif sur les vitesses.
• Exploration des réseaux de distribution . Les CDN peuvent être une solution à des approches plus gourmandes en ressources pour la gestion des fichiers multimédias. Un CDN peut gérer tout le contenu de votre image et répondre à diverses situations pour fournir les fichiers les meilleurs et les plus optimisés.

Comme pour toute solution technique, vous devrez peser le pour et le contre de chaque approche. Cependant, il convient également de noter que ces approches plus traditionnelles ne sont pas les seules options dont vous disposez.

Comme nous l'avons mentionné ci-dessus, les CDN sont un moyen possible de résoudre les énigmes de performances d'image sur votre site Web. Un exemple des services qu'un CDN peut fournir se trouve dans Traitement d'images de KeyCDN .

Ce service particulier est une option de traitement et de livraison d'images en temps réel. Cela signifie qu'il peut détecter la façon dont un utilisateur consulte votre site et fournir le type d'image optimal pour ce cas d'utilisation. Voyons quatre raisons pour lesquelles cela peut être une caractéristique très efficace.

1. Vous pouvez convertir vos images en formats avancés

Nous avons déjà expliqué comment PNG et JPEG sont respectivement les formats les plus courants et recommandés pour les éléments graphiques et photographiques. Vous ne savez peut-être pas, cependant, qu'il existe un nouveau format de fichier qui pourrait être avantageux lorsque vous cherchez à améliorer les performances de votre site.

Nous parlons de WebP, qui est le nouveau fichier d'image moderne de Google .

Le format WebP peut fonctionner avec une compression avec et sans perte et prend en charge la transparence. De plus, les fichiers eux-mêmes ont beaucoup de potentiel en termes d'optimisation et de performances.

En effet, les fichiers sans perte WebP sont jusqu'à 26% plus petits que les PNG de qualité équivalente. En fait, KeyCDN a fait une étude pour comparer à quel point l'impact du format WebP peut avoir. Il a constaté une diminution globale de 77% de la taille de la page lors de la conversion de JPG en WebP.

Par conséquent, KeyCDN propose une conversion en WebP. Cette fonctionnalité utilise la compression sans perte, et l'image la plus appropriée peut ensuite être servie à chaque utilisateur en fonction des spécifications et de la compatibilité du navigateur.

En plus de la conversion, il existe également une mise en cache WebP qui en propose une. -Cliquez sur la solution pour les utilisateurs existants. Sans rien changer d'autre, les utilisateurs de KeyCDN peuvent facilement profiter des images WebP via cette option.

2. Votre site Web peut fournir des images à l'échelle

Lorsque vous redimensionnez des images avec des attributs CSS ou HTML, vous manipulez une image à plusieurs fins. Cela a ses inconvénients en termes de qualité et de performances. C'est pourquoi KeyCDN propose la livraison en temps réel d'images à l'échelle grâce à ses services de traitement d'images.

L'un des principaux avantages de l'utilisation d'un CDN est que les images seront livrées à partir de l'emplacement du serveur qui est le plus proche de la personne accédant à votre site Web . Lorsque cela est associé à la flexibilité de vos images mises à l'échelle, vous pourrez fournir le meilleur fichier pour une grande variété de tailles d'écran à des vitesses élevées.

3. Vous pouvez maximiser les ressources de votre serveur

Lorsque les images sont chargées via le serveur de votre site Web, la vitesse des pages peut être affectée négativement car votre serveur essaie de répondre à toutes les demandes qu'il reçoit. Lorsque vous ajoutez un CDN, vous autorisez votre serveur Web à se concentrer sur la gestion des demandes dynamiques, tandis que le réseau est chargé de s'assurer que vos images et votre contenu statique sont en place.

Essentiellement, les CDN permettent à votre serveur Web d'externaliser la charge du chargement des éléments multimédias. En utilisant un CDN, vous pouvez libérer de l'espace de stockage sur votre serveur Web et les visiteurs de votre site Web recevront des médias du centre de données CND physique le plus proche. Il en résulte une latence beaucoup moins importante entre les utilisateurs Web et votre contenu.

4. Les visiteurs de votre site bénéficieront de taux de compression précis

L'utilisation d'un CDN vous offre également une solution en temps réel aux problèmes de traitement d'image. Par exemple, vous pouvez configurer le traitement d'image pour fournir un taux de compression spécifique pour divers paramètres. Cela signifie que les utilisateurs de votre site auront toujours le bon support pour leurs appareils, sans aucun ralentissement de page.

Essentiellement, plus le taux de compression est efficace, moins il y a d'octets d'informations à transmettre. En fin de compte, vous devrez décider si vous préférez utiliser la compression avec perte ou sans perte.

Si vous recherchez simplement la meilleure réduction de la taille du fichier, vous êtes probablement prêt à opter pour la compression avec perte. Sinon, si vous exploitez un site Web de photographie, vous souhaiterez peut-être bénéficier du nouveau format de fichier WebP et de la compression sans perte. Cela permettra aux images d'être retournées à leur format de compression d'origine plus tard si nécessaire.

Quelle que soit la compression que vous choisissez, un CDN vous permet de définir des paramètres pour la livraison de contenu, sans affecter la vitesse ou la fonctionnalité du serveur de votre site Web. Ces paramètres incluent des aspects tels que le recadrage, le recadrage et le réglage de la largeur, de la hauteur, de l'ajustement et de la position de l'image.

Par exemple, vous pouvez utiliser des chaînes de requête pour obtenir certains effets d'image. La chaîne suivante créera un effet de flou sur une image:

 https://ip.keycdn.com/example.jpg?blur=5

L'image résultante devrait ressembler à ceci:

D'autre part, une chaîne de requête pour affiner la même image utiliserait la netteté paramètre:

 https://ip.keycdn.com/example.jpg?sharpen=10

Il en résulterait une image affichant un effet plus net:

En fin de compte, il existe une grande variété de paramètres que vous pouvez utiliser avec un CDN, afin d'afficher des images sur votre site Web avec plus de flexibilité et d'impact que par d'autres méthodes.

Comment démarrer avec le traitement d'images

Vous pouvez commencer à gérer vos images avec un service comme KeyCDN assez rapidement. Vous serez facturé en fonction du nombre d'appels auxquels le réseau de distribution doit répondre. KeyCDN calcule cela par emplacement et par Go, jusqu'à 10 premiers To d'activité par mois.

Plus votre site Web est occupé, moins vous payez, selon le niveau de To utilisé . Une fois que vous aurez créé un compte KeyCDN vous pourrez configurer une « zone de tirage ». Cela signifie que vous identifierez le serveur d'origine pour le contenu de votre site Web.

C'est de là que KeyCDN extraira le contenu statique, afin de mettre en cache ces données sur ses serveurs périphériques. Lorsque les visiteurs accèdent à votre site Web, les demandes sont acheminées vers le serveur Edge le plus proche et le contenu est livré. Il est important de noter que vous devrez activer le traitement d'image pour que cette zone de traction particulière fonctionne.

« Zones de poussée », d'autre part, sont recommandés et parfois requis pour des fichiers plus volumineux. Si vous mettez en cache des fichiers de plus de 100 Mo, vous devrez utiliser une zone push.

Une fois que vous aurez configuré vos zones, vous voudrez vérifier que le CDN reconnaît vos actifs et qu'ils sont accessibles via le réseau. Il existe un certain nombre de façons d'intégrer ensuite KeyCDN de manière transparente dans le flux de travail de votre site Web. En fonction de votre hôte ou de votre plate-forme, vous voudrez peut-être consulter la documentation de support appropriée pour terminer le processus d'intégration.

Conclusion

Le traitement d'image peut amener vos efforts d'optimisation à un tout autre niveau, avec des outils de diffusion de contenu en temps réel. Cela peut être un grand point de différenciation entre vous et vos concurrents, et vous permettre de maximiser les ressources de votre site Web et d'augmenter les vitesses de chargement des pages.

Les services de traitement d'image KeyCDN peuvent vous aider à atteindre vos objectifs de diffusion de contenu car vous pouvez:

1. choisir parmi des conversions de format de fichier avancées
2. fournir des images à l'échelle dynamique aux visiteurs du site via des réglages de paramètres personnalisés
3. libérer le serveur de votre site Web en déchargeant la livraison de contenu statique
4. tirer le meilleur parti des pertes et

Quel que soit l'objectif de votre site Web, l'utilisation du traitement d'image via les CDN peut faire passer votre diffusion multimédia au niveau supérieur!