Int©gration des images

  • View
    29

  • Download
    0

Embed Size (px)

DESCRIPTION

Intégration des images. 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 - PowerPoint PPT Presentation

Text of Int©gration des images

Interfaces et Scnarisation (COM2571) - Introduction

Intgration des images7 novembre 2012Grgory Petithttp://lrcm.com.umontreal.ca/greg/COM2580/1La semaine dernire Les lments de mise en page

Les attributs CSS de mise en page

Lutilisation des tableaux

Lutilisation des DIVS

Et donc on fait quoi aujourdhui?Les types dimage

Gestion de la taille des images

Utilisation des images avec DreamweaverLes types dimagesTypes dimagesPour savoir le type dune image, on regarde gnralement son extension (texte aprs le . dans le nom du fichier).

Il existe deux grandes familles dimage numrique mais seulement une est grandement utilise dans le monde du Web.Deux grandes famillesImage bitmap ou par pointReprsentation graphique dfinie par lensemble des points qui la compose.Cest le codage le plus utilis.Possde une rsolution (pixels par pouce).Image vectorielleReprsentation gomtriqueCest en fait une suite de formules mathmatiques. dcrivant les formes lmentaires constituant l'image(rectangles, lignes, courbes, ellipses, etc.) Trs peu utilises en Web.Bitmap Vs. Vectoriel

ZoomImage BitmapAvantagesSupport facilement par les fureteurs.Adapt aux priphriques daffichage.Codage point par point universel.DsavantagesSupporte mal les oprations de redimensionnement, rduction ou agrandissement. Ces oprations se traduisent par une perte d'information.Dpendant du priphrique daffichage et de sa rsolution.Image vectorielleAvantagesAdapte aux reprsentations schmatiques et styliss constitues de formes.Plus compacte. Sa taille varie en fonction de la complexit de l'image, mais pas en fonction de la rsolution demande.DsavantagesNe peut pas coder une image analogique telle qu'une image photographique.Difficile manipuler dans une page Web.Types dimages BitmapJPEG (.jpg ou .jpeg) : trs bonne compression mais perte de qualit qui peut brouiller limage.GIF (.gif) : peut tre anime et gre la transparence. Limite 256 couleurs donc viter pour les photos.PNG (.png) : bonne compression sans perte. Gre la transparence. Moins utilise par les dveloppeur.TIFF (.tif ou .tiff) : compression sans perte. Gre la transparence. Fichiers volumineux.BMP (.bmp) : format par dfaut de Windows. Non compress.Types dimages vectoriellesSVG (.svg) : format de plus en plus utilis en graphisme. Utilise le format XML, donc comprhensible par tous les dveloppeurs.Illustrator (.ai) : reconnu pas tous les logiciels graphiques. Fureteurs non compatibles avec ce format.PDF (.pdf) : oui cest du vectoriel! Grande taille de fichier. Plus utilis pour les documents textes que pour les images.SVG et HTMLImpossible dinsrer une image SVG dans Dreamweaver.

Si vous voulez vraiment insrer une image vectorielle dans votre page Web, utilisez le code suivant :

Assez difficile de changer la taille de limage via HTML. Il faut choisir la bonne taille, ds la conception de limage.Gestion de la taille des imagesTaille des imagesPlus la taille dune image est grande, plus votre page Web mettra du temps charger. Il faut donc :

Minimiser autant que possible la taille des images.

Privilgier 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 Aperu!

AperuChoisissez JPEG ou JPEG-2000 puis jouez sur la qualit.

Sous WindowsIl nexiste rien en natif pour rduire la taille des images. Mais il existe XnView (gratuit).

XnView est une visionneuse dimages qui fonctionne sous Windows, Linux et Mac OS X.

Possible aussi dajouter les attributs daffichage progressif et dentrelacement.

XnView

Avec PhotoshopBeaucoup plus de paramtres donc un peu plus difficile.

Permet de visualiser directement la taille et la qualit de limage en fonction des paramtres sur lesquels on joue.

Ouvrir limage avec Photoshop, puis faire Fichier -> Sauvegarder pour le Web et les priphriquesAvec Photoshop (JPEG)

Avec Photoshop (PNG)Entrelacement et affichage progressifCes deux attributs permettent que les images de grande taille saffiche progressivement.

Un aperu flou de limage saffiche louverture de la page et limage devient de plus en plus nette avec le temps.Utilisation des images avec DreamweaverRappelPlacer les images dans un dossier part dans votre site.

Le chemin vers limage doit tre relatif (du type src="image/truc.jpg")

Vous savez dj insrer une image dans une page HTML.

Pour centrer une image, il faut mettre limage dans un lment de texte comme par exemple et appliquer lattribut CSS text-align:center cet lment.

Pas despace ni de caractre spcial dans le nom des images.

Modifier des images

Qualit de limageRogner limageLuminosit et contraste

Images de fond dun lment WebLattribut CSS background-image : background-image: url(images/centralpark2.jpg);

Pour que limage de fond bouge ou non en mme temps que la page dfile:background-attachment : fixed ou scroll

Si vous voulez que la taille de limage de fond sadapte la taille de llment Web, ajouter ceci directement dans la rgle CSS :background-size:100% 100%;

Image de fond rpteVous pouvez rpter une image de fond pour crer une texture votre lment avec lattribut CSS background-repeat.

Cest pratique pour une entte, ou dautres types de contenu de votre page Web.

Lavantage est quon peut utiliser une image plus petite, donc plus rapide charge.Image de fond rpte

Fausse image de fondOn peut mettre une image derrire un autre lment Web en utilisant lattribut CSS z-index.

Ces deux lments doivent avoir le mme parent.

Fausse image de fond

Une dernire chose!Noubliez pas dutiliser lattribut "alt" pour les images!AtelierTlcharger 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/