Optimiser les images pour l affichage sur votre site

Transcription

1 Optimiser les images pour l affichage sur votre site Table des matières Introduction : Pourquoi compresser une image?...1 I/ Les différents types de compression d images...1 I.I / Le format GIF...2 I.2 / Le format JPEG...2 I.3 / Le format PNG...3 II/ Méthodologie pour la compression des images : cas pratiques sur Windows...4 II.1/ Cas n 1 : Compression des images par lot avec Windows Xp...4 II.2/ Cas n 2 : Compression des images par lot avec le logiciel PhotoPhiltre (licence : gratuit)...7 Compresser une image Introduction : Pourquoi compresser une image? Les navigateurs web ne peuvent lire qu un nombre très limité de formats de fichier image : il s agit des formats.gif,.jpg et.png. Or, il existe de nombreux formats pour enregistrer des images. Les plus courants sont le format BMP et le format TIF. Ils proposent une très grande qualité mais sont gourmands en Kilo-octets. Si vous disposez d une image au format.bmp (bitmap) ou.tif et que vous souhaitez faire apparaître cette image sur votre page web, vous devrez nécessairement la compresser, c està-dire l enregistrer à un format différent du format.bmp afin qu elle puisse être lue par un navigateur internet mais aussi afin de gagner en légèreté (de réduire le poids de ce fichier en Kilo-octets ou Ko). Perte de qualité : Le passage à un format compressé s accompagnera inévitablement d une perte de qualité de l image. On effectuera d abord tous les travaux de retouches ou de transformation avec un format non compressé et c est après toutes ces modifications que l on enregistrera l image à un format adapté pour la web (gif, jpg ou png). Note : Tous les logiciels de traitement d image (type Photoshop etc ) offrent la possibilité de compresser une image via la commande «Enregistrer sous» ou «Enregistrer pour le web» ou «Exporter». I/ Les différents types de compression d images Les fichiers images sont très souvent de grande taille (il s agit là du «poids» du fichier), ce qui les rend impropres à l utilisation dans une page web car la vitesse de chargement serait trop longue (imaginez le temps qu il faudrait à une image quelconque de 10 Mo téléchargée à une vitesse normale de connexion de 3 à 4 Ko/seconde...). On s est donc efforcé très vite d utiliser des formats de fichiers images conduisant à des fichiers de taille réduite. Pour ce faire, on a utilisé différentes méthodes basées sur la compression des données à transmettre. D une façon générale, on peut classer ces méthodes en 2 grandes catégories : La compression sans perte de données (déconseillée pour un usage sur internet)

2 La compression avec perte de données qui permet d obtenir d excellents résultats mais qui entraîne inévitablement une altération des données d origine. Attention! Vous avez sans doute entendu parler de la compression de fichiers, en général réalisable grâce au logiciel Winzip, 7zip ou WinRaR (sur PC) ou Stuffit Expander (sur Mac). Ces logiciels servent essentiellement à grouper un certain nombre de fichiers dans un dossier compressé, généralement en vue de leur envoi par . Par exemple, au lieu d envoyer par un fichier de 45 Ko + un fichier de 100 Ko + un fichier de 200 Ko (au total 345 Ko), Winzip ou Stuffit Expander vous permettent de grouper ces trois fichiers en un seul dossier qui compressera le poids des trois fichiers. Au final vous enverrez un seul fichier qui pèsera moins de 345 Ko au lieu d avoir à envoyer les 3 fichiers. Cette compression (.zip) n a rien à voir avec la compression d images en vue de les utiliser sur internet! Ces 2 méthodologies sont indistinctement utilisées dans la compression des fichiers d images pour le Web et déterminent à elle seules la nature des formats les plus courants du Web : les formats GIF et JPEG. I.I / Le format GIF Le format GIF (Graphic Interchange Format) a été conçu spécifiquement par CompuServe vers la fin 1980 pour la diffusion en ligne. Il est devenu depuis un des grands standards de l image destinée au Web. Toute image au format GIF est nécessairement une image dite «indexée», c est-à-dire qu à chaque image GIF correspond une palette de couleurs dont le nombre sera inférieur ou égal à 256. Le GIF existe en 2 versions différentes : GIF87a et GIF89a. La première accepte l entrelacement ; la seconde y ajoute la transparence et l animation. La transparence permet d enregistrer une image en conservant des zones de transparence. Quant à l animation, vous avez sans doute entendu parler des gifs animés : il s agit d un fichier image où l image n est pas fixe mais où elle change en fonction du temps. La création des GIF animés est de l ordre de logiciels plus spécifiques comme Animation Shop, GIF animator ou encore Image Ready d'adobe. Les options d entrelacement et de transparence sont maintenant courantes dans les logiciels de retouche photographique et/ou de graphisme. De façon générale, on utilisera le GIF pour tout ce qui est de l ordre du graphique et du dessin. Autrement dit, toute image qui ne contient peu ou pas de dégradés de couleur. I.2 / Le format JPEG Contrairement au gif, le JPEG (pour Joint Photographic Expert Group) est en milliers ou en millions de couleurs. Il utilise une compression avec perte de données et son utilisation entraîne inévitablement une altération de l image d origine. On peut remédier (en partie) à ce phénomène en utilisant un taux de compression variable (faible, moyen, fort...) et régler ainsi la qualité de l image obtenue en fonction de son utilisation, ce qui vous amènera inévitablement au compromis récurrent de tous les webmasters : celui entre la qualité et le poids de l image. Si vous souhaitez que votre image jpg soit de bonne qualité, il vous est recommandé de choisir un taux de compression faible. Inversement, si vous n avez pas besoin que cette image soit d excellente qualité, il vous est recommandé de choisir un taux de compression moyen ou fort. Contrairement au GIF, le JPEG ne permet ni la transparence ni l animation mais il autorise un affichage progressif de l image (on parle alors de JPEG progressif)

