La mauvaise intégration des images en HTML peut nuire à l’expérience utilisateur.
Des images mal optimisées ralentissent le chargement des pages et dégradent la qualité visuelle.
Découvrez comment intégrer efficacement des images pour améliorer la performance et l’attrait visuel de votre site.
Lancez votre carrière de développeur web avec une formation pratique.
Intégration des images HTML
L’intégration des images dans les pages web, aux début du Web, a profondément transformé l’expérience en lignes, en ajoutant une dimension visuelle qui captivaient des utilisateurs.
Dans ce chapitre nous allons explorer les types d’images, et les bonnes pratiques pour les intégrer dans nos pages web.
Pour mettre une image simple sur une page web, nous utiliserons l’élément <img>.
Syntaxe :
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Description de l'image" width="" height="" data-lazy-src="chemin_vers_votre_image.jpg"><noscript><img decoding="async" src="chemin_vers_votre_image.jpg" alt="Description de l'image" width="" height=""></noscript>
src : Cet attribut contient un chemin pointant vers l’image que vous voulez intégrer, qui peut être une URL absolue ou relative .
alt : Sa valeur est supposée être un descriptif sous forme de texte de l’image, à utiliser dans les cas où l’image ne peut être affichée.
Maintenant on va mettre ceci on pratique, en insérant une image dans notre page index.html, comme ceci :
Pour avoir ce résultat, vous devez d’abord, mettre votre image dans le même répertoire que
votre fichier index .html :
Ensuite, spécifier la src et le texte descriptif de votre image :
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport"content="width=device-width,initial-scale=1.0">
<title>index</title>
<style id="wpr-lazyload-bg-container"></style><style id="wpr-lazyload-bg-exclusion"></style>
<noscript>
<style id="wpr-lazyload-bg-nostyle">.jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https://blog.alphorm.com/wp-content/plugins/jet-tabs/assets/images/spinner-32.svg');}.rll-youtube-player .play{--wpr-bg-a7a0ccf3-a799-479f-9d0f-13d7d07b4b2f: url('https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/img/youtube.png');}</style>
</noscript>
<script type="application/javascript">const rocket_pairs = [{"selector":".jet-image-accordion__item-loader span","style":".jet-image-accordion__item-loader span{--wpr-bg-b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg');}","hash":"b5f84ee5-f0b7-432a-b1bd-0f52e4b9e5ba","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/jet-tabs\/assets\/images\/spinner-32.svg"},{"selector":".rll-youtube-player .play","style":".rll-youtube-player .play{--wpr-bg-a7a0ccf3-a799-479f-9d0f-13d7d07b4b2f: url('https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png');}","hash":"a7a0ccf3-a799-479f-9d0f-13d7d07b4b2f","url":"https:\/\/blog.alphorm.com\/wp-content\/plugins\/wp-rocket\/assets\/img\/youtube.png"}]; const rocket_excluded_pairs = [];</script></head>
<body>
<h1>HTML & CSS </h1>
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="logo html&css" / width="" height="" data-lazy-src="logo.png"><noscript><img decoding="async" src="logo.png" alt="logo html&css" / width="" height=""></noscript>
<script>var rocket_beacon_data = {"ajax_url":"https:\/\/blog.alphorm.com\/wp-admin\/admin-ajax.php","nonce":"a38001b5a8","url":"https:\/\/blog.alphorm.com\/integration-images-html-balise-img-formats","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":null,"status":{"atf":true,"lrc":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800}</script><script data-name="wpr-wpr-beacon" src='https://blog.alphorm.com/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script><script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html›
Vous pouvez mettre votre images dans un sous-répertoire images situé dans le même dossier que votre page HTML (qui sera plus pratique pour l’organisation de votre site),alors vous l’intégrerez comme ceci :
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="logo html&css" / width="" height="" data-lazy-src="images/logo.png"><noscript><img decoding="async" src="images/logo.png" alt="logo html&css" / width="" height=""></noscript>
Formats d'image pour le web
Maintenant que nous avons une compréhension globale du rôle des images dans le web, nous allons plonger dans les extensions d’images les plus couramment utilisés avec HTML, ainsi que les bonnes pratiques pour optimiser l’utilisation de ces extensions, de sorte que vos images soient efficaces en termes de qualité et taille.
Il existe deux types d’images : les images matricielles et les images vectorielles.
- Les images matricielles sont décomposées en pixel. Lors de l’enregistrement de l’image, la position et la couleur de chaque pixel sont stockées dans une grille de pixel.
- Les images vectorielles sont composées d’objets géométriques simples (arcs de cercle, polygones, segments de droite, …) représentés par des formules mathématiques.
On commence par explorer les formats les plus courants sur le web :
- Le format JPG ou JPEG :c’est le format le plus populaire, il est connu pour sa légèreté, il permet de compresser les images en gardant une qualité visuelle décente, en plus de la possibilité de choisir le niveau de compression, il peut prendre en charge jusqu’à 16 millions de couleurs. Par contre, il ne prend pas en charge la gestion de la transparence et une compression excessive peut entraîner une perte de qualité visible. Vous pouvez utiliser ce format pour les photos sans transparence, arrière-plans et images de grande taille.
- Le format PNG :Existe en deux versions : le PNG 8 bits qui supporte jusqu’à 256 couleurs, et le PNG 24 bits, offre une palette de 16 millions de couleurs. Le PNG 24 conserve la qualité sans risque de pixellisation et permet la gestion précise de la transparence, mais il peut être lourd à charger. Vous pouvez l’utiliser si vos visuels nécessitant une couche alpha, ou pour les éléments graphiques autres que les photos, tels que les logos ou les schémas, nécessitant une large gamme de couleurs.
- Le format GIF :Principalement utilisé pour la gestion des animations, conserve la qualité d’image sans pixellisation et avec une possibilité de choisir le nombre de couleurs indexées limité à 256 couleurs et ne prend en charge que la transparence binaire.
Optimiser la taille des images
La taille des images que vous intégrer dans vos pages web est importante dans leur présentation et optimisation. Lors de l’intégration de vos images, vous pouvez spécifier sa taille en utilisant les attributs ‘width’ pour contrôler la largeur et l’attribut ‘height’ pour la hauteur.
- Width :Définit la largeur de l’image en pixels. Si cette option n’est pas spécifiée, l’image est affichée à sa taille réelle. On indique soit la valeur en pixel, soit en pourcentage de la taille originale de l’image.
- Height :Définit la hauteur de l’image en pixels.NB1 :quand une seule des deux options WIDTH ou HEIGHT est spécifiée, l’autre est automatiquement calculée en proportion.NB2 :toujours indiquer au moins un des deux paramètres pour accélérer l’affichage.
On peut contrôler la taille de l’image de l’exemple précédant en ajoutant ces attributs :
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20250%200'%3E%3C/svg%3E" alt="logo html&css" height="350" width="250" data-lazy-src="logo.png"/><noscript><img decoding="async" src="logo.png" alt="logo html&css" height="350" width="250"/></noscript>
On obtient le résultat suivant :
Pour occuper la taille de toute la fenêtre :
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20100%200'%3E%3C/svg%3E" alt="logo html&css" width="100%" data-lazy-src="logo.png" /><noscript><img decoding="async" src="logo.png" alt="logo html&css" width="100%" /></noscript>
En résumé, l’intégration des images en HTML demeure essentiel pour rendre l’expérience des utilisateurs plus engageante visuellement . En utilisant la balise <img>, on spécifie où trouver l’image via l’attribut src . Les attributs height et width permettent de contrôler la taille de l’image, assurant une présentation harmonieuse et optimale sur tous les types d’appareils et de résolutions d’écran. Maîtriser ces aspects est crucial pour améliorer l’accessibilité, la performance et l’attrait visuel d’un site web, contribuant ainsi à une expérience utilisateur améliorée et à une navigation fluide.
Formez-vous gratuitement avec Alphorm !
Maîtrisez les compétences clés en IT grâce à nos formations gratuites et accélérez votre carrière dès aujourd'hui.
FAQ
Comment insérer une image en HTML ?
Quels sont les meilleurs formats d'image pour le web ?
Comment optimiser la taille des images en HTML ?
Quelle est l'importance de l'attribut 'alt' dans une image HTML ?
Quelles sont les meilleures pratiques pour organiser les fichiers d'images ?
Conclusion
En maîtrisant l’intégration et l’optimisation des images en HTML, vous améliorez non seulement l’esthétique mais aussi la performance de votre site. Quelle sera votre prochaine étape pour perfectionner l’expérience utilisateur sur votre site web ?
