Optimisation des images pour SharePoint Online

La vitesse de chargement d’une page web dépend de la taille combinée de tous les composants nécessaires à l’affichage de la page (images, code HTML, code JavaScript et code CSS). Bien que les images rendent votre site plus attractif, leur taille peut affecter les performances de chargement. Si vous optimisez vos images en les compressant et en les redimensionnant, mais également en utilisant des sprites, vous pouvez tirer parti d’une mosaïque contenant plusieurs images avec des effets différents. Grâce aux rendus d’image SharePoint, vous pouvez télécharger une seule image de grande taille et afficher des sections de celle-ci. L’image est ainsi réutilisée et non rechargée.

Utiliser des sprites pour accélérer le chargement des images dans SharePoint Online

Un sprite contient plusieurs images de plus petite taille. En utilisant une feuille de style en cascade, vous sélectionnez une partie de l’image composite à afficher sur une partie spécifique de la page avec un positionnement absolu. Schématiquement, vous déplacez une image sur la page au lieu de charger plusieurs images et rendez visible une partie de cette image dans une petite fenêtre qui affiche la partie requise du sprite à l’utilisateur final. SharePoint Online utilise les sprites pour afficher ses différentes icônes dans le sprite spcommon.png.

Contenu de cette rubrique

  • Compression des images

  • Optimisation des images

  • Rendus d’image dans SharePoint

Capture d’écran de spcommon

Les sprites peuvent accroître les performances, car vous téléchargez une seule image au lieu de plusieurs, puis mettez en cache et réutilisez cette image. Même si l’image ne reste pas en cache, cette méthode réduit le nombre total de demandes HTTP adressées au serveur, car elle n’utilise qu’une image au lieu de plusieurs et diminue le délai de chargement des pages. Cela s’apparente à un regroupement d’images. Cette technique s’avère très utile si les images ne changent pas très souvent (voir l’exemple des icônes dans l’exemple SharePoint fourni ci-dessus). Vous pouvez utiliser Web Essentials, un projet communautaire open source tiers pour y parvenir facilement dans Microsoft Visual Studio. Pour plus d’informations, voir Minimisation et regroupement dans SharePoint Online.

Compresser et optimiser des images pour accélérer le chargement des pages dans SharePoint

La compression et l’optimisation des images consistent à réduire la taille de fichier des images que vous utilisez sur votre site. Pour réduire la taille d’une image, il est souvent recommandé de redimensionner l’image aux dimensions maximales auxquelles elle sera affichée sur le site. Il est inutile d’avoir une image plus grande que la taille à laquelle elle sera toujours affichée. La vérification préalable des dimensions des images à l’aide d’un éditeur d’image permet de réduire la taille de votre page de façon simple et rapide.

Dès lors que la taille des images est correcte, l’étape suivante consiste à optimiser la compression de ces images. Différents outils de compression et d’optimisation sont disponibles, notamment la Galerie de photos et des outils tiers. La compression permet de réduire la taille des fichiers autant que possible sans perte de qualité perceptible pour les utilisateurs finaux. Vous devez tester vos fichiers compressés sur un écran haute définition pour vous assurer qu’ils s’affichent toujours correctement.

Accélérer le téléchargement des pages à l’aide des rendus d’image SharePoint

Fonctionnalité de SharePoint Online, les rendus d’image vous permettent de distribuer différentes versions d’images basées sur des dimensions d’image prédéfinies. Ceci est particulièrement important lorsque du contenu d’image généré par l’utilisateur ou les dimensions des images telles que la hauteur et la largeur sont définies par la feuille de style en cascade sur le site. Même si une image est définie par la feuille de style en cascade, l’image en pleine résolution est toujours chargée. Dans ce cas, la taille de fichier peut être réduite en utilisant les rendus d’image.

Remarque : Les rendus sont uniquement disponibles pour SharePoint lorsque la publication est activée. Vous pouvez activer cette fonctionnalité sous Paramètres > Paramètres du site > Gérer les fonctionnalités du site > Publication SharePoint Server. Sinon, l’option n’est pas disponible.

Le redimensionnement du rendu d’image prend la plus petite dimension que vous définissez (largeur ou hauteur), puis redimensionne l’image de telle sorte que l’autre dimension est modifiée automatiquement sur la base des proportions verrouillées. Par défaut, l’image est rognée à partir du centre conformément aux dimensions restantes. Par exemple, si vous définissez un rendu de 100 x50 pixels (largeur x hauteur) et que votre image d’origine est de 1 000 x 800 pixels (largeur x hauteur), celle-ci sera redimensionnée de telle sorte que la dimension de 800 pixels devienne 50 pixels et que la dimension de 1 000 pixels (désormais 62,5 pixels) soit rognée à partir du centre de l’image.

Les étapes sont relativement simples, mais pour que les images utilisent les rendus, ceux-ci doivent se trouver sur le site SharePoint avant l’ajout des images. De plus, les fonctionnalités Infrastructure de publication de SharePoint Server (niveau Collection de sites) et Publication SharePoint Server (niveau Site) doivent également être activées.

Ajouter un rendu d’image pour accélérer le chargement des pages

  1. Vérifiez que le compte d’utilisateur qui effectue cette procédure dispose au minimum des autorisations de création sur le site de niveau supérieur de la collection de sites et que le site est publié sur une page web.

  2. Dans un navigateur web, accédez au site de niveau supérieur de la collection de sites de publication.

  3. Sélectionnez l’icône Paramètres.

  4. Dans la page Paramètres du site, les rendus d’image intégrés apparaissent dans la section Aspect.

    Vous pouvez utiliser les rendus prêts à l’emploi ou sélectionner Rendus d’image pour en créer un autre.

    Capture d’écran d’un rendu d’image
  5. Dans la page Rendus d’image, sélectionnez Ajouter un nouvel élément.

    Capture d’écran de l’option Ajouter un nouvel élément
  6. Dans la page Nouveau rendu d’image, dans la zone Nom, entrez un nom pour le rendu.

  7. Dans les zones de texte Largeur et Hauteur, entrez la largeur et la hauteur du rendu (en pixels), puis sélectionnez Enregistrer.

    Capture d’écran du nom d’un rendu d’image

Personnaliser le rognage avec les rendus d’image dans SharePoint

Par défaut, un rendu d’image est généré à partir du centre de l’image. Vous pouvez ajuster le rendu d’image pour chaque image en rognant la partie que vous voulez utiliser. Vous pouvez rogner les images de manière individuelle, par rendu. Le rognage des images accélère le chargement des pages en utilisant le cache de blog de SharePoint pour créer une version de l’image pour chaque rendu. La charge sur le serveur est ainsi réduite, car l’image n’est redimensionnée qu’une fois, et est ensuite prête à servir aux utilisateurs plusieurs fois. Pour plus d’informations sur le rognage d’un rendu d’image, voir Détourage d’un rendu d’image.

Développez vos compétences
Découvrez des formations
Accédez aux nouvelles fonctionnalités en avant-première
Rejoignez le programme Office Insider

Ces informations vous ont-elles été utiles ?

Nous vous remercions pour vos commentaires.

Merci pour vos commentaires. Il serait vraisemblablement utile pour vous de contacter l’un de nos agents du support Office.

×