Catégories
Astuces et Design

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

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 termes de performances de sites 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 plus d'un aspect 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. Commençons!

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

Si vous décidez de ne pas optimiser vos images, vous liez 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.

Résultats d'un test de vitesse de site Web

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 s'attaquer spécifiquement à l'optimisation d'image, notamment:

  • Choix des formats d'image appropriés. Il existe un certain nombre de formats d'image 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, les nouveaux formats d'image tels que le 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 en tenant compte de la taille de l'image. 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.
  • Explorer les 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 à une variété de 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 le traitement d’image 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 fonctionnalité 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. Cependant, vous ne savez peut-être pas qu'un nouveau format de fichier est disponible, ce qui pourrait être utile lorsque vous cherchez à améliorer les performances de votre site.

Nous parlons de WebP, qui est le nouveau format de fichier 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 fichiers 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 vers 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 fonctionnalité de mise en cache WebP qui offre une solution en un clic 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 mises à 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 le plus proche de la personne accédant à votre site Web. Lorsque cela est associé à la flexibilité de vos images à l'échelle, vous serez en mesure de 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 de 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 internautes 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 obtiendront toujours le bon support pour leurs appareils, sans ralentissement de page.

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

Si vous recherchez simplement la meilleure réduction de la taille du fichier, vous êtes probablement prêt à opter pour une 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 les fonctionnalités 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:

Effet de flou appliqué à l'image

D'un autre côté, une chaîne de requête pour affiner la même image utiliserait le sharpen paramètre:

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

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

Une image avec le paramètre de netteté appliqué

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'image

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 le calcule 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 TB 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 du 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 tirage particulière fonctionne.

Les «zones de poussée», en revanche, sont recommandées et parfois nécessaires pour les fichiers de plus grande taille. Si vous mettez en cache des fichiers de plus de 100 Mo, vous devrez utiliser une zone push.

Une fois que vous avez configuré vos zones, vous devez 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 souhaiterez consulter la documentation d'assistance appropriée pour terminer le processus d'intégration.

Conclusion

Le traitement d'image peut porter 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'images KeyCDN peuvent vous aider à atteindre vos objectifs de diffusion de contenu, car vous pouvez:

  1. choisissez parmi les 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. tirez le meilleur parti de la compression avec et sans perte en temps réel.

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

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *