Si vous souhaitez optimiser votre référencement, n'hésitez pas à donner à vos images des noms à rallonge.

Transcription

1 LE POIDS DES PHOTOS Il est important de donner un nom correct à toutes les images que vous utilisé pour constituer des galeries d'images. Si vous laissez le nom de fichier tel que vous le propose votre appareil photo, vous serez référencé dans les moteurs de recherches sur des mots qui ne correspondent à rien (genre "pic00005"). Si vous souhaitez optimiser votre référencement, n'hésitez pas à donner à vos images des noms à rallonge. Une photos d'un lapin bleu sur le sable devra être nommée "lapin-bleusur-le-sable.jpg" par exemple. Comment optimiser une image pour le WEB? Quelques conseils Le problème : Pour le web les images doivent être aussi petites que possible. Si la page charge trop lentement, les usagers se lassent et passent ailleurs. Taille de l'image Si l'image doit être visualisée à l'écran elle doit avoir une résolution de 72 dpi. Sa taille totale doit être adaptée à la visualisation dans une page. (Rarement plus de 500 pixels de large, 400 pixels de haut.) On peut donc scanner à taille réduite ou rogner ou redimensionner l'image mais il est préférable de scanner à la bonne dimension.

2 Choix du GIF ou du JPEG : A choisir si : A éviter si : Remarques : GIF Si il y a du texte dans l'image Si il y a des surfaces de même couleur (logos, icônes, schémas,...) Rarement mauvais. C'est le format à employer en cas de doute. Si l'image doit être redimensionnée, c'est lamentable; particulièrement pour des images tramées (Dither) Pas très bon pour les photos max 256 couleurs. La compression se fait sur les zones de même couleur (ou trame), et sur la réduction du nombre de couleurs. Attention, si on trame (diffusion) pour réduire le nombre de couleurs, on ne peut plus guère compresser puisqu'il n'y a plus de pixels successifs de même couleur. Pour des captures d'écran par exemple, on peut envisager de passer l'image en gris parfois et de réduire à 4 niveaux. Pour réduire la taille d'un GIF: JPEG Pour les photos Si il y a des dégradés fins. Si on veut compresser très fort une image. Si il y a du texte : les lettres perdent de leur piqué et sont mal lisibles. Peu intéressant si l'image est en 256, et à fortiori en 16 ou 4 couleurs. Forcément en millions de couleurs. Inutile de se priver sur ce plan-là. Pour paramétrer le facteur de compression, observer les bords très contrastés : des sortes d'écho du bord sont un signe qu'on a été trop loin; on voit aussi apparaître des gros carrés dans les dégradés. Réduire le nombre de couleurs : On peut souvent gagner du poids en réduisant le nombre de couleurs. Souvent le rendu gagne à activer la conversion avec pixellisation (ou tramage stochastique ou diffusion), mais la compression est alors moins efficace. Si on n'active pas cette fonction des zones de couleur (effet de lèpre) disgracieuses apparaissent, mais la compression est plus forte et l'image plus "light" Comparatif de réductions avec un GIF Pour réduire la taille d'un JPEG: Réduire le facteur de qualité : On choisit le degré de compression : plus la compression est forte et l'image "light" plus la qualité devient discutable en particulier dans les zones de fort contraste, les bords, etc. Comparatif de réductions avec un JPEG En Résumé : Choisir le JPEG pour les photos : une valeur de 30% est assez typique. Pour les GIF, limiter le nombre de couleurs au minimum nécessaire. 16 suffit parfois.

