skip to Main Content
JPG, PNG, GIF ? Comprendre Une Fois Pour Toute Les Images Pour Le Web Et Comment Les Traiter !

Comme on dit communément, « Une image vaut mille mots ». Et ce n’est pas moi qui vais vous dire le contraire ! En effet, illustrer un site avec des images, c’est plus qu’une bonne idée ! Qu’elles servent simplement d’illustration ou qu’elle représente le fruit de votre travail, votre site n’en sera que plus agréable à parcourir.

En revanche, il est certain qu’à notre époque, votre visiteur est de moins en moins patient, et si votre page prend trop de temps à charger, il constatera assez rapidement que votre site ne fonctionne pas bien, et ira rapidement voir ailleurs, compte tenu de la compétition qu’il y a sur la toile. Aussi, votre visiteur le plus sensible sera certainement Google, car son algorithme scrute la qualité des sites web et il enverra le vôtre au fin fond de son moteur de recherche, si la qualité n’est pas au rendez-vous, puisqu’il cherche à offrir à ses utilisateurs la meilleure expérience web possible !

Or, bien souvent, lorsqu’on m’appelle pour régler des problèmes de lenteur de sites, une des raisons principales est que les images n’ont pas été traitées correctement. Bien souvent, elles ont été insérées telles qu’elles sont sorties de l’appareil photo ou de la banque d’image, sans égard à leur taille, leur format ou leur compression.

Alors je vous propose ici de vous expliquer le vocabulaire et de vous donner les notions de base et les outils nécessaires qui vous permettront d’optimiser vos images comme des pros, sans toutefois entrer dans des détails techniques superflus qui je suis sûr, ne vous aideront pas plus.

Tout d’abord, les types de fichiers (si vous connaissez déjà ça, passez cette section et allez voir plus bas !):

Sur le web, qu’il s’agisse d’un site WordPress, Drupal, Joomla, HTML ou quoi ou qu’est-ce, la règle est la même et se limite à 3 grandes catégories d’image:

 

JPG-PNG-GIF

 

Alors quand et pourquoi utilise-t-on tel ou tel format ?

JPG (JPEG)

Le format le plus communément utilisé pour toute image standard est le JPG. C’est un format qui permet de compresser considérablement les images sans trop les altérer, dans la mesure où l’on les sauvegarde avec une compression de 8, ce qui équivaut pour certains logiciels à « Qualité: Élevé » ou encore 60.

Définition:

« Format de fichier graphique permettant des taux de compres­sion impres­sion­nants, mais au détri­ment de la qualité de l’image : la compres­sion se fait avec perte d’in­for­ma­tion. L’ex­ten­sion de fichier corres­pon­dante est JPG. Ce format ne supporte pas la trans­pa­rence contrai­re­ment au GIF et au PNG ».

PNG

Le format PNG est non destructeur, et offre 9 niveaux de compression à l’image. Néanmoins, on l’utilise généralement lorsque l’on souhaite avoir des transparences dans l’image, bien souvent pour des logos, ou par exemple lorsque l’on souhaite afficher une image sur un fond en particulier, sans avoir forcément un cadre rectangulaire ou carré autour de l’image.

 

png-exemple

 

Définition:

« Le terme PNG, qui est l’acronyme de Portable Network Graphics, désigne un format d’image libre de droits, optimisés pour l’affichage à l’écran (et particulièrement pour le web), développé afin de proposer une alternative libre au format GIF (format propriétaire).

À la différence d’autres formats, tels que le format JPG, le format PNG est dit « non destructeur », c’est-à-dire qu’il ne provoque pas de dégradation de l’image. PNG utilise jusqu’à 9 niveaux de compression. Une autre de ses spécificités est de gérer la transparence (ce qui explique qu’il est employé dans les pages HTML pour créer des effets de superpositions d’images).

À la différence du format GIF, le format PNG ne peut pas afficher des images animées. »

GIF

Le format GIF, quant à lui, possède les mêmes propriétés que le PNG, dans la mesure où il accepte les transparences. En revanche, il est beaucoup plus destructeur puisque sa palette de couleur se limite à 256 tonalités, alors que le PNG peut en gérer jusqu’à 16 millions. Mais, si parfois on est bien content de pouvoir l’utiliser, c’est lorsque l’on veut qu’une image soit animée. Certes, ça n’arrive pas souvent, en fait de moins en moins, mais il vaut mieux alors connaitre son existence lorsque le besoin s’en fait sentir !

 

 

Définition:

« Exten­sion corres­pon­dant à un format d’image très utilisé qui permet un bon affi­chage, mais qui est limité à 256 couleurs. Il utilise une tech­nique de compres­sion sans perte et permet l’uti­li­sa­tion de couleurs trans­pa­rentes. Il est couram­ment utilisé pour les barres d’ou­tils et les icônes et convient mieux que le format JPEG pour obte­nir des images nettes ». « Le GIF animé est un fichier GIF compre­nant plusieurs images qui permettent d’ob­te­nir une anima­tion par affi­chages succes­sifs en boucle. Le nombre de répé­ti­tions de la boucle peut être limité pour éviter un phéno­mène d’ir­ri­ta­tion de l’in­ter­naute. Le GIF animé fut le premier format graphique utilisé pour la créa­tion d’ani­ma­tions visuelles dans le domaine de la publi­cité Inter­net ».

Voilà donc le minimum qu’il y a à savoir concernant les différents formats d’images pour le web!

 

Maintenant, il reste à comprendre ce qui fait qu’une image est trop lourde ou, disons, non-optimisée. Alors, ne lâchez pas, c’est la partie la plus importante de cet article !

Pour traiter les images, il existe différents outils, dont le choix dépend de la quantité d’images, des moyens et du temps que vous souhaitez y consacrer:

  • LES LOGICIELS
  • LES SITES DE TRAITEMENT EN LIGNE
  • LES PLUG-INS WORDPRESS

Tout d’abord, un peu de technique, car, il y a 2 choses essentielles à comprendre:

Les 2 paramètres qui influent sur le poids d’une image sont:

  • SA TAILLE
  • SA COMPRESSION

 

1- COMPRENDRE LA TAILLE D’UNE IMAGE DANS LE MONDE DU WEB.

Dans le merveilleux monde du web, quand on parle de la taille d’une image, l’unité est le pixel (px) ! Bien souvent, les gens parlent en dpi, en cm ou en pouces … autant de concept qui sont étrangers aux navigateurs.

C’est facile à comprendre: Votre écran d’ordinateur lit des pixels et donc, la taille de votre écran se mesure en pixels également.

Supposons qu’il fasse 1400px de large par 900px de haut. Et bien si vous intégrez une image qui fait 1000px de large, elle couvrira presque tout votre écran. Vous saisissez ? Par conséquent, lorsque vous avez pris une photo avec votre super Canon Rebel XXX et que vous avez exporté votre image qui mesure 3500 pixels pour l’intégrer sur votre site web ÇA NE SERT À RIEN !… sauf alourdir le temps de chargement de votre page ?

Il faut donc, avant d’insérer une image dans un site, s’assurer que sa taille ne dépasse pas celle d’un écran moyen. Pour ma part, je trouve qu’une taille de 1000px de large pour une photo horizontale est généralement suffisante.

 

2- COMPRENDRE LA COMPRESSION.

Lorsque l’on compresse une image en format JPG, on altère aussi sa qualité, à savoir les dégradés et les nuances de couleurs. Alors l’idée est de trouver le bon taux de compression pour trouver le meilleur rapport poids / qualité. On peut aussi l’alléger en la débarrassant d’informations inutiles (qu’il s’agisse de prévisualisation, de données exif ).

 Alors voici les solutions disponibles pour aboutir à des images optimisées

Choisir le bon taux de compression est donc la recette du succès.

Pour compresser un jpg, on peut utiliser différents logiciels. Les professionnels utilisent en général Photoshop. Mais là encore, attention, car dans Photoshop, on peut sauvegarder des jpg de 2 manières différentes: Il y a « Enregistrer sous … » (Save as … ») et « Enregistrer pour le web … » (« Save for web … ») Les mots parlent d’eux même: Si c’est pour du web, utilisez « Enregistrer pour le web … » (« Save for web … ») et appliquez une compression de qualité « haute » qui correspond à un facteur de 60. Ainsi, votre image se retrouvera vierge de toute information superflue, ce qui la rendra d’autant plus légère. Ce taux de compression est tout à fait acceptable, pour son rapport diminution de poids / qualité de l’image.

Évidemment, vous allez me dire que tout le monde n’est pas un pro de l’image, et que posséder Photoshop est très loin dans votre liste de priorité !

Soit, tout le monde ne souhaite pas mettre le nez dans Photoshop. Mais que vous soyez sur Mac ou PC, il existe plein de petits logiciels qui feront l’affaire et qui sont bien souvent plus faciles à manipuler. Il vous suffira alors de s’assurer que l’image possède une taille en pixels convenable, et de la sauvegarder dans le bon format et de la bonne manière. L’avantage de cette méthode est de pouvoir gérer les 2 facteurs importants en série, c’est-à-dire la taille de l’image et son taux de compression.

Pour réduire la dimension de vos images, je vous conseille PICRESIZE.COM ou RESIZEMYIMG.COM, car ils offrent la possibilité de le faire en « batch », c’est-à-dire de retailler plusieurs images d’un seul coup ! Leurs interface est des plus simple et intuitive. De plus, les images pourront sortir compressée, selon différents niveaux de base.

Pour réellement optimiser le poids de vos images, la plateforme en ligne OPTIMIZILLA.COM vous permet de traiter jusqu’à 20 images simultanément, avec un excellent taux de compression vs détérioration. Très simple d’utilisation également !

Il en existe plusieurs, les 2 principaux étant: EWWW IMAGE OPTIMIZER et WP SMUSH IT

Pour ma part, j’affectionne plus particulièrement WP SMUSH IT, mais les 2 sont bien réputés.

SMUSH IT, dans sa version gratuite, vous permet quand même de traiter toute image de votre bibliothèque WordPress qui soit inférieure à 1Mb, en les réduisant très convenablement. Mais attention, si vous avez importé une image trop grande, ou peu compressée  à l’avance, ce plug-in l’ignorera … dans sa version gratuite. Sinon, il faudra débourser des $$$. Autre avantage de ce genre de plug-in, vous pouvez traiter les images globalement ou individuellement. Et la cerise sur le sundae, c’est qu’à chaque fois que vous importerez une image convenablement préparée, elle sera optimisée à son téléchargement. Pour ces raisons, j’installe maintenant systématiquement ce plug-in sur les sites de mes clients !

Besoin d’un coup de main avec votre site WordPress ?

Back To Top