Trouver la bonne taille pour ses images sur son site internet

Comment Trouver la bonne taille pour ses images sur son site internet ?

Nous tentons de répondre à cette question avec ce petit guide que nous avons rédiger. Désormais plus d’excuse pour ne pas trouver la bonne taille d’image pour votre site internet.

Avant de commencer

Pour trouver la taille et les dimensions de votre image originale avant de la charger sur votre site :

  • PC – Faites un clic droit sur l’image et sélectionnez Propriétés.
  • Mac – Appuyez sur Options tout en cliquant sur le fichier de l’image, puis sélectionnez Informations.

Lorsque vous ajoutez un Bloc Image à une page ou un article de blog, plusieurs facteurs affectent sa taille d’affichage sur votre site :

  • La taille du Bloc Image
  • La mise en page que vous avez choisie pour le Bloc Image
  • La taille de l’image d’origine (mise en page Inline uniquement)

Ce guide vous aide à comprendre ces facteurs et explique les différentes options disponibles pour redimensionner une image.

Nous vous recommandons de charger une image d’une largeur comprise entre 1 500 et 2 500 pixels. Cette gamme est le meilleur choix pour des images de qualité, mais qui ne surchargent pas votre site.

Si vous utilisez une mise en page prédéfinie avec un bloc Image (de type espace réservé), ajoutez votre propre image au bloc avant d’essayer de la redimensionner.

Exigences relatives aux images

Suivez ces recommandations quand vous chargez des images sur votre site :

Types de fichiers

Enregistrez des images au format .jpg, .gif, ou .png uniquement.

Les fichiers .pdf, .psd, .tff et .doc ne sont pas compatibles.

Nom de fichiers

Utilisez uniquement des lettres, des chiffres, des tirets bas et des traits dʼunion dans les noms de fichiers. Tout autre caractère (comme les accents, un point dʼinterrogation, un signe de pourcentage ou une esperluette) peut poser problème ou provoquer un comportement inattendu dans les galeries.

Résolution

Il existe une limite de résolution d’image de 60 MP (mégapixels).

Pour trouver la valeur en Mpx d’une image, multipliez ses dimensions, puis divisez le résultat par un million. Par exemple, une image mesurant 1500 px sur 1650 px fait 2,475 Mpx.

Mode de couleur

Enregistrez des images en mode couleur RVB. Le mode impression (CMJN) ne s’affichera pas dans la plupart des navigateurs.

Profil de couleur

Enregistrez des images dans le profil de couleur sRVB. Si les images ne s’affichent pas correctement sur les appareils mobiles, la source du problème est probablement l’absence d’un profil de couleur sRVB.

Pexels Sharon Mccutcheon 1148496 400

Recommandations relatives aux images

Taille de fichiers

Pour un résultat optimal, nous vous recommandons d’utiliser des fichiers image dont la taille est inférieure à 500 Ko (notez cependant que la limite prévue pour le chargement de chaque image est de 20 Mo). Une taille d’image plus importante n’est pas toujours préférable, le chargement de plusieurs images volumineuses pouvant affecter les performances du site. Si vous ajoutez plusieurs images à une page, prenez en compte la taille globale de votre page.

Largeur des images

Les dimensions de l’image d’origine que vous chargez sur votre site peuvent avoir un impact important sur sa manière de s’afficher. Nous vous recommandons d’utiliser des images dont la largeur se situe entre 1 500 et 2 500 pixels.

  • Les images de moins de 1 500 pixels peuvent apparaître floues ou pixellisées lorsqu’elles sont étirées pour remplir certain conteneurs, comme des bannières.
  • Dans la plupart des cas, on redimensionne les images de grande taille pour qu’elles ne dépassent pas 2 500 pixels de largeur. Toutefois, le chargement des images que vous ajoutez à partir du panneau Styles du site (images d’arrière-plan et images de bannière de site) s’effectue avec les dimensions d’origine. Ceci peut engendrer des problèmes de chargement de page si l’image comporte plus de 2 500 pixels pour le bord le plus long.

Vous pouvez utiliser des logiciels tiers pour réduire les dimensions d’une image. Nous vous déconseillons d’agrandir une image, car elle pourrait apparaître pixelisée. Nous vous recommandons de commencer avec une image d’au moins 1 500 pixels de large. Vous pouvez également rechercher et ajouter des images d’archive de haute qualité directement à partir de votre site.

Astuce : si vous remarquez des problèmes de chargement, comme une image d’arrière-plan ne chargeant pas sur mobile, essayez de réduire la bordure la plus longue de l’image à 1 500 pixels. Il s’agit de la combinaison la plus sûre de qualité d’image et de vitesse de chargement pour vos visiteurs.

Recadrage de lʼimage

Les images recadrées par votre site, que ce soit à l’aide de la poignée de recadrage ou des ajustements de la valeur de proportion dans les Styles du site, sont chargées sur le navigateur en format intégral. Pour réduire la taille des images volumineuses, il est conseillé de les recadrer manuellement jusquʼà obtention de la taille souhaitée, en utilisant un logiciel tiers ou l’éditeur d’image intégré.

