Tutoriel : Utilisation de l'optimisation d'image

Vous pouvez utiliser l'optimisation d'image sur votre site Developer Portal pour améliorer l'utilisation des images.

Les images optimisées ne surchargent pas votre site Web, mais augmentent considérablement ses performances par rapport à l'utilisation des images d'origine. La satisfaction de vos clients et la réputation de votre marque s'améliorent avec des actifs visuels à chargement rapide et à taille réduite. L'optimisation automatique peut faire économiser du temps et des efforts en matière d'édition et de modération de contenu.

Avant de commencer

Un portail de développeur doit être activé et vous devez disposer d'un accès administrateur pour exécuter ce tutoriel. Le tutoriel Création du portail explique comment activer le portail si vous ne l'avez pas déjà fait.

A propos de ce tutoriel

Dans cette tâche, vous créez un style d'image appelé User pictureet vous lui donnez un effet d'échelle et de cadrage. Utilisez ensuite User picture comme zone Picture dans le compte utilisateur.

Ce tutoriel vous guide à travers les étapes suivantes :
  1. Créez le style d'image User picture.
  2. Editez le style d'image User picture.
  3. Affecter User picture à l'option picture dans Account settings..

Créez le style d'image User picture

  1. Connectez-vous à votre portail de développeur en tant qu'administrateur.
  2. Naviguez jusqu'à Configuration > Les médias > Styles d'image.
  3. Cliquez sur + Ajouter un style d'image.
  4. Saisissez User picture dans le champ Image style name. Cliquez sur Créer un style

    Saisir le nom du style d'image

Vous avez créé le style d'image User picture. Vous pouvez modifier le User picture selon vos besoins. Pour plus d'informations, voir Modifier le style d'image Image de l'utilisateur.

Editer le style d'image User picture

Lorsque vous éditez ce style, vous sélectionnez des paramètres de largeur et de hauteur. De même, vous indiquez la partie de l'image à conserver lors du recadrage (par exemple, le centre).
  1. Naviguez jusqu'à Configuration > Les médias > Styles d'image.
  2. Cliquez sur Editer dans le nom de style User picture .

    Modifier le style de l'écran de l'image de l'utilisateur

  3. Sous Effect, sélectionnez Scale and crop dans la liste et cliquez sur Ajouter.
  4. Entrez 300 dans les zones Width et Height . Laissez le Anchor comme paramètre central.
  5. Cliquez sur Ajouter un effet.

    Options d'échelle et de cadrage

  6. Cliquez sur Enregistrer pour enregistrer les changements.
Vous avez édité le style d'image User picture.

Affectez User picture à l'option picture dans Account settings

  1. Naviguez vers Configuration > Personnes > Paramètres du compte et cliquez sur l'onglet Gérer l'affichage.
  2. Cliquez sur l'onglet Compact.

    Page de gestion de l'affichage affichant les paramètres d'affichage

  3. Sur la ligne " Picture, cliquez sur " Icône de rouage.
  4. Sélectionnez User picture dans la liste Image style.
  5. Cliquez sur Mise à jour
  6. Cliquez sur Save pour enregistrer les modifications.

Vous définissez le style d'image User picture pour tous les comptes.

Tâches exécutées dans ce tutoriel

Vous avez modifié les paramètres de votre compte de sorte que si l'utilisateur affiche une image, celle-ci se trouve dans les limites du style d'image User picture.

Pour vérifier la photo utilisée par un utilisateur, allez sur Personnes, cliquez sur un utilisateur et voyez sa photo sur sa page de profil. Cliquez avec le bouton droit de la souris sur l'image, puis cliquez sur View image info, vous pouvez voir que les dimensions sont mises à l'échelle.

Dimensions de l'image