Optimiser les images web : formats, dimensions et chargement
Choisir les bons fichiers, préserver la qualité des photos et vérifier leur chargement, avec des exemples de portfolio et une méthode de contrôle.
Pour alléger une page, commencez par les images qu’elle télécharge réellement. Un fichier de grande taille peut être adapté à une vue plein écran et inutile dans une petite carte. Le bon compromis dépend du sujet photographié, de la place occupée et de la précision nécessaire.
Faire l’inventaire avant de compresser
Dans l’onglet Réseau du navigateur, filtrez les images et rechargez la page. Notez pour chaque fichier son poids transféré, ses dimensions et son usage. Classez ensuite les images : photo principale, miniature, galerie, logo ou illustration informative.
Sur les fiches du portfolio, une capture doit permettre de comprendre une interface. Sur le template photographe, le cadrage et la restitution des détails font partie de la démonstration. Appliquer le même réglage à tout le dossier peut rendre un texte illisible ou dégrader une photo importante.
Choisir un format à partir du résultat
Pour une photographie, comparez JPEG, WebP et AVIF sur votre propre fichier. Pour un logo vectoriel, conservez un SVG maîtrisé. Le PNG reste utile lorsque la transparence ou la fidélité des aplats et des captures le justifient.
Il n’existe pas de pourcentage de compression valable pour toutes les images. Exportez deux ou trois variantes, comparez-les à la taille d’affichage réelle et gardez la plus légère qui préserve les détails utiles. Inspectez particulièrement les dégradés, les visages et les petits caractères. Principes d’optimisation des images sur MDN.
Fournir une taille adaptée à chaque écran
Un fichier destiné à une carte ne doit pas imposer le téléchargement de la version plein écran. Les attributs srcset et sizes permettent au navigateur de choisir une variante selon l’affichage et la densité de l’écran. Le ratio réservé évite que le contenu se déplace au chargement.
Voici un exemple à adapter aux dimensions réelles de votre grille :
<img
src="atelier-800.webp"
srcset="atelier-400.webp 400w, atelier-800.webp 800w, atelier-1200.webp 1200w"
sizes="(max-width: 700px) 100vw, 50vw"
width="1200" height="800"
loading="lazy"
alt="Pose de la verrière entre la cuisine et le salon">
Cet exemple concerne une image située plus bas dans la page. Les fichiers cités doivent être créés et le sizes doit correspondre à votre mise en page, pas être copié sans vérification.
Distinguer l’image principale de la galerie
La photo principale doit pouvoir être découverte immédiatement. Évitez de la cacher derrière un composant qui attend JavaScript ou de lui appliquer un chargement différé si elle constitue le contenu visible à l’ouverture.
Les images suivantes peuvent utiliser le chargement différé natif. Conservez leurs balises dans le HTML et leurs dimensions : la page doit rester compréhensible lorsque JavaScript échoue. C’est l’approche utilisée désormais pour les images de ce portfolio, y compris l’étude de cas LR Studios.
Un aperçu flouté est un choix de présentation, pas une garantie automatique. Vérifiez toujours que l’image finale apparaît, même si son événement de chargement n’est pas traité par un script.
Écrire un texte alternatif utile
Décrivez ce que l’image apporte dans son contexte. Une capture de réalisation peut nommer l’écran montré ; une photographie de chantier peut expliquer l’ouvrage. Évitez de répéter une liste de mots-clés ou la légende intégralement. Une image purement décorative peut avoir un attribut alt vide.
Pour une page métier artisan, une photo légendée avec le type de travail et le contexte renseigne davantage qu’une image générique sans explication. Ne publiez pas d’adresse client ou d’information personnelle sans raison et autorisation.
Vérifier le résultat après mise en ligne
Rechargez sur un petit écran avec le cache désactivé. Vérifiez le fichier choisi, sa qualité et l’absence de saut de page. Ouvrez une réalisation en grand, puis revenez à la grille : les deux usages doivent rester lisibles. Contrôlez enfin le LCP et le CLS avec le même protocole avant et après.
Conservez les originaux en dehors du dossier public pour préparer de futurs recadrages. Documentez les tailles utilisées : la prochaine personne qui ajoute une image pourra reproduire le bon export. Pour une galerie plus importante, mes prestations de création et de refonte permettent de cadrer ce travail dès la conception.