Je crée mon site

Essayez UGAL gratuitement pendant 1 mois

Sans engagement

Pratique

Mettre des images sur son site : règles de base et outils

31 décembre 2008

Mathilde

Grâce à l'éditeur de texte, vous pouvez insérer facilement des images sur votre site. Les images, par rapport au texte brut (voir mettre du contenu sur son site) ont toutefois quelques particularités.
En effet, le texte va s'adapter facilement à l'espace qui lui est réservé sur votre page web, le retour à la ligne est automatique. Pour image, c'est un peu plus compliqué car il s'agit d'un fichier unique (et non pas d'un ensemble de mots). Même si UGAL redimensionne automatiquement les images sélectionnées afin d'en garantir leur lisibilité sur votre site, ces quelques petits trucs vous aideront à mieux illustrer votre texte.  

Quelques informations d'abord

Les formats de fichier image

Les images sont disponibles sous différents formats de fichiers. Sur le web seuls 3 formats sont acceptés de façon quasi universelle: GIF PNG et JPEG.
Les autres formats (comme par exemple le PSD) sont des formats réservés à l'impression ou à d'autres applications.

  • Le format  GIF permet d'avoir une image animée
  • Les formats GIF et PNG permettent d'avoir une image sur un fond transparent
  • En gros, les GIF et les PNG sont mieux adaptées aux dessins et aux logos alors que  le format JPEG est mieux adapté pour les photos.

exemple de Gif animé

EXEMPLE: GIF animé

Pour plus d'information, la Toile regorge d'informations. Le site de l'École Internationale du Papier est par exemple très bien documenté.

La résolution de l'image

Une image est composée de différents points (quand on s'approche d'une affiche d'Abribus par exemple, on voit bien la multitude de points qui composent l'ensemble). C'est la densité de ces points qui définit la résolution de l'image. L'unité de mesure est le DPI (Dot per Inch) appelé aussi PPP, Points par pouce. Il s'agit du nombre de points contenu dans un pouce (un pouce mesurant 2,4 centimètres).
Plus la résolution est forte, plus l'image est lourde. Pour imprimer une image, il faut une résolution minimum de 300 dpi. Pour un affichage sur le web, il faut une résolution maximum de 72 dpi. Une plus grande résolution alourdirait le chargement de la page, sans apporter pour autant une différence visuelle notoire.

Les outils de retouche d'image

Adobe Photoshop est la référence pour la retouche photo. Il s'agit d'un outil dédié aux professionnels qui nécessite un certain investissement en temps et en argent. Une version "grand public " est disponible : Adobe Photoshop Element. Moins chère que la version complète, elle est souvent livrée en pack avec certaines imprimantes.

Sinon il existe beaucoup de solutions selon le système (Mac ou Pc) que vous utilisez. Apple est livré avec Istock Photo qui permet de rogner et de réduire la taille d'une image.

Windows XP est livré avec Windows Image Resizer qui permet de re-dimensionner facilement une ou plusieurs photos avec un clic de souris.

Il existe de nombreux utilitaire sur le marché comme irfanview (PC), photoscape (PC), graphicconverter (Mac)  ou gimp (PC, Mac,Unix). Gimp dispose de nombreux tutoriaux

Le plus simple

La puissance des logiciels de retouche d'image n'est pas à la portée de tous. On ne s'improvise pas graphiste ou webdesigner: c'est un métier. En revanche, connaître les bases, les extensions de fichier et avoir une notion de la taille des fichiers que l'on veut mettre en ligne est important si on veut gérer un site web. Une image de 3 Mo ou de 3500 pixels de large, sera trop lourde à charger et débordera du cadre de la fenêtre.

Si vous souhaitez simplement redimensionner une image, il exsite de nombreux sites comme celui-ci qui permettent de le faire en ligne gratuitement et simplement: télécharger votre image, indiquez la taille souhaitée (en largeur) et cliquez sur le bouton resizR: votre image est prête.

En pratique : insérer une image sur son site

UGAL redimensionne automatiquement les images et vous propose 4 formats pour vos images. Dans les pages catalogues produits ou port folio, une fonction diaporama est disponible en plus.

L'emplacement des images.

Les images doivent être positionnée dans la page par rapport aux autres éléments. Il vaut donc mieux saisir  d'abord votre texte puis ajouter les images, cela sera beaucoup plus simple.

Vous pouvez insérer une image soit entre deux paragraphes, soit incruster une image dans un texte

L'image se situe entre deux paragraphes L'image est incrustée dans le texte

1- Pour insérer une image entre deux paragraphes:

  • Placez le curseur entre les deux paragraphes
  • Cliquez sur l'îcone "insérer une image
  • Choisissez l' image à insérer sur votre ordinateur
  • Choisissez la taille d'image que vous souhaitez 
  • Cliquez sur Insérer

Utilisez ensuite les icones d'alignement pour déterminer l'alignement de l'image:

2- Pour insérer une image dans un bloc de  texte :

  • Placez le curseur devant le paragraphe
  • Cliquez sur l'icone "insérer une image
  • Choisissez l' image à insérer sur votre ordinateur
  • Choisissez la taille d'image que vous souhaitez
  • Choisissez l'alignement (droite ou gauche)
  • Cliquez sur Insérer

 

Je crée mon site

Essayez UGAL gratuitement pendant 1 mois

Sans engagement

La newsletter UGAL