notes de cours

Report
7 novembre 2012
Grégory Petit
http://lrcm.com.umontreal.ca/greg/COM2580/
La semaine dernière …
 Les éléments de mise en page
 Les attributs CSS de mise en page
 L’utilisation des tableaux
 L’utilisation des DIVS
Et donc on fait quoi aujourd’hui?
 Les types d’image
 Gestion de la taille des images
 Utilisation des images avec Dreamweaver
Les types d’images
Types d’images
 Pour
savoir le type d’une image, on regarde
généralement son extension (texte après le . dans le
nom du fichier).
 Il existe deux grandes familles d’image numérique
mais seulement une est grandement utilisée dans le
monde du Web.
Deux grandes familles
 Image bitmap ou par point
 Représentation graphique définie par l’ensemble des
points qui l’a compose.
 C’est le codage le plus utilisé.
 Possède une résolution (pixels par pouce).
 Image vectorielle
 Représentation géométrique
 C’est en fait une suite de formules mathématiques.
décrivant les formes élémentaires constituant
l'image (rectangles, lignes, courbes, ellipses, etc.)
 Très peu utilisées en Web.
Bitmap Vs. Vectoriel
Zoom
Image Bitmap
 Avantages
 Supporté facilement par les fureteurs.
 Adapté aux périphériques d’affichage.
 Codage point par point universel.
 Désavantages
 Supporte mal les opérations de redimensionnement,
réduction ou agrandissement. Ces opérations se
traduisent par une perte d'information.
 Dépendant du périphérique d’affichage et de sa
résolution.
Image vectorielle
 Avantages
 Adaptée aux représentations schématiques et stylisés
constituées de formes.
 Plus compacte. Sa taille varie en fonction de la
complexité de l'image, mais pas en fonction de la
résolution demandée.
 Désavantages
 Ne peut pas coder une image analogique telle qu'une
image photographique.
 Difficile à manipuler dans une page Web.
Types d’images Bitmap
 JPEG (.jpg ou .jpeg) : très bonne compression mais




perte de qualité qui peut brouiller l’image.
GIF (.gif) : peut être animée et gère la transparence.
Limitée à 256 couleurs donc à éviter pour les photos.
PNG (.png) : bonne compression sans perte. Gère la
transparence. Moins utilisée par les développeur.
TIFF (.tif ou .tiff) : compression sans perte. Gère la
transparence. Fichiers volumineux.
BMP (.bmp) : format par défaut de Windows. Non
compressé.
Types d’images vectorielles
 SVG (.svg) : format de plus en plus utilisé en
graphisme.
Utilise
le
format
XML,
donc
compréhensible par tous les développeurs.
 Illustrator (.ai) : reconnu pas tous les logiciels
graphiques. Fureteurs non compatibles avec ce format.
 PDF (.pdf) : oui c’est du vectoriel! Grande taille de
fichier. Plus utilisé pour les documents textes que pour
les images.
SVG et HTML
 Impossible
d’insérer
une
image
SVG
dans
Dreamweaver.
 Si vous voulez vraiment insérer une image vectorielle
dans votre page Web, utilisez le code suivant :
<object data="image/rond.svg" type="image/svg+xml"></object>
 Assez difficile de changer la taille de l’image via HTML.
Il faut choisir la bonne taille, dès la conception de
l’image.
Gestion de la taille des images
Taille des images
Plus la taille d’une image est grande, plus votre page Web
mettra du temps à charger. Il faut donc :
 Minimiser autant que possible la taille des images.
 Privilégier la qualité par rapport à la dimension.
 Afficher progressivement les images si possible. (on va
y revenir)
Sous Mac OS X
 On peut faire ça directement avec Aperçu!
Aperçu
 Choisissez JPEG ou JPEG-2000 puis jouez sur la
qualité.
Sous Windows
 Il n’existe rien en natif pour réduire la taille des
images. Mais il existe XnView (gratuit).
 XnView est une visionneuse d’images qui fonctionne
sous Windows, Linux et Mac OS X.
 Possible aussi d’ajouter les attributs d’affichage
progressif et d’entrelacement.
XnView
Avec Photoshop
 Beaucoup plus de paramètres donc un peu plus
difficile.
 Permet de visualiser directement la taille et la qualité
de l’image en fonction des paramètres sur lesquels on
joue.
 Ouvrir l’image avec Photoshop, puis faire
Fichier -> Sauvegarder pour le Web et les
périphériques
Avec Photoshop (JPEG)
Avec Photoshop (PNG)
Entrelacement et affichage progressif
 Ces deux attributs permettent que les images de
grande taille s’affiche progressivement.
 Un aperçu flou de l’image s’affiche à l’ouverture de la
page et l’image devient de plus en plus nette avec le
temps.
Utilisation des images
avec Dreamweaver
Rappel
 Placer les images dans un dossier à part dans votre site.
 Le chemin vers l’image doit être relatif (du type
src="image/truc.jpg")
 Vous savez déjà insérer une image dans une page HTML.
 Pour centrer une image, il faut mettre l’image dans un
élément de texte comme <p> par exemple et appliquer
l’attribut CSS text-align:center à cet élément.
 Pas d’espace ni de caractère spécial dans le nom des images.
Modifier des images
Qualité de l’image
Luminosité et contraste
Rogner l’image
Images de fond d’un élément Web
 L’attribut CSS background-image :
background-image: url(images/centralpark2.jpg);
 Pour que l’image de fond bouge ou non en même
temps que la page défile:
background-attachment : fixed ou scroll
 Si vous voulez que la taille de l’image de fond s’adapte à
la taille de l’élément Web, ajouter ceci directement
dans la règle CSS :
background-size:100% 100%;
Image de fond répétée
 Vous pouvez répéter une image de fond pour créer une
texture à votre élément
background-repeat.
avec
l’attribut
CSS
 C’est pratique pour une entête, ou d’autres types de
contenu de votre page Web.
 L’avantage est qu’on peut utiliser une image plus petite,
donc plus rapide à chargée.
Image de fond répétée
Fausse image de fond
 On peut mettre une image derrière un autre élément
Web en utilisant l’attribut CSS z-index.
 Ces deux éléments doivent avoir le même parent.
Fausse image de fond
Une dernière chose!
N’oubliez pas d’utiliser l’attribut "alt" pour les images!
Atelier
Télécharger les images à utiliser sur le site du cours
http://lrcm.com.umontreal.ca/greg/COM2580/powerpoint/06-Gestion_des_images/Atelier/image/images_atelier.zip
Il faut obtenir ceci
Des questions???
Merci de votre attention!
A la semaine prochaine!
[email protected]
http://lrcm.com.umontreal.ca/greg/COM2580/

similar documents