3 (Graphic Converter (Mac) ou Paintshop Pro (PC) font un très bon job ici : Shareware tous les 2) Voir aussi la page sur les images du club internet Voir aussi pour comprendre la trame et les niveaux. Voir aussi la page d'un participant du cours : comparatif la même image en GIF et JPEG à divers niveaux de compression. N.B: Penser à changer les liens qui s'y réfèrent si on renomme un fichier Scanner, détramer, optimiser, graver... Le vendredi 12 mars Que ce soit pour une destination "print" (papier) ou Web, nous avons souvent à scanner, optimiser et diffuser des images. Tout comme pour le traitement de texte, nous utilisons en général notre scanner et notre logiciel graphique à moins de 50% de ses capacités. Quelques conseils pour augmenter ce pourcentage. Pour scanner, mieux vaut partir de son logiciel graphique. On peut également utiliser directement son scanner... pour ouvrir ensuite son logiciel de dessin/retouche d image, car une image scannée, c est bien, mais retaillée aux dimensions voulues et optimisée (dont le poids a été allégée au maximum sans "trop" nuire à la qualité)... c est plus utile.! Donc partez de votre Photoshop, Gimp, ImageReady, Fireworks, Paint Shop, etc., préféré. Pour importer l image depuis votre scanner, cherchez une commande "Importer" ou "Scanner" et, s il y a lieu, choisissez l option "Twain" (qui rend votre logiciel graphique compatible avec votre scanner ou votre appareil photo numérique). S ouvre alors le programme de commande de votre scanner. Si vous voulez utiliser votre scanner à plus de 50% de ses capacités... paramétrez-le! Les choix les plus importants à faire : - choisir la zone à scanner C est une évidence, il faut d abord délimiter la zone à scanner, qui n est pas nécessairement la totalité de l image ou du document que vous venez de glisser sur la vitre du scanner. Pour cela, manipulez l outil d encadrement classique pour réduire la zone choisie ou en créer plusieurs sur le document (par défaut, le scanner sélectionne la totalité de l image ou du document lorsqu il la ou le prévisualise). - choisir la résolution C est le choix primordial. La résolution s exprime en dpi (dot per inch [1]). Les conséquence du choix de la résolution se traduisent d une part dans la qualité et la beauté de l image, et, d autre part dans son poids en octets, kilo-octets ou méga-octets, le tout étant d obtenir l image la plus belle et la plus légère... ce qui est bien sûr contradictoire. Deux repères : une bonne résolution pour une image numérique destinée à l impression papier est 300 dpi. Si l image est destinée à illustrer un site Internet, contentez-vous de 70 à 90 dpi.

4 - choisir la taille Si vous destinez votre image numérique à un site Internet, choisissez une taille d environ 450x300 ou 400x300 pixels, ou plus grande dans des cas exceptionnels. Outre la mise en valeur que vous voulez offrir à votre image, d autres éléments sont à prendre en compte comme la taille moyenne d écran des internautes qui visitent votre site. Un analyseur gratuit d audience comme Xiti.com nous apprend ainsi que plus de 60% des visiteurs de GénérationCyb.net ont une taille d écran de 1024 sur 768 pixels, ce qui nous autorise à concevoir de grandes images. Mais l autre contrainte est, bien sûr le poids des images qui, plus il augmente, gêne l internaute... et coûte cher en hébergement! Pour indiquer à votre scanner la taille d image désirée, vous pouvez, sur certains logiciels de scanners, saisir directement la taille en pixels, centimètres, etc. Sinon, la taille de votre image apparaît quelque part sur votre écran, et vous pouvez modifier la résolution en dpi jusqu à obtenir les hauteur et largeur d image souhaitées. Par exemple, une résolution de 75 dpi appliquée à une photo 10x15cm donnera une image numérique de 450 pixels de large (une résolution de de 79 dpi appliquée à une photo 9x13 donnera le même résultat). - détramer cette opération n est pas proposée par tous les scanners. Elle vous sera utile si vous scannez une image (dessin, photo) tirée d un livre ou d un magazine. En effet, à la différence d une photo que la FNAC vous a tirée sur papier et qui est en quelque sorte un original, une image reproduite dans un magazine a été tramée pour mieux ressortir à l impression. Elle n est donc plus un original pur, et l opération de détramage (ou "descreen") va tenter de corriger la transformation due au tramage. Evitez donc de détramer lorsque vous scannez des photos originales... - renforcer les contrastes Les images une fois scannées sont parfois un peu floues, avec ou sans détramage. Pour les affiner, utilisez dans votre logiciel graphique la commande "Renforcement", "Plus net", "Accentuation", "Sharpen" ou "Unsharp Masking" si le logiciel de votre scanner vous le propose. - optimiser Lorsque vous avez scanné l image, la résolution et la taille choisies ont déterminé son poids en Ko. Avec le logiciel graphique, vous pouvez encore alléger le poids de l image, en réduisant encore sa taille, ou en optimisant son format pour le transformer par exemple du format TIFF issu du scan et très lourd en format jpg (bien adapté pour les photos sur le Web) ou gif (bien adapté pour les illustrations sur le Web). Voici par exemple la fenêtre d optimisation du logiciel ImageReady sur Mac :

