Trucsweb.com

Trucsweb.com

HTML

L’icône de votre site dans les favoris de IE5

RDFFav

Les images - Image, design et photographies

Bien que l’on retrouve deux types d’images dans une page Web, celles qui composent le design et les autres, la principale caractéristique des images sur Internet est celle d’être exclusivement de forme rectangulaire. Peu importe son usage, son format, qu’elle soit imbriquée ou en image de fond, c’est un rectangle de x (largeur) par y (hauteur) pixehtml,balise, tag, images, img, src, dimension, redimensionner, size, width, height, align, absmiddle, top, bottom, jpeg, gif, transparent, transparence, png, bitmap, bmpLes images - Image, design et photographies

  • · Niveau : DÉBUTANT
  • · Compatibilité : Tous les navigateurs

Bien que l’on retrouve deux types d’images dans une page Web, celles qui composent le design et les autres, la principale caractéristique des images sur Internet est celle d’être exclusivement de forme rectangulaire. Peu importe son usage, son format, qu’elle soit imbriquée ou en image de fond, c’est un rectangle de x (largeur) par y (hauteur) pixels. Le secret à la base de tout design sur le Web est donc possible grâce à une astuce fort simple ; La transparence sur une la couleur ou image de fond. En jouant sur le fond des images, par la couleur, ou même par motif répétitif (patern), les différentes images peuvent être imbriqué donnant ainsi l’illusion des formes les plus diverses.

Exemple du design du site de Marcel Barbeau, les images découpées sont combinées sur une couleur de fond uniforme.

À défaut de trouver votre image dans une banque d’image ou sur Google, la conception d’images pour le Web est un art en soit. Je vous invite à consulter la section Infographie particulièrement les tutoriels suivants :

La balise <img>
Une image est avant tout un fichier de format jpeg, gif, png ou bmp. C’est un fichier indépendant qui doit être transféré tout comme une page Web. L’image doit aussi être chargée par le navigateur avant d’être mise en mémoire cache puis affichée dans la page. Il arrive souvent en effet, qu’une page Web n’affiche pas certaines images qui n’ont tout simplement pas été transférées sur le serveur en même temps que la page HTML!

 

L’attribut src
Pour indiquer au navigateur où se trouve l’image, nous utilisons le même système d’adressage qu’une page HTML. C’est à dire le URL (Universal Resource Locator). Voir href.

<!--Image RELATIVE située dans le même dossier (répertoire) que le document HTML. -->
<img src="monImage.png" />

<!--Image RELATIVE au document HTML. -->
<img src="/images/monImage.png" />

<!-- Image ABSOLUE avec une l’adresse en entier. Cette située peut se trouver -->
<!-- sur un autre serveur (distant) que le document HTML d’origine. -->
<img src="http://www.trucsweb.com/images/monImage.png" />

 

 

Dimensions de l’image (width et height)
Bien que ce soit optionnel, il est fortement recommandé d’indiquer les dimensions exactes de l’image afin d’améliorer la performance du Navigateur. Sachez toute fois que le navigateur est en mesure d’afficher correctement les images avec les bonnes dimensions. Ce qui permet plusieurs astuces. Par exemple modifier de façon dynamique la grandeur d’une image! En ne spécifiant que la largeur, la hauteur est automatiquement évaluée par le navigateur. Inversement, en ne spécifiant que la hauteur. Cette astuce permet de garder les proportions d’une image «redimentionnée».

Pour trouver les dimensions exactes d’une image, ouvrez l’image dans un navigateur en tapant le «url» de l’image directement dans la barre d’adresse.

Noter que le navigateur déformer l’image. En principe, cette méthode ne s’utilise que pour normaliser la hauteur ou la largeur de plusieurs vignettes. Pour véritablement redimensionner une image, il faut un logiciel spécialisé.

<!--Image RELATIVE située dans le même dossier (répertoire) que le document HTML. -->
<img src="monImage.png" width="150" height="150" />
 

» Suite Les images : Pour préserver la capture des images

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

    Ajouter un commentaire
    Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
    Votre évaluation du tutoriel

           Visites : 5445 - Pages vues : 14003
    X

    Trucsweb.com Connexion

    Connexion

    X

    Trucsweb.com Mot de passe perdu

    Connexion

    X

    Trucsweb.com Conditions générales

    Conditions

    Responsabilité

    La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

    Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

    Droit applicable et juridiction compétente

    Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Glossaire

    X

    Trucsweb.com Trucsweb

    X

    Trucsweb.com Trucsweb

    Conditions

    Aucun message!

    Merci.

    X
    Aucun message!
    X

    Trucsweb.com Créer un compte

    Créer un compte

    .
    @