Office
Se connecter

Optimisation des images pour SharePoint Online

Remarque :  Nous faisons de notre mieux pour vous fournir le contenu d’aide le plus récent aussi rapidement que possible dans votre langue. Cette page a été traduite automatiquement et peut donc contenir des erreurs grammaticales ou des imprécisions. Notre objectif est de faire en sorte que ce contenu vous soit utile. Pouvez-vous nous indiquer en bas de page si ces informations vous ont aidé ? Voici l’article en anglais à des fins de référence aisée.

La vitesse de chargement d’une page Web dépend de la taille combinée de tous les composants requis pour afficher la page, y compris des images, HTML, JavaScript et CSS. Images constituent un excellent moyen pour rendre votre site plus attrayant, mais leur taille peut affecter les performances. En optimisant vos images avec compression et redimensionnement et l’utilisation de sprites, vous pouvez décaler l’impact des images de très grande taille. À l’aide de rendus d’image SharePoint, vous pouvez télécharger une seule grande image et afficher des sections de l’image en lui permettant d’être réutilisées plutôt que de recharger.

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

Un sprite contient des images plus petites. Modifier l’apparence sélectionnez une partie de l’image composite à afficher sur une partie spécifique de la page avec le positionnement absolu. En fait, vous déplacez une seule image autour de la page au lieu de chargement de plusieurs images, puis rendez visible une petite partie de cette image via une petite fenêtre dans laquelle la partie de l’image sprite s’affiche à l’utilisateur final. SharePoint Online utilise sprites pour afficher ses différentes icônes dans la spcommon.png sprite.

Ce qui est traité ici :

  • Compression des images

  • Optimisation des images

  • Rendus d’image dans SharePoint

Capture d’écran de spcommon

Cela peut améliorer les performances, car vous téléchargez une seule image au lieu de plusieurs et puis mettre en cache et réutilisez cette image. Même si l’image n’est pas mis en cache, en demandant une image au lieu de plusieurs images, cette méthode réduit le nombre total de requêtes HTTP au serveur qui permet de réduire le temps de chargement de page. Il s’agit d’un formulaire de regroupement des imagesvraiment. C’est une technique très utile si les images ne modifient pas très souvent, par exemple, icônes, comme le montre l’exemple ci-dessus SharePoint. Vous pouvez l’utilisation Web Essentials, un projet tiers, open source, en fonction de communauté pour y parvenir facilement dans Microsoft Visual Studio. Pour plus d’informations, voir réduction 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

Les rendus d’image sont une fonctionnalité de SharePoint Online qui vous permet de servir plusieurs versions d’images basées sur les dimensions d’image prédéfinis. Ceci est particulièrement important lorsqu’il est contenu d’image générés par l’utilisateur ou les dimensions de l’image comme largeur et hauteur sont résolues par la CSS sur le site. Même si une image est résolue en CSS, l’image d’une résolution maximale est toujours chargé. 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 les images individuels en rognage la partie de l’image que vous voulez utiliser. Vous pouvez rogner les images de manière individuelle, par un rendu. Les images de rognage accélère de chargement à l’aide de cache d’objets blob de SharePoint pour créer une version de l’image de chaque rendu de la page. Ainsi, la charge du serveur est réduite, car l’image est redimensionnée uniquement une fois et est prêt à répondre aux utilisateurs finaux plusieurs fois. Pour plus d’informations sur la façon de rogner un rendu d’image, voir Rogner un rendu d’image.

Développez vos compétences dans Office
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.

×