Intégration des images

7 novembre 2012Gré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’imagesPour 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 famillesImage 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 vectorielleReprésentation géométriqueC’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 BitmapAvantages

Supporté facilement par les fureteurs.Adapté aux périphériques d’affichage.Codage point par point universel.

DésavantagesSupporte 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 vectorielleAvantages

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ésavantagesNe peut pas coder une image analogique telle

qu'une image photographique.Difficile à manipuler dans une page Web.

Types d’images BitmapJPEG (.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 vectoriellesSVG (.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 HTMLImpossible 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 imagesPlus 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 XOn peut faire ça directement avec Aperçu!

AperçuChoisissez JPEG ou JPEG-2000 puis jouez sur

la qualité.

Sous WindowsIl 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 PhotoshopBeaucoup 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

RappelPlacer 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

Rogner l’image

Luminosité et contraste

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éeVous pouvez répéter une image de fond pour

créer une texture à votre élément avec l’attribut CSS background-repeat.

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 fondOn 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 courshttp://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!

gregory.petit@umontreal.cahttp://lrcm.com.umontreal.ca/greg/COM2580/