Je continue mon (dis)cours sur les images pour le web, ici je tente d’expliquer pourquoi redimensionner ses images et les logiques des formats qui s’offrent à nous. Je parle aussi un peu de l’insertion d’une image dans une page web, à la fin.

72 dpi, donc.

Tous les pixels du monde ont la même taille, par contre les écrans de vos visiteurs ne sont pas tous identiques. Exemple en images et  avec les stat de ce site.

L’image figurée dans mon illustration équivaut à un format classique de 600 x 400px. Attention à ne pas afficher d’images trop grandes, sous peine de déborder certains visiteurs…

Formats d’images

Le poids des images exposées sur des sites est aussi un critère important. Basiquement, plus une image utilise de couleurs et plus elle sera lente à afficher pour les visiteurs. Un peu moins basiquement, de savants calculateurs nous ont concocté des formules permettant de compresser plus finement les images en fonction de leur aspect. 3 standards de compression sont reconnus sur le web: JPG, Gif et PNG.

Jpg –> Tout le monde connaît, ça sort des appareils photos donc c’est bon pour les photos. Pas de transparence, flou de compression.

Gif –> Pour gérer finement le nombre de couleurs et le poids des images contrastées. Gère un niveau de transparence sur plusieurs trames au choix, existe en version animée.

Png –> Gère la transparence sur 255 niveaux, comme une quatrième couleur primaire. La classe, mais pour de petites images parce que du coup c’est un peu lourd. En plus, on ne peut pas vraiment les utiliser pour l’habillage des sites, certains navigateurs ne les digérant pas très bien…

Intégration

Pour mettre une image dans une page web, on a d’abord besoin qu’elle soit stockée à un endroit accessible, qu’elle possède une adresse url. Cela peut être sur un serveur perso ou via un service comme flickr ou picasa. La plupart des blogs et autres proposent  directement de charger les  images depuis votre ordinateur et se chargent de leur classement.

Une fois cette condition remplie, le code html pour insérer l’image ressemble à cela:

une balise image doit ressembler à cela:

<img src="mon_image_rangee.jpg" width="50" height="50" title="titre image" alt="texte alternatif en cas de pb de chargement" />

où src correspond à l’adresse de l’image, height et width donnent ses dimensions en pixels, alt contient le texte qui s’affichera en cas de problème et title titre l’image pour les moteurs de recherche.

Ce billet a été publié le Vendredi, novembre 13th, 2009 à 4:40, classé dans HTML & CSS, Restes du Monde du Web. Suivez les réactions à ce billet via ce fil RSS RSS 2.0. Réagissez ici, ou poursuivez la discussion sur votre site.