Insérer des images

Préparation des images

Les images doivent être préparées à 72 dpi, en RVB.

Il est possible de modifier les dimensions d'une image dans DreamWeaver mais ce n'est pas recommandé. Il faut donc préparer les images à tel, c'est-à-dire à la dimension finale d'utilisation, mesurée en pixels.

Les formats d'images utilisables sont le GIF, le JPEG et le PNG, uniquement. Tout autre format (PSD par exemple) n'est pas compris par les navigateurs.

Le GIF autorise une palette de 256 couleurs(mode 8 bits) dont une couleur transparente possible. Il est recommandé pour les images en applats de couleurs, textes, boutons, logos, etc. Il produit une compression non destructive.

Le JPEG (suffixes .jpg ou .jpeg) permet de travailler en millions de couleurs (images en 24 bits) mais aucune transparence n'est possible. Il est parfaitement adapté aux photos, aux illustrations ou toute image en tons continus. Sa compression est réglable mais destructive. Il ne faut pas enregistrer plusieurs fois de suite une image en jpeg, cela dégrade très vite sa qualité.

Le PNG est un format de compression non destructive comme le GIF. Il propose deux modes, un mode 8 bits équivalent au GIF et un mode 24 bits plus adapté dont le seul intérêt est de pouvoir intégrer une couche alpha complète (transparence sur 8 bits). Le poid des fichiers est alors plus important qu'en JPEG. Privilégiez le format PNG 8bits au format GIF qui tend à disparaître, sauf pour les GIF animés.

Pour préparer une image pour le web depuis Photoshop, partez d'un original en PSD et utilisez le Menu Fichier > Enregistrer pour le Web.

Le poid des fichiers utilisés pour le web doit être le plus petit possible, afin de faciliter un chargement rapide des pages. On admet qu'une image plein écran ne doit pas dépasser 250 Ko. C'est une limite supérieure et des images bien optimisées vont peser entre 4Ko et 150 Ko, selon leur dimension et leur nature.

Chemin des images

Une image utilisée dans une page web DOIT se trouver dans le dossier racine du site pour être lue correctement, sinon vous aurez l'image d'un lien manquant (voir ci-dessous). C'est également le cas quand le chemin ou le nom d'une image ne correspond pas.

Toutes les images doivent donc être placées dans le dossier racine. Si vous essayez de placer une image sur une page alors qu'elle n'est pas dans le dossier racine, Dreamweaver vous propose de la copier dans le dossier racine. Il faut bien sûr accepter. Mais la bonne méthode consiste à placer vous-même manuellement vos images dans le dossier racine avant de les utiliser.

Par conséquent, il ne faut pas déplacer ou renommer une image directement depuis le dossier racine, sous peine de perdre les liens (c'est valable pour n'importe quel fichier ou dossier se trouvant dans le dossier racine). Il faut TOUJOURS renommer ou déplacer vos fichiers ou dossiers depuis la Palette Fichiers de DreamWeaver.

Il y a deux types de chemin pour une image :

1. Un chemin relatif à la page dans laquelle elle se trouve, on parle de chemin relatif au document. Pour une image se trouvant au même niveau que la page le chemin sera du type "image.jpg"; pour une image placée dans un dossier se nommant images par exemple, le chemin sera du type "images/image.jpg". C'est le cas le plus courant et celui qui est normalement paramétré par défaut dans DreamWeaver.

2. Un chemin absolu. Il se réfère à la racine du site, en ligne. Ce type de chemin est utilisé pour des newsletters ou pour des images se trouvant sur des serveurs éparpillés, ce qui est rare. Le chemin sera du type "http://www.monsite.fr/images/image.jpg".

Dans le code HTML, une image se présente ainsi :

<img src="images_img/accessibilite_image.png" width="499" height="199" />

Insérer une image sur une page

Dans DreamWeaver, il y a plusieurs façons de placer une image sur une page.

La plus simple consiste à la faire glisser jusqu'à l'emplacement du curseur sur la page depuis la Palette Fichiers. Une fenêtre demande des informations pour l'accessibilté des images aux personnes handicapées. Le texte secondaire (correspondant à l'attribut alt de la balise img) pourra ainsi être lu en synthèse vocale. Il doit être très proche du contenu de l'image. Il est actuellement plus que recommandé de remplir cette valeur.

On peut toujours la saisir a posteriori dans la Palette Propriétés pour une image sélectionnée (zone "Sec." en haut à droite).

Une autre méthode consiste à utiliser la Palette Insertion > Commun > Images > Image ou bien le Menu Insertion > Image (raccourci  ALT I).

Propriétés d'une image

Quand une image placée sur une page est sélectionnée, la Palette Propriétés affiche plusieurs paramètres (voir ci-dessous)

Ses dimensions en pixels (W et H). Les poignées noires autour de l'image permettent de la redimensionner. Ce n'est pas recommandé. Les valeurs W et H s'adaptent et l'image n'est redimensionnée proprotionnellement que si vous utilisez la touche MAJ en même temps. Pour revenir aux dimensions originales, cliquez sur la flèche qui apparait à droite des valeurs W et H.

Il n'est pas possible de recadrer une image directement sur une page web, comme dans InDesign par exemple.

La zone surlignée en rouge ci-dessus correspond au chemin de l'image (attribut src de la balise img). Il n'est pas recommandé de modifier manuellement le nom dans la zone Src. Les risques d'erreurs sont trop importants.

Pour changer une image, il faut l'effacer et en placer une autre au même endroit.

Il est également possible, c'est plus simple, de cliquer sur le dossier à droite de la zone Src et de choisir un autre fichier, ou encore plus simple, de cliquer sur la cible à droite de la zone Src et sans lacher la souris de la faire glisser jusqu'à un fichier image se trouvant dans la Palette Fichiers.

Modifier une image

La Palette Propriétés contient des outils permettant d'éditer une image depuis DreamWeaver. Je ne recommande pas de vous en servir. C'est utile uniquement pour ceux qui ne possèdent pas Photoshop.

Le meilleur moyen d'éditer une image est de faire un clic droit sur l'image (sur la page ou depuis la Palette Fichiers) et de l'ouvrir dans Photoshop. Une fois les modifications enregistrées, l'image se met automatiquement à jour dans DreamWeaver.