PHPWEBSITE -Tutoriel image

Transcription

1 PHPWEBSITE -Tutoriel image La capture des images depuis le web pour mon site. L optimisation d images pour le web, 1

2 Préparer des images pour le Web A. Généralités 1. Les trois formats d'images sur le Web Quand on a préparé un texte avec une application comme Word, ce dernier se trouve sauvegardé par le logiciel dans un " format " particulier qui apparaît dans la deuxième partie du nom du fichier (l'extension) : MonTexte.doc. De la même façon, les images manipulées en informatique sont sauvegardées dans divers formats, selon le logiciel que l'on utilise pour les préparer et selon la finalité des images préparées. Un logiciel d'images est, la plupart du temps, capable de lire et de sauvegarder des fichiers images de plusieurs formats. Il existe deux types de formats d'images en informatique : les images vectorielles et les images par points (bitmaps). Sur Internet, certains logiciels comme Flash (de Macromedia) produisent des images vectorielles, mais l'essentiel des images exploitées sur le Web sont en mode points. Nous allons apprendre de façon succincte comment préparer des images bitmaps pour la publication sur Internet. Les navigateurs actuels sont capables d'afficher des images par points de trois formats différents : le GIF (graphic interchange format, développé par Compuserve), le JPEG (join photographic expert group) et le PNG (portable network graphic). Les deux premiers sont, de loin, les plus répandus. Nous allons nous limiter à ces deux formats pour apprendre à optimiser les images à publier sur le Web, mais ce qui sera vu pourra être appliqué sans difficulté au PNG. 2. Les contraintes du Web Outre la limitation à trois formats seulement, le Web impose de prendre garde à créer des images les plus "légères" possible, afin de raccourcir le temps de chargement sur le navigateur de l'internaute. Plus il lui faudra télécharger d'octets pour que l'image s'affiche, plus il devra attendre et plus on risque de le voir partir, lassé, avant qu'il ait vu la page que nous lui proposons. Il faudra donc éviter d'afficher des images de grande taille, qui sont plus "lourdes". Il faudra aussi choisir le format et les options de sauvegarde les plus adéquates, en fonction de l'image à publier, pour économiser des octets. 3. GIF, ou JPEG? Le format GIF utilise, au maximum, 256 couleurs différentes, alors que le JPEG offre des millions de nuances. Cela a des conséquences : Une image genre bande dessinée, avec des à plats, sera plus légère au format GIF. Une image pauvre en couleurs différentes sera beaucoup plus légère au format GIF, surtout si on sauvegarde le fichier en diminuant le nombre de couleurs à afficher (par exemple 16 couleurs, voire deux couleurs pour une silhouette en noir et blanc). Format GIF (16 couleurs) 3244 octets 2

3 Format JPG (compressé 25%) 6856 octets Une photo sera plus belle en format JPEG. Format GIF (16 couleurs) 7833 octets Format JPG (compressé 25%) 6183 octets Le format JPEG offre des options de compression qui "simplifient" l'image en appauvrissant le contenu. Comme on le fait pour pour les fichiers sonores grâce au MP3, on peut compresser sensiblement une image sans dégradation visible de la qualité, telle qu'elle est restituée sur un écran. On peut même accepter de voir légèrement se dégrader une image à l'écran, compte tenu de l'avantage obtenu en temps de chargement, selon les cas. 3

