Les appareils photos numériques actuels fournissent des photos de qualité, avec des définitions de plus en plus importantes.  Des sites internet fournissent aussi des images de qualité professionnelle, parfois gratuites ou à faible coût, et nous souhaitons utiliser ces illustrations pour enrichir nos sites internet. Comment s’y prendre ? Quelles transformations apporter à l’image avant la publication ?

Une question de poids

L’enjeu majeur quand on publie une photo est de fournir une image de qualité, tout en réduisant le temps nécessaire pour son chargement. En optimisant les réglages de la « définition » et de la « compression » de l’image on obtient le bon compromis entre ces deux exigences.

La taille des photos numériques

Mon appareil photo numérique me propose des images d’environ 20 millions de pixels. Cela tient les promesses de la publicité qui m’a poussé à le choisir. Mon smartphone n’est pas en reste, et ses photos font 8 millions de pixels. Qu’est-ce que cela veut dire ?

Cela exprime la « définition » de l’image, exprimée en nombre de points qui la composent. On peut en effet voir l’image comme une matrice de points coloriés, très rapprochés : plus la matrice est grande et plus de détails sont visibles dans l’image. On appelle ces points des « pixels ». Voilà donc, par exemple, qu’une photo prise avec mon appareil numérique est constituée d’une matrice de 5472 x 3648 pixels = environ 20 millions de pixels.

La taille des écrans et des sites internet

Les écrans qui équipent nos ordinateurs, ainsi que nos smartphones et tablettes, sont constitués aussi d’une matrice de points, dont la taille varie souvent entre environ 1000 et 2000 pixels de largeur, et plus rarement au delà.

Bon nombre des sites internet sont optimisés pour un affichage correct dans les écrans courants : la largeur de la zone du contenu est souvent réglée entre 800 et 1200 pixels.

Dans la plupart des cas, donc, une image insérée dans une page web ne dépasse pas le millier de pixels de large, et si en réalité elle est plus grande, alors ce sont des fonctionnalités du site même, ou du navigateur, qui la redimensionnent automatiquement pour un affichage correct.

Il est donc inutile de publier de plus grosses images, dans des fichiers volumineux, qui ne feraient que ralentir et alourdir le fonctionnement du site.

Règle n° 1 : réglage la taille

On peut donc exprimer ainsi la première règle à appliquer  : redimensionner l’image à environ 1000 px de largeur.

La qualité de l’image : le taux de compression

Les photos que nous utilisons normalement sont au format JPEG (les fichiers portent l’extension .jpg ou .jpeg). Ce format permet de réduire la taille du fichier contenant l’image en lui appliquant un algorithme de compression. Cette compression comporte une dégradation de la qualité de l’image, mais cette dégradation appliquée entre certains limites ne perturbe pas la vision qu’on en a.

la même image de 350 pixels avec une qualité de compression de 50%. La dégradation s’aperçoit à peine mais la taille du fichier est réduite à mois de la moitié : environ 43 Koctets.

Agrandissement de l’image avec une qualité de compression de 50%.

C’est un mauvais dimensionnement de l’image qui peut rendre visibles les défauts introduits par la compression.

Règle n° 2 : réglage de la qualité de compression

La règle n° 2 pour l’optimisation des images est donc la suivante : régler la qualité de la compression des images entre 60 et 80%.

Une exception doit être appliquée si les images contiennent des textes, comme par exemple les logos, car une compression trop importante rend difficile la lecture. Dans ce cas un taux de compression supérieur à 90% est souhaitable.

Les outils pour le traitement des images

Les outils pour traiter les images sont nombreux, gratuits et payants. Certains offrent des fonctionnalités de base, le plus souvent bien suffisantes, et d’autres permettent des traitements complexes de retouche et de créativité. Je présente ici quelques solutions simples et gratuites qui me semblent pertinentes et simples d’utilisation.

Outils en ligne

De nombreux outils en ligne permettent de redimensionner rapidement une image. Certains d’entre eux proposent d’autres fonctions de traitement, comme la suppression des yeux rouges, ou des réglages de luminosité, de contraste, des couleurs.

Je retiens ce site : http://resizeyourimage.com/FR
En plus de redimensionner l’image on peut choisir le taux de compression.

Gimp : un outil Open Source polyvalent

Gimp est un logiciel Open Source de retouche et de traitement d’images. Il est disponible pour toutes les plate-formes et ses possibilités sont très évoluées. On trouve des livres qui lui sont dédiés, et la documentation en ligne est importante.

Plus d’informations et téléchargement : http://www.gimpfr.org

Je présente ici un petit tutoriel pour le redimensionnement d’une image.

Lancer Gimp et ouvrir le fichier à traiter

Menu « Image / Échelle et taille de l’image »

Vérifier que l’option pour le maintien des proportions est activée

Régler la largeur souhaitée (la hauteur est modifiée automatiquement)

Cliquer sur « Échelle » pour valider

Menu « Fichier / Exporter comme » … nommer le fichier avec l’extension .jpg

Cliquer sur « Exporter »… choisir la qualité (80% conseillé) et valider

Bonus : optimiser la luminosité et le contraste

Avant l’enregistrement de l’image modifiée, un réglage très simple permet d’optimiser l’affichage de l’image concernant la luminosité et le contraste. Cela permet de corriger les possibles sur ou sous-expositions de la photo.

Menu « Couleurs / Courbes… »

Ajuster la diagonale pour que les extrémités correspondent à la zone non vide du graphique