Optimiser les images pour l`affichage sur votre site

Transcription

Optimiser les images pour l'affichage sur votre site Olivier Duteille - UPPA CRATICE - [email protected] -
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)
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 e-mail. Par exemple, au lieu d’envoyer par
e-mail 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)
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.
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 2 750 Ko, équivalent à plus de 2 Mo).
2- Cliquez droit sur
vers »/ « destinataire »
les
images
sélectionnées
et
choisissez
« envoyer
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.
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).
II.2/ Cas n°2 : Compression des images par lot avec le logiciel
PhotoPhiltre (licence : gratuit)
Téléchargement : http://telecharger.01net.com/windows/Multimedia/photo_numerique/fiches/
21756.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.
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 : http://www.ime-jeanperrin.infini.fr/article.php?id_article=203
Site officiel : http://photofiltre.free.fr/

Optimiser les images pour l`affichage sur votre site

Transcription

Documents pareils

Chap 6 Introduction - Sciences appliquées

Les formats graphiques

RETRAVAILLER UNE PHOTO avec MS PAINT

les formats d`images

Formats fichiers

Réduction de la taille d`un Gif animé par l`exemple

Dossier d`inscription du Gif HBC

GIF AUTO - RETRO AMERICAN DAY III www.gifamericanday.fr

Tutoriel les formats courants d`images BMP (BitMaP) : Le format

Athéna