Comment ajouter des images au HTML

De nos jours, avec le développement d'Internet, la conception de sites Web est devenue une compétence importante. Dans la conception de sites Web, les images sont souvent des éléments très importants. Par conséquent, comment ajouter des images en HTML est une connaissance de base que tout concepteur de sites Web doit maîtriser. Cet article présentera les balises d'image de base, les attributs d'image et les formats d'image courants en HTML, ainsi que la façon d'optimiser et de citer des images.

1. Balises et attributs d'image de base

En HTML, les images peuvent être insérées via la balise Voici la syntaxe la plus basique de la balise  :

<img src="图片的url" alt="图片的描述">

Parmi elles, l'attribut src est obligatoire et il spécifie l'URL du fichier image, c'est-à-dire l'adresse de l'image sur le serveur. L'attribut alt est facultatif et définit le texte alternatif qui s'affiche lorsque l'image ne peut pas être chargée. Par exemple :

<img src="https://example.com/image.jpg" alt="这是一张图片">

Si le fichier image est dans le même répertoire que le fichier HTML, vous pouvez utiliser une URL relative :

<img src="image.jpg" alt="这是一张图片">

Vous pouvez également utiliser un chemin relatif pour spécifier le sous-répertoire où se trouve l'image :

<img src="images/image.jpg" alt="这是一张图片">

En plus des attributs src et alt, certains attributs couramment utilisés peuvent être utilisés pour contrôler l'apparence et le comportement des images, tels que :

• Attributs width et height : spécifiez respectivement la largeur et la hauteur de l'image, ainsi que l'unité peut être des pixels (px) ou un pourcentage (%).
• Attribut border : Spécifiez la largeur de la bordure de l'image, l'unité peut être le pixel (px).
• attribut align : Spécifie l'alignement horizontal de l'image, la valeur peut être à gauche, à droite ou au centre.
• Attribut title : Spécifiez le texte d'invite affiché lorsque l'utilisateur passe la souris sur l'image.

Par exemple, le code suivant peut centrer une image et spécifier la largeur, la hauteur et la bordure en même temps :

<img src="image.jpg" alt="这是一张图片" width="200" height="150" border="1" align="center">

2. Formats d'image courants

Dans la conception Web, il existe trois formats d'image couramment utilisés : JPEG, PNG et GIF.

JPEG (également connu sous le nom de JPG) est un format de compression avec perte couramment utilisé pour stocker des photos et autres images réelles. La qualité de compression du JPEG peut être contrôlée en ajustant le taux de compression. Plus le taux de compression est élevé, plus la qualité de l'image est mauvaise et plus la taille du fichier est petite.

PNG (Portable Network Graphics) est un format de compression sans perte qui peut afficher une transparence et une profondeur de couleur plus élevée et convient à l'enregistrement de graphiques et d'icônes au niveau des pixels. Les fichiers PNG ont généralement une taille de fichier plus grande que les fichiers JPEG, mais ont une meilleure qualité.

GIF (Graphics Interchange Format) est un format graphique basé sur bitmap qui prend en charge l'animation et la transparence et peut compresser plusieurs images en un seul fichier. Le GIF est généralement utilisé pour enregistrer de petites images dynamiques, telles que des emojis et de petites animations.

Lors du choix d'un format d'image, vous devez décider quel format utiliser en fonction du type et du but de l'image. Par exemple, lorsque vous devez enregistrer des dégradés de couleurs et des détails riches dans l'image, vous pouvez utiliser le format JPEG et lorsque vous devez enregistrer la transparence et une qualité supérieure, vous pouvez utiliser le format PNG ;

3. Optimiser et citer les images

Dans la conception Web, l'optimisation et la citation des images sont également très importantes. L'optimisation des images peut réduire la taille du fichier et accélérer le chargement des pages. Voici quelques méthodes d'optimisation courantes :

• Compresser les images : réduire la taille du fichier sans affecter la qualité de l'image.
• Recadrer l'image : conservez uniquement la partie requise de l'image et réduisez la taille du fichier.
• Cache images : utilisez le cache du navigateur pour éviter de télécharger les mêmes images à plusieurs reprises.
• Utilisez des sprites CSS : fusionnez plusieurs petites images en une seule grande image, utilisez le positionnement en arrière-plan en CSS pour afficher les parties requises et réduisez le nombre de requêtes HTTP.

Lorsque vous citez des images, vous devez faire attention aux points suivants :

• Le chemin du fichier image doit être correct : si le chemin est erroné, l'image ne peut pas être chargée.
• Les images doivent correspondre au thème de la page Web : des images inappropriées peuvent rendre la page Web encombrée.
• Ne surdimensionnez pas les images : des images trop grandes augmenteront le temps de chargement des pages.

Il existe de nombreuses façons de référencer des images. Par exemple, vous pouvez utiliser des URL relatives et des URL absolues, ou vous pouvez utiliser la balise de base pour spécifier l'URL de base. Voici un exemple de code :

Utilisez l'URL relative :

<img src="../images/image.jpg" alt="这是一张图片">

Utilisez l'URL absolue :

<img src="https://example.com/image.jpg" alt="这是一张图片">

Utilisez la balise de base :

  


  <img src="images/image.jpg" alt="这是一张图片">

Résumé

Dans la conception Web, les images sont des éléments très importants. Afin de référencer et d'optimiser correctement les images, nous devons comprendre les balises et les attributs d'image de base en HTML, ainsi que choisir le format d'image et la méthode d'optimisation appropriés. Ce n’est qu’en maîtrisant ces connaissances que nous pourrons concevoir des pages Web belles et efficaces.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!