Dans le cadre d'un site la poids des images est une donnée essentielle à prendre en compte, plus celui-ci étant élevé plus le site mettra du temps à s'afficher. Pour cela il est recommandé d'optimiser (un minimum) le poids des images.
Les différents formats d'images
.png : Format qui permet d'avoir un fond transparent, à utiliser pour les images avec des aplats de couleurs à défaut du .svg
.jpg : Format à utiliser pour les photographies à défaut du webp.
.webp : Le format le plus optimisé pour le web, il est environ 30% plus léger que le .jpg.
.svg : Format vectoriel.
Les formats à bannir : .HEIC, .TIFF. Dans le doute, utilisé du .jpg.
Le poids des images
Il est important de redimensionner ses images pour éviter d'envoyer des images d'une taille trop importante.
Pour une image qui est utilisé en pleine page 2000px de large sont suffisant. Dans le reste des cas 1000px de large suffit souvent. Il est aussi possible de générer plusieurs taille d'images qui s'adapteront à la taille de l'écran. Le plus simple est de se créer des scripts photoshop pour traiter les images par lots.
La balise img
Pour importer une image on utilise la balise img qui va comporter une source, src="lienVersLimage" et peut comporter une description, alt="DescriptionDeLimage" dans le cas ou l'image ne s'affiche pas ou pour des questions d'accessibilités pour les personnes malvoyantes.
La balise image.
Si la balise img peut être utilisé avec avec class et des id pour être stylisé en CSS je vous conseil plutôt de placer vos images dans des div qui vont contenir vos images et auxquelles vous allez donner forme. Cela vous permet plus de flexibilité dans la mise en forme si vous souhaitez rajouter une légende à l'image ou autre. Ensuite vous pouvez rajouter le bout de code qui suit dans votre CSS pour que vos images occupe l'ensemble de l'espace de vos div.
img{
display : block;
position : relative;
width : 100%;
height : auto;
}
Pour pousser le chargement et l'utilisation des images voir la balise picture et srcset permettant de charger des images différentes en fonction du contexte.
Positionnement avancée, display : flex & grid
Flex
Display flex permet de créer un container parent qui va faciliter le positionnement des élements enfants.
lien vers rappel sur l'utilisation de flexbox
Vidéo sur l'utilisation de display flex
CSS Grid
Il est également possible de créer des grilles pour venir y inscrire ses différents éléments. L'utilisation basique de celle-ci pour le container parent est :
.MonContainer{
display : grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
Cela permettra la création dun espace ou les éléments enfants se placeront dans une grille de 3 colonnes avec une marge de 10px.
Pour une utilisation avancé des grilles css voir ce tutoriel.
Si les grilles CSS sont plus complexes au premier abord elles permettent au final plus de flexibilité sur le placement de vos éléments. C'est à vous de choisir quel propriété convient le mieux à vos besoins.
.png){kind=logo}
