Redimensionner les images

Formateurs, communicants, ou particuliers, à un moment ou un autre nous sommes tous un jour ou l’autre confrontés au besoin d’obtenir une image devant respecter des dimensions précises et un poids limite à ne pas dépasser, pour mise en place sur un site, une plateforme, une application …. Pas toujours simple….

L’originale

Une image / photo se caractérise par :
•    Son format ou extension de fichier (JPG, JPEG, GIF, PNG, WEBP, TIFF, …..)
•    Son poids informatique (octets) en Ko, Mo, Go
•    Sa résolution : nombre de points couvrant une surface de 1 pouce x 1 pouce, exprimée en pixels/pouce ou DPI (Dots Per Inch). Une image de qualité propre à l’impression (issue d’un appareil photo par ex.) aura une résolution de 300 dpi, une image adaptée au seul affichage écran aura une résolution de 72 dpi.
•    Ses dimensions d’impression (cm ou mm)
•    Ses dimensions d’affichage écran en pixels, c’est généralement ce que l’on vous demande de respecter.

Toutes ces caractéristiques sont accessibles avec un logiciel de retouche d’image ou tout simplement par un clic droit / propriétés sur un fichier image.

Exemple pour le bandeau de cet article

La plateforme demande : 
•    Formats acceptés : gif, jpeg, png et svg. 
•    Taille maximale : 250 Ko. 
•    Dimensions recommandées (largeur x hauteur) : 1100 x 275 pixels

Note : L’utilisation finale étant l’affichage écran elle devra avoir une résolution limitée à 72 px/pouce, pourquoi ? déjà même avec une résolution plus grande un écran ne restituera que 72 px/pouce (96 en Retina Mac) donc inutile de faire plus, car plus il y a de px/pouce plus c’est lourd.

• Le jpg = jpeg (qui sera le format choisi en priorité) 
  - Avantages : palette de millions de couleurs, taux de compression réglable pour affiner le poids.
  - Inconvénients : pas de transparence possible
• Le gif et le png (8 bits)  
  - Avantages : idéal pour des logos ou aplats de couleurs, transparence possible, animation (pour le gif)
  - inconvénients : poids + lourd que le jpg, palette de couleur limitée à 256 couleurs seulement, en théorie brevet sur le format gif (non libre donc), transparence imparfaite au niveau des contours.
• Le png (24 bits)
  - Avantages : palette de millions de couleurs, transparence parfaite
  - Inconvénients : poids important, privilégier uniquement pour les logos ou besoins de transparence

Le format final ne sera pas forcément celui d’origine, on le choisit généralement depuis l’outil utilisé pour recadrer / alléger l’original au moment de l’export / enregistrement.

Exemple je récupère une belle image libre de droits qui se nomme « corporate.jpg » qui pèse 647 Ko et mesure 2400 x 1602 px.
Elle ne doit pas être plus petite que les dimensions requises, c’est OK, par contre elle est trop grande et trop lourde.

Si je la redimensionne en largeur à 1100 px comme nécessaire, sa hauteur naturelle (homothétique)  passe à 734 px, c’est trop grand, au lieu de simplement la redimensionner je vais devoir en plus la recadrer (imposer largeur ET hauteur).

Pour cela il faut utiliser un logiciel de retouche d’image ou plus simplement un outil gratuit en ligne qui propose ce genre de fonctionnalité.

Exemple : 
-    Ouvrir votre image depuis https://pixlr.com/fr/e/  (ressemble à Photoshop)
-    Prendre l’outil recadrage (touche clavier c)
-    Au-dessus de l’image cliquer sur TAILLE et en W indiquer largeur et hauteur requises en haut (1100 et 275)
-    Avec la souris sélectionner la partie de l’image à conserver, Entrée
-    Fichier / Sauvegarder
-    Format JPG - Qualité « Moyen », sous la vignette s’affiche le poids final, vérifier si suffisamment petit
-    « Enregistrer sous » pour récupérer une copie redimensionnée.
Et voilà.

En cas d’image originale déjà à la bonne taille mais simplement trop lourde : https://tinypng.com/

Ces astuces font partie des aspects abordés dans mes formations web proposées sur Competens.net

A vos images !