Les images non optimisées sur le web peuvent nuire à l’expérience utilisateur.
Cela peut entraîner une communication visuelle moins efficace et une apparence désordonnée.
Explorez comment HTML et CSS peuvent transformer vos images pour un impact visuel optimal.
Lancez votre carrière de développeur web avec une formation pratique.
Optimisation des images sur le web
Maintenant nous allons plonger dans le monde du média et leur importance dans la structuration des sites web, ou n’importe quelle projet numérique, ils donnent vie au contenu et le rendent plus interactif et attrayant . Que ce soit des images, vidéos ou audios, ces derniers renforcent la communication visuelle et sonore , et garantissent une bonne expérience utilisateur .
Dans ce chapitre , nous allons aborder les images avant de passer a d’autres types de contenu multimédia .
L’ajout des images suscitent l’intérêt de l’utilisateur , et peut transmettre des informations complexes , qui nous pourront pas être compris par texte .
CSS pour modifier le comportement d'images
Pour ajouter des images en HTML on définit la src : chemin ou l’URL de l’image.
alt : Fournit une description textuelle de l’image.
<div>
<img decoding="async" class="image" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="image 1" / width="" height="" data-lazy-src="images/001.jpg"><noscript><img decoding="async" class="image" src="images/001.jpg" alt="image 1" / width="" height=""></noscript>
<img decoding="async" class="image" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="image 2" / width="" height="" data-lazy-src="images/002.jpg"><noscript><img decoding="async" class="image" src="images/002.jpg" alt="image 2" / width="" height=""></noscript>
</div>
En HTML, les images par défaut, ont un comportement inline, un élément s’aligne directement avec les autres éléments, et n’occuper que l’espaces insuffisant pour son contenu. Comme dans cet exemple, les deux images insérées avec la balise <img> apparaissent dans la même ligne.
Pour afficher les images l’une en dessous de l’autre, on peut forcer un comportement block , en ajoutant le code CSS .
img{
display: block;
}
Styler et contenir les images HTML
Lors de la conception de votre page web, vous pouvez ajouter des styles aux images afin d’améliorer leur apparence, leur positionnement, etc. Voici une démarche progressive pour personnaliser les images avec du code CSS.
Vous pouvez commencer, par supprimer les marges et espaces internes par défaut de votre navigateur.
body{
padding: 0;
margin: 0;
}
Pour centrer la div horizontalement en utilise margin:auto , il faut également définir la largeur de la div , pour que margin:auto fonctionne , sans cette largeur définie , la div peut prendre toute la largeur disponible et ne sera pas centré .
div{
margin: auto;
width: 230px;
}
Pour améliorer l’apparence des images, vous pouvez leur appliquer des bordures, du padding, et d’autres styles :
.image{
border: 1px solid black;
padding: 15px;
}
Si l’on modifie la largeur du conteneur div en remplaçant width: 230px par width: 100% :
div{
margin: auto;
width: 100%;
}
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 ajouter des images en HTML?
Comment modifier l'affichage des images avec CSS?
Pourquoi styliser les images et leur conteneur?
Comment centrer une div en CSS?
Comment améliorer l'apparence des images?
Conclusion
L’optimisation des images sur le web est cruciale pour une meilleure interaction et expérience utilisateur. Quelles autres techniques envisagez-vous pour enrichir votre contenu visuel?
