Les images

• Format d'images
• Insérer une image en HTML
• Dimensionner une image
• Aligner une image
• Image arrière-plan

Format d'images

Une image est représentée par une série de pixels. Ce sont l'ensemble ce ces pixels qui forment l'image totale que l'on voit sur l'écran.

Un pixel est la plus petite unité qui compose une image. Un pixel est habituellement formé de trois composants. Le niveau de rouge, de vert et de bleu. On appele communément ce trio de valeurs par l'acronyme "RGB"

Un pixel est la plus petite unité qui compose une image. Un pixel est habituellement formé de trois composants. Le niveau de rouge, de vert et de bleu. On appele communément ce trio de valeurs par l'acronyme "RGB"

On appelle "définition" le nombre de pixels constituant l'image, c'est-à-dire sa «dimension informatique» (le nombre de colonnes de l'image que multiplie son nombre de lignes). Une image possédant 800 pixels en largeur et 600 en hauteur aura une définition de 800 pixels par 600, notée 800x600.

Voici une image qui a une définition de 800 pixels de largeur sur 600 pixels de hauteur.

Le poids d'une image est sa grosseur totale en octet. Ceci s'obtient habituellement en multipliant le nombre pixel en largeur par le nombre de pixel en hauteur et en multipliant ce nombre par 3 (pour les 3 composants RGB).

Pour l'image précédente, on a donc une image qui fait 800 x 600 x 3, c'est-à-dire, 1 440 000 octets. Donc une image de près de 1.4 Mo.

Insérer une image en HTML

Pour ajouter une image, on utilise l’élément img (balise unique <img>)

Cette balise est une balise orpheline car elle n’a pas besoin d’être refermée puisqu'elle ne contient pas de texte.

L’élément img possède deux attributs obligatoires :

La source (attribut src) peut être un lien externe (adresse http) si l’image sur trouve déjà ailleurs sur le Web ou un lien interne si elle se trouve sur notre disque dur.

Image dans le même dossier que le fichier html

Le plus simple est évidemment lorsque l’image se trouve dans le même dossier que le fichier HTML qui y fait référence, puisqu’on peut simplement indiquer le nom du fichier d’image comme source :

<img src="montagnes.jpg" alt="Une belle montagne">

L’image apparaîtra à l’endroit indiqué, dans sa taille originale

Notez qu’elle n’apparaît pas nécessairement sur sa propre ligne et qu’elle s’alignera avec le texte qui la suit ou la précède si on la laisse sur une ligne déjà entamée

Image dans un dossier relatif au fichier html

Il est généralement considéré comme une bonne pratique de stocker ses images dans un dossier différent de celui qui contient les fichiers HTML, simplement pour s’y retrouver plus facilement

Dans ce cas, l’attribut src devra recevoir un chemin pour retrouver l’image

Par exemple, si vous créez un dossier images et que vous y placez notre image de la montagne, la balise deviendra :

<img src="images/montagnes.jpg" alt="Une belle montagne">

Les chemins sont toujours relatifs à la position du fichier HTML

Image située ailleurs sur un autre site Web

Dans ce cas, la source (src) de l'image est une adresse URL qui pointera vers le fichier situé sur un autre site Web.

Voici un exemple:

<img src="https://img.freepik.com/photos-gratuite/
        petit-bateau-dans-lac-entoure-forets-denses_181624-9907.jpg" alt="Petit bateau">

Dimensionner une image

Il est possible de redimensionner l’image en utilisant les attributs width (largeur) et height (hauteur), qui prennent tous les deux une dimension en pixels :

<img src="pizza.jpg" alt="La meilleure pizza au monde"
      width="200" height="100">

Il est important de se rappeler que l’image n’est redimensionnée que par le navigateur, à l’affichage.

L’image originale est envoyée du serveur au navigateur et si vous utilisez de très grosses images alors que votre but est de les afficher en petit format, vous devriez les redimensionner dans un logiciel de traitement d’images afin de diminuer leur poids (nombre d'octets)

CSS - Aligner une image

Par défaut, une image se positionne comme un caractère, ce qui n'est généralement pas ce qu'on désire :

On peut mettre une image toute seule dans un paragraphe et il n'y aura pas d'habillage (elle ne sera pas entourée par du texte) :

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec nunc et diam laoreet hendrerit ac a turpis. Sed enim nisi, faucibus id risus non, porta tincidunt orci. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Vestibulum dapibus vehicula tortor nec lobortis. Nulla gravida aliquet sem, vitae posuere nisi auctor ut. Morbi a varius dui, vestibulum euismod metus. Integer ut ipsum sagittis, blandit eros non, mollis est. Praesent at felis nec turpis malesuada vestibulum. Curabitur rhoncus vitae mi nec tempus. Proin viverra turpis luctus nisi molestie facilisis. Donec fermentum odio et interdum accumsan.

La solution est d'utiliser la propriété CSS float pour que l'image "flotte" (s’aligne) à gauche ou à droite dans le texte :

<img style="float:right" src="images/happy_face.jpg" alt="Happy face">

Ce qui nécessite parfois un peu de remplissage pour que l'image prenne un peu plus sa place(padding) :

<img style="float:left; padding:10px;" src="images/happy_face.jpg" ...>

CSS - Utiliser une image d'arrière-plan

Il est possible aussi d'utiliser une image comme fond d'écran dans une page HTML.

Il s'agit d'utiliser quelques éléments reliés à CSS. Le but ici n'est pas d'expliquer à fond ces éléments mais de vous montrer une autre possibilité d'utilisation des images. Le CSS sera vu beaucoup plus exhaustivement plus tard dans le cours.

Plusieurs possibilités s'offrent à nous pour pouvoir remplir la page avec un fond d'écran. C'est une première façon bien que ce n'est pas la meilleure loin de là. Nous verrons de meilleures méthodes dans la portion CSS du cours.

Il s'agit ici d'ajouter l'attibut "style" et quelques options de CSS à la balise <body>.

  <body style='background-image: url("nom_du_fichier_ici");
        background-size: cover; background-position: center;' >
      
Exemple avec le fichier nommé pizza.jpg :

    <body style='background-image: url("pizza.jpg");
        background-size: cover; background-repeat: no-repeat;' >