Préparer ses photos pour le web en 4 étapes fondamentales sous Photofiltre (version standalone, executable) 1

Transcription

1 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 alites/informatique/0, , ,00.ht m gestion de la transparence compression quel type d'image divers parfaite (sur ne nombreuses couches), non destructive mais moins performante que le jpeg croquis, schéma, photo avec transparences... format d'avenir dont IE peine à comprendre le langage (IE remplace les transparences pr des zones grisées) Tableau 1.: les formats image du web sur une couche destructive! croquis format du passé bien interprété par IE non, gère 16 millions de couleur et très for rendement adapté à la vision sur ecran photos tout projet ne nécessitant pas de transparence. arrivée du Jpg2 sur certains logiciels, très puissant dans la compression. 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 1/5

2 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 2/5

3 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 3/5

4 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 4/5

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. Réalisé avec :OpenOfficeOrg logiciel libre, gratuit, performant. Sylvie Lallet DU Aptice/ iufm FCE 04/10/06 5/5