HTML images
Tandis que le texte constitueront la majeure partie du contenu d'un site Web, les images peuvent parfois en disent plus que mille mots ou ajouter de l'épice supplémentaire à la conception du site. Heureusement, il est très facile à mettre en œuvre des images au format HTML.
Image tag
Pour charger des images dans un document HTML, vous pouvez utiliser la balise d'image <img src="..." width="" height="" alt="..." /> . Notez qu'il est un dispositif de fermeture tag alors n'oubliez pas l'espace et slash à la fin. Similaire à l'attribut href de liens HTML l'attribut src (source) contient l'adresse absolue ou relative à un fichier image.
La largeur et la hauteur des attributs facultatifs définir la taille de l'image en pixels et peut être configuré pour exactement les mêmes valeurs que la source de l'image ou à une valeur plus ou moins important à l'échelle de l'image. Bien que ces attributs ne sont pas nécessaires, vous devriez toujours essayer de les utiliser, sinon votre navigateur Web devra calculer la taille de l'image pendant le chargement des pages qui peuvent causer le contenu à sauter partout.
L'attribut ALT (texte alternatif) décrit le contenu de l'image et est affiché au cas où l'image ne se charge pas. Notez que alt est requis pour chaque balise d'image, pour être valide XHTML 1.0 strict. Si vous ne souhaitez pas fournir un texte alt, vous pouvez simplement mettre alt="" . Si possible, vous devez toujours fournir une description de l'image car elle aidera les personnes handicapées qui utilisent des lecteurs d'écran ou des moteurs de recherche comme Google pour savoir ce que votre image est d'environ.
Image HTML
Sortie
Liens Image
A côté de liens texte, vous pouvez également utiliser les liens image ou un mélange des deux.
HTML image link
<a href="/">This link starts here <img src="/files/media/logo_text.png" alt="Web design tutorials" /> and ends here.</a>
Sortie
Les formats d'image
Bien que ce soit mieux adaptée dans le détail pour un web graphiques tutoriel, il est toujours bon de connaître les différents types de formats d'image vous pouvez utiliser. La plupart des navigateurs prennent en charge les 3 types d'images suivants:
GIF
GIF peut contenir au plus 256 couleurs (appelé aussi une palette de couleurs) sur tous les millions de couleurs que vous ordinateur peut afficher. Ils sont à utiliser de préférence pour les non-réalistes graphiques tels que des boutons, des dessins et logos.
N'ayant que peu de couleurs rend ces fichiers image relativement petite taille de fichier qui est toujours une bonne chose. Il est également possible de spécifier des pixels transparents, ce qui signifie qu'au lieu d'un rien de couleur seront tirées de fond permettant ainsi de voir à travers.
Ils appuient également l'animation en stockant plusieurs images GIF et de les lire comme une séquence. Ce n'est pas aussi largement plus utilisé, bien que, maintenant que Flash est le courant pretty much.
JPEG
Soutien JPEG 16,7 millions de couleurs et sont donc les mieux adaptés pour des photos réalistes. La qualité d'image peut varier de grande à très pauvre en fonction des paramètres de compression. Essayez de trouver un équilibre entre la taille du fichier et la qualité comme de gros fichiers provoquera votre site se charge lentement.
PNG
PNG sont un format un peu plus récente dans le paysage de la conception Web et sont censées remplacer GIF (si elle est bien compressé, PNG palettized devrait toujours être de plus petite taille de fichier que son homologue GIF). Ils appuient les palettes de couleurs comme des GIF ainsi que 16,7 millions de couleurs, comme JPEG, bien que, contrairement format jpeg, png utiliser la compression sans perte qui conserve 100% de la qualité de l'image originale.
Le plus intéressant est peut-être figurer leur appui à la transparence alpha. Chaque pixel peut avoir sa propre transparence allant de 0 à 100% (contrairement aux formats GIF, où un pixel est transparent ou opaque) permettant des effets intéressants tels que l'anti-aliasing (bordures lisses contre n'importe quelle couleur de fond). Il est pris en charge dans tous les navigateurs modernes (Firefox, Opera, Safari, IE7). Malheureusement, IE6 ne reconnaît pas nativement la transparence alpha, mais il existe certaines solutions acceptables.