Tutoriel Images pour le web

Préparer ses photos pour le web en 4 étapes fondamentales sous
Photofiltre (version standalone, executable)1
Intro :
Une image est composée de pixels qui assurent sa définition. Plus ils sont nombreux, plus
fine est l'image mais aussi, plus lourde est l'image. Une photo qui sort d'un appareil photo
peut par exemple faire 3000 px sur 2000px et peser 1.5mo.
Rapportée à la taille d'un écran de base 800x600px, cette image étant trop grande va
générer des ascenseurs peu ergonomiques et ne sera pas visible d'un coup d'oeil.
Son poids de plus est incompatible avec un débit web. Une connexion adsl 1mega offre
un débit de chargement de 120 ko/s environ. Il faudra donc plus de 10 secondes pour
la charger . Pour peu qu'il y ait de nombreuses images sur la page, celle ci devient très
longue à charger.
Enfin, une image ne peut être insérée dans une page web en lecture si elle n'est pas
enregistrée dans un format compatible avec les navigateurs. Ceux-ci sont les suivants
: png, gif, jpeg.
NB: pour les navigateurs éclairés tels Firefox et répondant aux normes du W3C, le SVG est
lu.
Quelle différence entre ces 3 formats ?
png
gif
jpeg
format
libre
propriétaire
pas établi clairement
http://www.zdnet.fr/actu
alites/informatique/0,39
040745,39150344,00.ht
m
gestion de la
transparence
oui
parfaite (sur ne
nombreuses couches)
oui
sur une couche
non
compression
oui , non destructive
oui
mais moins
destructive !
performante que le jpeg
oui, gère 16 millions de
couleur et très for
rendement adapté à la
vision sur ecran
quel type d'image
croquis, schéma, photo
avec transparences...
croquis
photos tout projet ne
nécessitant pas de
transparence.
divers
format d'avenir dont IE
peine à comprendre le
langage (IE remplace
les transparences pr
des zones grisées)
format du passé bien
interprété par IE
arrivée du Jpg2 sur
certains logiciels, très
puissant dans la
compression.
Tableau 1.: les formats image du web
1 Ces étapes peuvent évidemment être réalisées sous n'importe quel logiciel de retouche d'image
Sylvie Lallet DU Aptice/ iufm FCE
04/10/06
/home/sylvie/iufm/spip/documents/photofiltre.odt
1/5
Etape 1 : Cadrer le regard du visiteur.
Pour éviter de devoir compresser plus que nécessaire, il est judicieux de retirer
l'information inutile sur la photo. Nous allons rogner l'image pour canaliser le regard du
visiteur.
➔ Ouvrez
la photo à travailler (Fichier > ouvrir>chemin de la photo) ou déplacez la
photo de l'explorateur vers photofiltre en drag and drop.2
➔ Avec
un simple clic , sans relâcher la souris encadrez la zone que vous souhaitez
conserver (sélection).Relâcher lorsque votre sélection est terminée.
➔ Un
clic droit sur la sélection permet d'accéder au menu contextuel et de rogner
l'image, donc de limiter l'affichage à la sélection sans modifier la définition de l'image
: la qualité reste identique à l'originale. Notez la taille de la photo d'origine dans
la barre d'état du logiciel (3008x2000x 16M).il s'agit des pixels et de l'information sur
2 il est plus prudent d'enregistrer de suite cette image sous un autre nom pour éviter toute
destruction de l'original. Dans ce cas, pensez à enregistrer votre image avec un extension non
destructive (tiff par ex).
Sylvie Lallet DU Aptice/ iufm FCE
04/10/06
/home/sylvie/iufm/spip/documents/photofiltre.odt
2/5
l'échantillonnage de la photo en millions de couleurs).
Notez la nouvelle taille de l'image dans la barre d'état du logiciel;
Etape2 : adapter la taille à la page web qui va recevoir cette image.
Dans le cas d'un site eva, la largeur maximum de la page a été fixée à 800 pixels .
L'ascenseur du navigateur prend lui 50 pixels sur l'affichage. Le menu latéral
prend 150 pixels de large. Il nous reste donc au maximum 600 pixels disponibles pour
cette insertion. Mais si nous les utilisons, la page sera peu aérée car la photo collera au
menu et à l'ascenseur. 500 pixels de large seront donc un maximum.
De plus si nous voulons que cette image flotte à gauche ou à droite de l'éventuel texte
qu'elle supporte, il nous faudra au moins laisser 250 pixels de large sur son coté.
Dans notre exemple, nous centrerons notre photo dans notre page web, nous la réduirons à
450 pixels. Attention, il ne s'agit pas d'une opération de rognage. le logiciel va donc
opérer de manière destructive pour réduire cette image. Cette opération est
irréversible. une fois l'information perdue, vous ne la récupérerez pas. si vous agrandissez
cette image réduite, le logiciel procédera par extrapolation et créera des pixels fictifs en
fonction des couleurs globales des zones de la photo.
➔ Cliquez
droit sur la photo
➔ Validez
le choix : taille de l'image
➔ Paramétrez
la taille en largeur grâce à la boite de dialogue (la hauteur sera
proportionnelle et la molette de souris permet de naviguer avec ergonomie en
hauteur).
Sylvie Lallet DU Aptice/ iufm FCE
04/10/06
/home/sylvie/iufm/spip/documents/photofiltre.odt
3/5
Etape 3 : Enregistrez l'image dans un format compatible avec le web tant au
plan du poids que de l'extension.
Nous ne recherchons pas de transparence; Nous disposons d'une photo; Nous allons donc
choisir l'extension jpeg.
Lors de la validation, une boite de dialogue apparaît avec un curseur pour régler le
taux de compression. En cliquant sur aperçu, nous voyons le poids que la photo aura
après compression et pouvons tester. Rappel : pour toucher tous les surfeurs, y compris
ceux qui arrivent avec une connexion à bas débit, 20 ko sont un maximum.
Sylvie Lallet DU Aptice/ iufm FCE
04/10/06
/home/sylvie/iufm/spip/documents/photofiltre.odt
4/5
Vola votre image est recadrée, à la bonne taille pour votre page web, et pèse
dorénavant 30 ko alors qu'elle en faisait 1,5mo.
Attention : si l'affichage de cette image est tout à fait satisfaisant à l'écran, il sera piteux
sur papier. La compression lui aura été néfaste. Si vous le souhaitez, offrez votre original en
téléchargement mais pas à l'affichage.
La dernière étape consiste à télécharger votre image sur votre site, à la nommer et à
l'insérer dans votre page sous forme <imgxx|center> par exemple.(voir le tutoriel spip)
Document sous licence creative common.
http://creativecommons.org/licenses/by-nc-sa/2.0/fr/
Réalisé avec :OpenOfficeOrg logiciel libre, gratuit, performant.
Sylvie Lallet DU Aptice/ iufm FCE
04/10/06
/home/sylvie/iufm/spip/documents/photofiltre.odt
5/5