1 - Protéger les images
2 - Images absentes
3 - Cadre de couleur d'un lien sur une image
4 - Images miniatures
5 - Arrière-plan d'une image agrandie
6 - Texte alternatif et info-bulle
7 - Écrire un texte sur une image
8 - Formats d'image JPG ou GIF
9 - Comment aligner trois images?
10- Images avec WordArt
11- Réduire la taille d'une image
12- La qualité des images JPEG
1 - Protéger les images
Comment faire pour interdire d'enregistrer une image (sur mon site
perso), lorsque l'on fait un clic droit de souris sur cette image? J'ai
vu cela sur d'autres sites où ce clic droit engendre un message d'erreur
du type "enregistrement interdit" ou "contactez moi pour..."
On ne peut pas vraiment protéger une image sur le net. Il suffit de
la sélectionner, faire ALT+ImpÉcran, ouvrir un logiciel de dessin, puis
y coller l'image avec les
touches Ctrl+V pour en avoir une copie.
L'image peut aussi être récupérée avec un glisser/déposer (en
réduisant la taille du navigateur, en enfonçant le pointeur de la souris
sur une image et en la glissant sur le bureau) ou avec les commandes
Fichier, Enregistrer sous, de même que toutes les autres manières de
pomper un site en entier... D'ailleurs, puisque les pages visitées
demeurent dans le cache de l'internaute, et cela sans être connecté, une
simple copie d'écran suffit pour les récupérer.
Ceci étant, un texte de copyright bien placé montre ta propriété. Et
tu peux aussi les tatouer en inscrivant sur l'image ton copyright.
Voir la
question 7 plus bas.
2 - Images absentes
Sur mon ordinateur, lorsque je visualise mon site, tout est parfait. Une
fois transférées sur le serveur (donc publiées), certaines images
n'apparaissent pas, remplacées par des croix rouges.
Voici quelques points à vérifier:
- ne pas utiliser de majuscules dans les noms de fichiers; par
exemple, [monfichier.jpg] et non pas [MOnfichier.JPG], car plusieurs
serveurs font la distinction entre les minuscules et les majuscules;
- ne pas utiliser d'espace dans les noms de fichiers; par exemple,
écrire [mon_fichier_qui_est_beau.jpg] et non pas [mon fichier qui est
beau.jpg];
- ne pas utiliser de caractères accentués; écrire [bonne_annee.jpg]
et non [bonne_année.jpg].
Attention, si vous modifiez les noms de fichiers, il est préférable
de le faire dans FrontPage (ou Expression Web) pour que les liens soient
corrigés automatiquement. Pour enlever les majuscules, il faut d'abord
lui donner un autre nom puis reprendre l'opération avec le nom voulu.
Ensuite, après la publication, vérifiez attentivement les liens
hypertexte.
3 - Cadre de couleur d'un lien sur une image
J'ai mis un lien sur une image et, hop, un contour de couleur est
apparu... Comment enlever ce contour?
Cliquez avec le bouton droit de la souris sur l'image et choisissez
Propriétés de l'image. Dans l'onglet Apparence, l'option Épaisseur de
bordure doit être fixée à 0.
Ce format pourrait être intégré dans une feuille de styles, afin de
l'appliquer à toutes les images:
img {border-width: 0px;}
4 - Images miniatures
J'ai fait un site et je cherche comment faire des miniatures pour les
voir agrandies lorsqu'on clique dessus. Où met-on les deux images?
Il y a plusieurs façons de créer des miniatures.
A) Avec le logiciel FrontPage, Expression Web ou SharePoint Designer:
- fixer d'abord la taille des miniatures au menu Outils, Options de
l'éditeur de page (ou Options de page), dans l'onglet Créer une
miniature;
- afficher la barre d'outils Images;
- insérer la grande image à l'endroit voulu pour la petite;
- sélectionner l'image puis cliquer sur le bouton Miniature automatique
dans la barre d'outils Images.
Il se crée alors une copie miniature de l'image, avec un lien vers la
grande image. La nouvelle nouvelle miniature est enregistrée en même
temps que la page.
B) À partir d'un logiciel de dessin:
Vous pouvez préparer vous-même les deux images avec un logiciel de
dessin, en réduisant la taille de la grande image et en la renommant. Il
faut ensuite insérer la petite image dans une page Web et créer un lien
hypertexte, à partir de la miniature, pour appeler la grande image.
5 - Arrière-plan d'une image agrandie
Sur mon site, je propose quelques photos au format vignette (miniature).
En cliquant sur ces vignettes, on découvre la photo dans sa taille
d'origine. Lors de ce clic, on voit la photo agrandie, sans problème,
mais sur fond blanc. Comment faire pour changer ce fond blanc par une
autre couleur, celle des pages de mon site?
Un lien hypertexte vers une image, cela affiche l'image avec la couleur
de fond définie dans Windows, peut-être blanc chez vous mais pas chez
tout le monde.
Pour préciser une couleur du fond, il faut faire une page où
vous placez simplement la grande photo (une page pour chaque image) et
faire le lien vers cette page et non pas vers la photo. Dans la nouvelle
page, vous pourrez ajouter un commentaire sous l'image, ainsi que des éléments
de navigation comme un menu et un lien de retour à la page précédente.
6 - Texte alternatif et info-bulle
Je dois faire un site avec beaucoup de photos. Je voudrais afficher une
bulle au passage de la souris et inscrire un texte de remplacement pour
ceux qui ne voient pas les images. Comment créer ces textes?
L'info-bulle et le texte alternatif sont ajoutés de façon différente.
A) Texte alternatif
Pour différentes raisons (dont la rapidité d'affichage), plusieurs
visiteurs n'affichent pas les images.
Dans pratiquement tous les navigateurs, une image absente est remplacée
par le texte inscrit dans l'attribut "alt" de l'image:
<img src="truc.gif" alt="description de l'image">
Expression et SharePoint Designer offrent de simplifier l'insertion du texte
alternatif, avec le menu Outils, Options de l'éditeur de pages, onglet Général,
en cochant l'option "Invite des propriétés d'accessibilité lors de
l'insertion des images". Ensuite, dès l'insertion d'une image, une
fenêtre demandera le texte de remplacement.
Pour une image déjà en place ou pour modifier son texte alternatif, cliquer avec le bouton droit sur l'image, choisir
Propriétés de l'image, onglet Général, et remplir le champ "Texte de
remplacement" (ou "Texte" dans FrontPage). Ceci ajoute la balise ALT qui
donne le texte au cas où l'image ne serait pas
affichée.
Remarque: le fait d'ajouter un texte de remplacement augmente nettement
l'accessibilité de votre site, non seulement pour les visiteurs mais aussi pour les moteurs de recherche.
B) Info-bulle
Au passage de la souris, c'est plutôt l'attribut TITLE qui permet de faire
apparaître une bulle informative sur l'image. Dans la source de la page,
en mode Code, ajoutez-la ainsi:
<img src="truc.gif" alt="description de l'image" title="Contenu de
l'info bulle">
Pour plus
d'informations, voir:
https://openweb.eu.org/articles/accessibilite_images
7 - Écrire un texte sur une image
Comment ajouter du texte sur une photo? Ou plus simplement: comment
écrire sur une photo?
Il y a différentes façons de faire, souvent à partir d'un logiciel de
dessin. Supposons, par exemple, que vous utilisez Paint (fourni avec
Windows).
Pour superposer un texte à l'image:
1. ouvrez le logiciel Paint (menu Démarrer - Tous les programmes -
Accessoires - Paint);
2. affichez votre image avec le menu Fichier - Ouvrir;
3. faites-en tout de suite une copie (pour conserver l'originale intacte
et pouvoir recommencer au besoin), avec le menu Fichier - Enregistrer
sous, précisez alors un autre nom;
4. pour un texte sur un arrière-plan transparent, au menu Image,
désactivez l'option Dessiner opaque;
5. choisissez la couleur du texte avec le menu Couleurs;
6. au besoin, affichez les outils avec le menu Affichage - Boite à
outils;
7. dans la Boite à outils, cliquez sur le bouton "A", puis
cliquez à l'endroit voulu dans l'image;
8. tapez alors le texte voulu;
9. pendant ce temps, une barre d'outils Police s'affiche (sinon,
au menu Affichage, cochez Barre d'outils Texte), vous
permettant de changer la police et sa taille...
Note: dans Paint, ne cliquez pas à l'extérieur de la zone de texte avant
que tous les changements de texte et de police ne soient complétés.
8 - Formats d'image JPG ou GIF
Je dois mettre une photo sur Internet, quels seront ses propriétés et
formats?
Dans le choix du format, le critère de base, c'est de ne pas avoir une
image trop longue à charger. Les principaux formats utilisés sont:
-
JPG (ou JPEG) pour une photo ou une grande image;
-
GIF pour une petite image, avec des blocs de couleurs unies.
Une façon de faire serait d'importer d'abord toutes les images avec le menu Fichier, Importer,
puis de transformer au besoin le type d'une image en JPG ou GIF.
Pour transformer le type d'une image:
- glisser l'image
dans une page;
- double-cliquer sur elle pour ouvrir ses propriétés;
- dans
l'onglet Général, cliquer sur le bouton Type de fichier image;
- dans la
fenêtre suivante, sélectionner le type GIF ou JPEG (ici, les formats PNG
sont à éviter, n'étant pas lisibles par tous les navigateurs);
- en haut à
droite de la fenêtre, observer la taille du fichier obtenu afin de choisir le format
créant le fichier le plus petit.
9 - Comment aligner trois images?
J'ai fait une certaine mise en page avec trois miniatures de photos
alignées et un commentaire sous chaque miniature. Or, dès que je
supprime le volet de navigation ou lorsque je passe en mode Affichage,
les miniatures ne sont plus alignées comme je l'avais défini. Comment
faire?
Il suffit de les mettre dans un tableau d'une ligne et trois colonnes,
avec
une miniature et son commentaire dans chaque cellule. Tous les navigateurs peuvent lire un
tableau, mais à deux conditions:
- le tableau n'est pas placé à l'intérieur d'un autre tableau;
- il ne comprend pas de cellule fusionnée (il doit être lisible une
ligne après l'autre).
10 - Images avec WordArt
Les dernières versions de FrontPage permettent l'insertion d'objets
WordArt directement sur la page de création. Lors de la création, ces
objets (titrages ou dessins) sont très jolis. Par contre, à la
visualisation, le lissage a disparu et le nombre de couleurs est
descendu à 4 ou 8 au maximum. Fini les jolis ombrages, lissages et
dégradés. Existe-t-il une solution à ce problème?
J'ai fait la même constatation et j'ai résolu ce problème via système D:
- je crée le texte WordArt voulu;
- au moment de la visualisation sous FrontPage, je fais une capture
d'écran, avec la touche du clavier ImpÉc;
- ensuite, dans une page de FrontPage, je "colle" l'image, avec les
touches Ctrl+V;
- j'utilise le bouton Rogner de la barre d'outils Images pour couper
cette image et ne conserver que la section du texte WordArt;
- j'enregistre la page, puis l'image au format .jpg;
- dans ma page Web originale, je remplace l'image WordArt par l'image
sauvegardée au format .jpg.
11- Réduire la taille d'une image
Mes images sont longues à afficher. Comment faire pour réduire la taille
des fichiers?
La taille d'une image se compte de deux façons: l'espace qu'elle utilise
à l'écran (en pixels) et le poids de son fichier (en Ko). C'est cette
dernière mesure qui permet de réduire le temps d'affichage.
Attention: pour conserver les images originales, il est préférable de
travailler à partir de copies, parce qu'une fois les changements
enregistrés, on ne peut plus revenir en arrière.
Pour réduire la taille d'un fichier image, dans FrontPage:
1. insérer l'image dans une page et la sélectionner;
2. avec la souris placée dans un coin, réduire la taille de l'image (le
changement apparaît à l'écran seulement);
3. pour ajuster la taille du fichier en conséquence, cliquer sur le bouton Échantillon
dans la barre d'outils Images;
4. enregistrer la page et renommer l'image;
5. vérifier sa taille en mode d'affichage Dossiers.
Pour enlever les parties inutiles en bordure:
1. sélectionner l'image;
2. dans la barre d'outils Images, cliquer sur le bouton Rogner;
3. avec la souris, dessiner un cadre autour de la partie de l'image à
conserver;
4. cliquer à nouveau sur le bouton Rogner pour couper l'image;
5. enregistrer et renommer l'image.
De plus, il est possible de jouer un peu avec la qualité des images .jpg,
pour réduire la taille des fichiers (voir la question suivante). Et,
finalement, les images miniatures sont régulièrement utilisées pour
améliorer le temps d'affichage (voir la
question 4
plus haut).
12 - La qualité des images JPEG
Dans mon site, j'ai placé plusieurs images .jpg. Comment faire pour
réduire la taille des fichiers sans changer leur taille à l'écran?
Un écran ne permettant pas un affichage très précis, une image .jpg
pourrait être un peu floue sans que cela ne paraisse vraiment. Il faudra
faire plusieurs essais pour obtenir un fichier raisonnablement petit,
tout en conservant une qualité acceptable à l'écran. (Dans ce cas,
l'image modifiée devrait toujours être enregistrée sous un autre nom.)
Pour réduire la qualité d'une image jpg:
--> avec FrontPage 2000:
1. clic droit sur l'image, choisir Propriétés de l'image;
2. dans l'onglet Général, pointer JPEG;
3. dans la zone Qualité, inscrire un nombre légèrement plus petit...
--> avec FrontPage 2002:
1. demander l'enregistrement de la page (si la fenêtre Enregistrer les
fichiers incorporés n'apparaît pas alors, inverser deux fois l'image
dans la page, avec un bouton Retourner de la barre d'outils Images,
avant de redemander l'enregistrement de la page);
2. dans la fenêtre Enregistrer les fichiers incorporés, cliquer sur le
bouton Options de l'image;
3. sélectionner JPEG;
4. réduire le nombre inscrit dans la zone Qualité...
--> avec FrontPage 2003, Expression Web et SharePoint Designer:
1. clic droit sur l'image, choisir Propriétés de l'image;
2. dans l'onglet Général, cliquer sur le bouton Type de fichier image;
3. pointer JPEG (s'il y a lieu, enlever la coche devant l'option Utiliser l'image
telle qu'elle);
4. réduire sa qualité...
5. en haut à droite de la fenêtre, comparer la Taille d'origine avec la
Taille après modification.