4 JPG non compressé (13318 octets), puis compressé à 25% (3367 o), 50% (2394 o), 75% (1771 o), 99% (1039 o) Parfois, pour une image donnée, on a intérêt à comparer le résultat obtenu selon le format d'image choisi et selon le taux de compression demandé. Certains logiciels offrent cette comparaison à l'écran, mais une certaine habitude permet aussi de le déterminer. 4. Récupérer une image pour l'exploiter dans une page Web : 75 DPI, sinon rien On peut obtenir des images à l'aide d'un appareil photo numérique ou d'un scanneur (et de documents sur papier), ou directement sur Internet. Naturellement, il est impératif de respecter les droits sur la propriété artistique en s'interdisant d'afficher des images récupérées sur le Web ou sur un document écrit sans l'accord du propriétaire des images et de l'éditeur. La finesse d'une image résulte du nombre de points par pouce (PPP) qu'elle comporte : sa résolution. Les logiciels parlent, la plupart du temps, de DPI (dots per inch) au lieu de PPP (points par pouce). Une imprimante permet d'exploiter des images de 600 points par pouce, ou 1200, voire plus. Mais il est indispensable de savoir qu'un écran est prévu pour afficher seulement 75 points par pouce, ou plus exactement 75 pixels par pouce, le pixel étant, pour l'écran, l'équivalent du point pour le papier. Il faut donc prévoir de régler l'appareil photo ou le scanneur sur cette résolution d'image (on parle aussi de définition d'image). Une image récupérée dans une définition plus précise apparaîtra à l'écran dans une taille supérieure, ce qui n'est pas souhaité, en général. Les images récupérées sur Internet sont déjà à la bonne résolution. Cela évite d'avoir à s'en soucier. B. Procédures pratiques Quand cela sera nécessaire, nous allons utiliser pour nos travaux pratiques un logiciel très répandu, dont la version 4 est même disponible gratuitement : Paint shop pro. On peut naturellement utiliser d'autres logiciels pour réaliser ce qui va être vu ici. 1. Capturer une image sur la Toile pour l'incorporer à une page Web en préparation Il est possible de se passer complètement de logiciel graphique, quand on peut disposer d'images déjà prêtes à l'emploi pour le Web. C'est le cas, souvent, lorsqu'on veut récupérer une image dans un site Web que l'on visite. Voyons ce premier cas : Supposons que vous désiriez récupérer le logo de la page d'accueil du site de l'éducation nationale, 4

5 Cliquez sur l'image avec le bouton de droite et choisir Enregistrer l'image sous dans le menu qui apparaît Parcourez votre disque dur jusqu'au dossier prévu pour les images de votre site et enregistrez-y l'image, au besoin en changeant son nom. C'est tout! Vous pouvez maintenant inclure votre image dans la page de votre choix, grâce à la fonction Insérer image de votre logiciel de création de pages Web. 5

6 2. Capturer une portion d'écran pour en faire une image destinée à illustrer une page Web Supposons que vous désiriez afficher une image constituée d'une portion de ce qui est sur votre écran, comme par exemple cette partie de la page d'accueil du site que nous venons de voir : Avec Paint shop pro, il faut utiliser la fonction capture. Mettez à l'écran la page dont vous voulez capturer une portion, puis lancez Paint shop pro et lancez la capture (Fichier, Importer, Capture d'écran, Lancer, pour la version 7 ; ou bien touche majuscule + lettre c). La page à capturer revient à l'écran. Activez la capture en tapant sur la touche F11 ou en cliquant du bouton de droite (selon configuration préalable du logiciel), cliquez du bouton de gauche en haut et à gauche de la zone voulue, puis relâchez le bouton, allez en bas et à droite de la sélection souhaitée et recliquez. Paint shop pro réapparaît, avec la portion d'écran capturée. Sauvegardez votre sélection dans le dossier prévu en format GIF ou JPG, selon les critères indiqués plus haut (voir aussi plus bas). Insérez ensuite votre image dans la page Web, à l'aide de votre logiciel de création de pages html. 6

7 3. Préparer une image à l'aide d'un logiciel graphique La plupart du temps, il est nécessaire de fabriquer soi-même ses images, ou de les récupérer sur un support en papier. Si l'image est réalisée à partir d'un logiciel graphique, il faut penser à prévoir un support en 75 DPI (ou PPP) avant de travailler. Exemple pour Paint shop pro (qui parle de pixels par pouce parce que le pixel est à l'écran ce que le point est au papier) : Pensez à ne pas garder autour de votre image une superficie de fond d'image superflue, parce qu'elle sera incorporée à votre image finale et alourdira inutilement le fichier, sans compter la place inutile que cela prendra à l'affichage dans la page Web. Des outils de rognage sont incorporés pour cela dans les logiciels graphiques. 4. Préparer une image à l'aide d'un scanneur Si l'image doit être récupérée à l'aide d'un scanneur (photo réalisée par vos soins ou trouvée dans un livre, une revue, et libre de droits...), il faut d'abord configurer le logiciel de pilotage du scanneur pour 7

8 que la numérisation s'effectue à 75 DPI. Il existe nombre de logiciels pour scanneurs et il n'est pas possible de donner une marche à suivre précise, mais cela est, d'ordinaire, facilement repérable sur la page affichée pour la préparation de la numérisation. De même, une prénumérisation permet de sélectionner à la souris la zone précise qui sera numérisée, avant sauvegarde dans le dossier prévu. Penser à choisir le format GIF ou JPG pour l'enregistrement! La plupart du temps, il faudra réduire la taille de l'image. Ceci qui peut se faire au moment de la numérisation en demandant un pourcentage de la taille originale dans les options de numérisation. On peut aussi avoir recours au logiciel graphique. Avec PSP (Paint shop pro), cela donne : Image à réduire (photo originale, 385x266 pixels, JPG compressé à 50%, 8240 octets) Menu Image, redimensionner 8

9 Image réduite, sauvegardée et insérée dans la page Web (192x133 pixels, JPG compressé à 50%, 2844 octets) 5. Prendre une photo avec un appareil numérique et l'exploiter pour affichage sur le Web Penser à régler l'appareil pour une résolution de 75 DPI, prendre la photo, la télécharger sur le disque dur de l'ordinateur, la récupérer dans le logiciel graphique pour reprendre le cadrage (outil de rognage) et pour la redimensionner, comme vu ci-dessus. Si la photo a été prise dans une autre résolution, l'ouvrir dans le logiciel graphique, la redimensionner pour qu'elle prenne à l'écran la taille voulue, la sauvegarder dans sa nouvelle taille. 6. Autres retouches possibles Un logiciel graphique comprend ordinairement une foule de réglages pour rectifier le contraste d'une photo, sa luminosité, l'équilibre des couleurs, ajouter du flou, ou, au contraire, accentuer les contours, sans compter divers effets artistiques dont l'intérêt pour le Web n'est pas assuré et dont nous ne parlerons pas. Prenons l'exemple d'une photo trop sombre : Après l'avoir affichée dans PSP, aller à Couleurs, Ajuster, Luminosité Contraste, et régler la luminosité pour éclaircir l'image. Le résultat s'affiche dans une fenêtre pour un réglage "à vue". 9

10 Cliquer sur OK, sauvegarder l'image modifiée et l'importer dans la page Web Il est fréquent d'avoir à rectifier la luminosité ou le contraste d'une photo, pour pouvoir l'exploiter dans un site Web. La procédure est simple et efficace. Certains logiciels réalisent seuls un ajustement moyen qui convient souvent très bien. 6. Alléger une image pour accélérer son chargement On l'a déjà compris, une opération capitale dans le traitement des images est leur allègement pour les rendre exploitables sur le Web. Il faut penser au visiteur du site, plus tard, en particulier s'il ne possède qu'une connexion ordinaire (RTC), c'est à dire s'il n'a pas de ligne Numéris, de connexion ADSL ou de câble. Les images sont très souvent la cause principale du ralentissement de la consultation. Mais, aussi bien pour les fichiers GIF que pour les JPG, il est possible de remédier à cet état de fait, au moins partiellement. Voici comment. a) Images GIF Les images GIF ne se compressent pas, mais on peut diminuer le nombre de couleurs utilisées pour alléger le fichier. 256 couleurs 7452 octets Avec Paint shop pro, on diminue le nombre de couleurs grâce au menu ci-dessous : 10

11 16 couleurs 3244 octets b) Limages JPG On ne peut diminuer le nombre de couleurs d'un fichier JPG, mais on peut choisir le taux de compression. A l'écran, la plupart du temps, la dégradation de l'image qui en résulte n'est pas perceptible avant 50% de compression. En revanche, le gain en octets est très sensible, comme le rappelle l'exemple ci-dessous, déjà exploité plus haut. JPG non compressé (13318 octets), et compressé à 50% (2394 octets) Avec Paint shop pro 7, on compresse le fichier grâce à l'option de sauvegarde Fichier, Enregistrer sous..., Type JPEG, Options, Taux de compression 50. Si l'on clique sur le bouton Optimisation... dans la boîte de dialogue Options d'enregistrement, on obtient la boîte de dialogue suivante : 11

12 En fonction du taux de compression choisi, on peut comparer le degré de dégradation de l'image (à droite) par rapport à l'original (à gauche). En cliquant sur OK, on entérine le taux choisi. Il ne reste plus qu'à donner un nom au fichier et à l'enregistrer. Remarque importante : Le format JPG n'est pas indiqué pour les images contenant du texte, car la compression provoque une dégradation des lettres et de leur pourtour, comme le montre l'exemple ci-dessous : A gauche, image JPG compressée à 50%, 1572 octets A droite, image GIF 16 couleurs, 829 octets. 7) La transparence Le format GIF possède aussi une particularité intéressante, qui le fait préférer au JPG dans certains cas, c'est la possibilité de rendre transparente une des couleurs d'une image. Par exemple, la couleur de fond peut être ainsi éliminée de l'affichage, comme dans l'image ci-dessous : Image GIF sans transparence, puis avec transparence de la couleur de fond Avec Paint shop pro, l'effet est obtenu par le menu Couleur, réglage de la transparence, donner à la transparence la couleur de l'arrière plan. On aura pris soin, auparavant, de sélectionner à l'arrière plan la couleur voulue. Ceci constitue une première approche de l'utilisation des fichiers image dans une page Web. Mais vous devriez résoudre grâce aux notions qui ont été vues l'essentiel des problèmes qui peuvent se poser à ce sujet. 12