3 I.3 / Le format PNG Apparu plus récemment que les 2 autres, le PNG (Portable Network Graphics) a timidement fait son apparition dans les pages web et il commence à être pris en compte par les principaux navigateurs du marché. PNG exploite une méthode de compression sans perte de données. Il permet ainsi de conserver tous les détails d une image sans aucune perdition de qualité et se rapproche du GIF dans ce sens. En outre, l opération de compression s effectue avec un excellent rendement et se rapproche ainsi du JPEG. Le PNG autorise l entrelacement et la transparence mais il ne permet pas l animation. Il est aujourd hui souvent conseillé d utiliser le PNG, surtout parce que des rumeurs circulent sur le fait que Compuserve souhaiterait rendre le format GIF payant. Cela dit, l utilisation du format GIF est tellement universelle, que l application d une telle exigence paraît difficile. Extrait du dossier réalisé par : Avec le soutien de la Commission européenne Nous allons voir maintenant techniquement quelles sont les solutions pour compresser des images.

4 II/ Méthodologie pour la compression des images : cas pratiques sur Windows Nb : Ces cas pratiques sont réalisés avec le système d'exploitation Windows Xp. L'objectif de ces cas pratiques étant de faciliter la manipulation de compression des images par l'utilisateur néophyte et surtout de lui permettre de gagner un temps précieux pour le traitement des images par lots. II.1/ Cas n 1 : Compression des images par lot avec Windows Xp /!\ Important : Cliquer sur les images des copies écran afin de les agrandir 1- Sélectionnez les images à compresser dans l'explorateur Windows Nb : Comme vous pouvez le constater les images sélectionnées sont des images de grandes tailles (2812 pixels de large et 2112 pixels de hauteur) et ont un poids dépassement le Méga octet (plus de Ko, équivalent à plus de 2 Mo). 2- Cliquez droit sur vers»/ «destinataire» les images sélectionnées et choisissez «envoyer

5 3- Par défaut, une boite de dialogue s'ouvre et vous propose de réduire les images avant de les envoyer. Cliquez sur «OK». 4- Votre boite aux lettres électronique (que vous avez paramétré par défaut) va s'ouvrir en mettant en pièce jointe les images sélectionnées et compressées.

6 5- Envoyez-vous ce message, ouvrez-le et enregistrez les photos. Avec, par exemple, le client de messagerie «Mozilla Tunderbird», vous pouvez récupérer toutes les photos en cliquant sur «Fichier»/ «Pièces jointes»/ «Tout enregistrer» Une boite de dialogue s'ouvre vous proposant d'enregistrer les images sur votre poste de travail. Choisissez un emplacement et validez. 6/ Les photos sont bien enregistrées à des formats de compression vous permettant leur mise en ligne (voir copie écran : les photos ne font plus qu'une dimension de 360x480 H/L et ont un poids adapté pour le Web variant entre 50 et 100 ko).

7 II.2/ Cas n 2 : Compression des images par lot avec le logiciel PhotoPhiltre (licence : gratuit) Téléchargement : html Photofiltre permet le traitement automatique d une série de photos. Vous avez par exemple un dossier intitulé "mes photos" qui regroupe des clichés issus de votre appareil numérique, et que vous souhaitez faire passer sur le site. Il va sans dire qu il est indispensable d en réduire taille et "poids" pour en optimiser l affichage. Vous allez donc avant même de lancer Photofiltre créer un dossier que vous nommerez "retouches" par exemple. Vous lancez alors Photofiltre et suivez les manips ci-dessous.

8

9 Il sera sans doute nécessaire de procéder à plusieurs essais pour trouver le meilleur compromis qualité/poids de fichier. Cette méthode est intéressante pour un bon dégrossissage du travail. Il va de soi que les travaux de retouche, de recadrage et autres doivent se faire ensuite photo par photo, et qu'ensuite on peut encore au moment de l enregistrement définitif gagner un peu de poids sur chaque fichier destiné à être affiché sur le site. On se référera aussi à l article sur la réduction du poids des photos Sources : Site officiel :