Texte lié à l'image

Nous vous conseillons le plus possible d’ajouter du texte en superposition plutôt que de l’inclure dans l’image. Cela permet de pouvoir rechercher ce texte et le garde visible si l’image est recadrée sur des appareils plus petits. Consultez nos astuces pour ajouter du texte superposé dans les blocs Image, les bannières, les pages Galerie et les blocs Galerie.

Si votre image contient du texte, il est préférable de l’enregistrer au format .png. Le texte d’un fichier .jpg devient flou lorsque l’image est compressée. Un fichier .png conserve la netteté du texte, en particulier si l’image est affichée dans sa taille d’origine.

Nom des images

Le nom d’une image sert de texte de remplacement si aucun autre texte de remplacement n’est fourni. Ce nom indique également aux moteurs de recherche le contenu de l’image, ce qui augmente vos chances d’apparaître dans les recherches d’images.

En créant vos images, respectez les bonnes pratiques concernant le texte de remplacement définies par les outils de SEO.

Rapport d'aspect

Pexels Emre Kuzu 4503762 169
Image 16:9

Permet de vérifier que chaque image utilisée possède la même valeur de proportion (hauteur/largeur) avant d’être mise en ligne. En effet, les images sont généralement recadrées en fonction de leur hauteur et de leur largeur. Si toutes vos images possèdent la même valeur de proportion, il sera plus facile d’anticiper leur recadrage.

Pexels Emre Kuzu 4503762 11
Image 1:1

La valeur de proportion est le rapport proportionnel entre la largeur et la hauteur d’une image. Grosso modo, cette valeur décrit la forme d’une image.

Les valeurs de proportion sont exprimées par la formule largeur/hauteur. Cela peut être, par exemple, 3:2.

La valeur de proportion d’une image carrée est de 1:1, car sa hauteur et sa largeur sont identiques. La résolution de l’image peut être de 500 px × 500 px ou de 1500 px × 1500 px, mais sa valeur de proportion reste de 1:1.

Prenons un autre exemple : une image de type portrait peut avoir une valeur de proportion de 2:3. Dans ce cas-là, la hauteur est 1,5 fois supérieure à la largeur. Dans ce cas de figure, l’image peut avoir une résolution de 500 px × 750 px, 1500 px × 2250 px, etc.

Pour obtenir une valeur de proportion exacte, divisez la hauteur par la largeur. Par exemple :

  • Valeur de proportion 2:3 : 3 ÷ 2 = 1,5, donc vous devez régler le curseur sur 150.
  • Valeur de proportion 3:2 : 2 ÷ 3 = 0,667, donc vous devez entrer 66,7 à côté du curseur.
 

Nota :

  • bande blanche si vous ne souhaitez pas recadrer votre photo : des bandes blanches seront ajoutées sur le côté.
  • recadrage : votre photo sera recadré pour s’adapter à la taille du tirage photo et une partie sera alors coupée.
Pexels Emre Kuzu 4503762 Orig
Image d'origine

Orientation

Vérifiez l’orientation de votre image avant de la charger. Si votre image est enregistrée à l’envers, faites-la pivoter avec un logiciel de retouche d’image avant de la charger sur votre site.

DPI et PPI

Si la résolution des images vous préoccupe, concentrez-vous sur les dimensions de votre image et assurez-vous que celle-ci ne dépasse pas les 500 Ko. Les unités DPI (Dots Per Inch, ou « points par pouce ») et PPI (Pixels Per Inch, ou « pixels par pouce ») affectent la qualité d’impression d’une image, mais pas la qualité de l’affichage sur le web. Vous pouvez donc les ignorer.

Taille de la page

Même si vos photos pèsent moins de 500 Ko, s’il y a un grand nombre d’images sur une page, cela peut causer des problèmes, comme des vitesses de chargement lentes. Vérifiez le contenu de votre page pour vous assurer que la taille de votre page est de 5 Mo ou inférieure.

Bannières de page

Les bannières de page ne proposent pas de valeur de proportion ou de dimensions prédéfinies, car elles s’étirent et changent de forme pour s’adapter aux différents navigateurs.

  • Il peut être utile de recadrer l’image pour l’adapter à la forme de votre bannière (large et courte). Il n’y a pas de dimensions exactes à viser pour ce recadrage, ceci quel que soit le template. Vous devez donc le faire à l’œil. En chargeant des images qui ont la même valeur de proportion, vous pouvez anticiper la façon dont elles seront recadrées pour s’adapter au conteneur de la bannière.
  • La plupart des templates vous permettent d’ajuster la hauteur de la bannière.
  • Dans le cas des bannières à hauteur fixe, choisissez la même valeur de proportion pour toutes vos images de bannière afin de créer une apparence uniforme.

Remarque : chaque template traite les images différemment.