5 - graver Pour conserver ou transmettre des images scannées dans leur format original, on a parfois recours au gravage sur CD-Rom. Juste deux petites choses concernant les noms de fichiers : si vous gravez depuis un PC, veillez à configurer votre logiciel graveur pour qu il autorise des noms de fichier dépassant 8 caractères, et à ce qu il ne transforme pas systématiquement les minuscules en majuscules. Sinon, si les fichiers sont reliés entre eux - par exemple des pages html reliées par des liens hypertextes -, vous aurez des surprises..., si vous gravez depuis un Mac, veillez à bien faire figurer la terminaison dans les noms de fichiers (.jpg,.tiff,.rtf, etc.), sans quoi ils ne seront pas nécessairement lisibles sur PC. Pourquoi Optimiser ses images? A qui n est-il pas arrivé de se retrouver avec une image immense, prenant toute la place dans une page? Aujourd hui je vais vous faire un petit topo pour que cela ne vous arrive plus. Tout d abord il faut que vous compreniez qu il est indispensable d adapter vos images à vos pages (ou à l utilisation que vous voulez en faire). Vous devez savoir qu il est possible de changer la taille d une image grâce au code html. C est ce que vous faîtes quand vous redimensionnez une image à l aide de Dreamwaver par exemple. Si vous avez pris cette habitude, il vous faut l oublier. C est une mauvaise habitude. Il est de savoir que ce que vous changez ainsi n est pas la taille "réelle" de l image mais en réalité sa taille d affichage. Vous n influez donc pas sur le poids de l image. Si vous rétrécissez une grande image, son temps de chargement sera le même que pour la très grande image. Et vous savez que sur le net il est de rigueur de diminuer au maximum les temps de téléchargement. L idéal est donc de réduire sa taille réelle pour augmenter la vitesse de téléchargement et d affichage de la page. Dans le cas inverse, si vous agrandissez une petite image vous perdrez en qualité. Voyez par vous même : Voici l image dans sa taille originale si j agrandi cette image voyez ce que ça donne. Avouez que ce n est pas très joli.

6 Dans tous les cas il est impossible d agrandir une petite image sans perte de qualité. (Ne croyez pas tout ce que vous voyez dans les films. Ce qu'ils font est imposssible dans la réalité!) Comment redimensionner une image Pour ce faire on va utiliser un petit logiciel qui s appelle Pixia. Mais il est possible de le faire avec de très nombreux logiciels comme Photoshop, Paintshop Pro, XnVIEW, The GIMP... Vous pouvez le télécharger en version française ici : pixia.free.fr/telech.htm Installez le logiciel puis lancez le. Ouvrez l image que vous voulez redimensionner. (vous pouvez utiliser le raccourci CTRL + O) La barre d\ état (en bas de la fenêtre) vous donne diverses informations : 1. Le nom et l\ emplacement du fichiers [c :\\Mes Documents\\Mes Images\\maphoto.jpg] 2. La taille en pixel de votre image [2272*1704 pixels] 3. La profondeur de couleurs [24 bits] 4. La taille d affichage en %. Vous pouvez réduire ce % si la photo n apparaît pas entièrement. Le raccourci pour faire un zoom arrière est CTRL + D, celui pour faire un zoom avant est CTRL + T. Pour vous déplacer dans une image agrandie, appuyez sur la barre Espace, et cliquez sur l'image en maintenant enfoncé le bouton gauche de la souris. Maintenant pour changer la taille de l image : Avec Pixia cela se fait en créant une copie de l image dans une autre taille (utile si vous désirez garder la version "haute définition" pour l imprimer par exemple). Il vous suffit simplement de cliquer sur Image puis sur Clone redimensionné... Dans la boîte de dialogue tapez les dimensions désirées. Je vais vous donnez quelques exemple de tailles standard pour que vous ayez une idée de ce que vous obtiendrez 640 * 480 (taille maximun utilisable sur le net.

7 480 * * * 120 Maintenant que vous avez redimensionné votre image, il va vous falloir l enregistrer. Nous allons l enregistrer en JPEG, format le plus courant pour Internet (un petit topo sur les formats d images) Pour enregistrer comme un nouveau fichier, le raccourci est CTRL+A (enregistrez sous...) Tapez le nom que vous voulez donner à votre image et dans le menu déroulant juste en dessous choisissez JPEG(*.jpg) A présent il va vous falloir choisir la qualité de l image que vous voulez (le taux de compression). L échelle va de 1 à 100. Plus la valeur est élevée, meilleur est la qualité de l image (et plus l image est lourde). Tapez 90 et cliquez OK. Vous obtenez donc une image de bonne qualité mais assez lourde. Il n y a pas de "bons rapport" poids/qualité. C est à vous d essayer différents taux de compression et de trouver celui qui est le meilleur pour votre image. On considère qu un poids "raisonnable" d image se situe entre 50 et 70 Ko. Mais si il y a peu d\ image sur votre page, il vous est possible de passer cette limite. Evidement vous pouvez mettre des photos moins lourdes. Je sais que personnellement mes photos font rarement plus de 35 Ko. Attention, vous devez toujours faire attention de garder votre image originale non modifiée. En effet au fur et à mesure de vos retouches et de vos enregistrements, la qualité de l image se dégradera progressivement. Vous voilà donc paré pour mettre en ligne des images qui ne seront pas trop grandes et qui ne mettront pas trois plombes à se télécharger.