Optimiser les images pour un site web : taille, format et chargement

Pour optimiser les images d’un site web, procédez dans cet ordre : ramenez chaque image à la largeur à laquelle elle est réellement affichée (environ le double pour les écrans haute densité), enregistrez-la dans un format moderne comme WebP ou AVIF avec un JPEG ou un PNG de secours, compressez-la à une qualité où la différence ne se voit pas, et supprimez les métadonnées dont personne n’a besoin. Le HTML fait ensuite sa part : plusieurs tailles dans srcset, les attributs width et height, et le chargement différé pour les images plus bas dans la page.

Ce guide explique pourquoi chaque étape compte, par quels réglages commencer et comment tout faire dans votre navigateur avec SchweizerIMG — pour une image ou un dossier entier.

Pourquoi les images déterminent la vitesse de votre site

Sur la plupart des sites, les images représentent une grande part des données qu’un navigateur doit télécharger. Chaque kilo-octet superflu coûte du temps sur une connexion mobile, et la plus grande image en haut de page est souvent l’élément que les visiteurs attendent. Les moteurs de recherche tiennent compte de la vitesse des pages à leur manière ; des images plus légères profitent donc d’abord aux visiteurs, puis à la visibilité. Les raisons les plus courantes d’une image trop lourde :

• Trop de pixels. Une photo sortie d’un smartphone ou d’un appareil photo fait plusieurs milliers de pixels de large ; une colonne de contenu en affiche rarement plus qu’une fraction.
• Un format inadapté. Une photo enregistrée en PNG est plusieurs fois plus lourde que nécessaire ; une capture d’écran enregistrée en JPEG de faible qualité paraît floue.
• Une qualité trop élevée. Au-delà d’un certain point, une valeur de qualité plus haute n’ajoute que des octets que l’œil ne voit pas.
• Des suppléments invisibles. Données de l’appareil, coordonnées GPS, historique de retouche et aperçus intégrés accompagnent chaque téléchargement.

Quelles dimensions d’image pour un site web ?

Commencez par une question : quelle est la largeur de cette image dans la page ? Vérifiez-la dans votre mise en page ou avec les outils de développement du navigateur. Smartphones, tablettes et de nombreux portables ont des écrans haute densité qui utilisent deux pixels physiques ou plus par pixel CSS : une image affichée sur 800 pixels de large est donc nette si le fichier en mesure environ 1600. Aller bien au-delà du double de la largeur d’affichage améliore rarement ce que voient les visiteurs, mais alourdit toujours le fichier. Quelques points de départ :

Dans SchweizerIMG, Redimensionner avec « Plus grand côté » ou « Adapter à un cadre » ramène tout un lot à la taille voulue, avec un rééchantillonnage de haute qualité et une accentuation facultative après réduction. Les images plus petites ne sont pas agrandies, sauf si vous l’autorisez — agrandir ajoute des pixels, pas des détails.

Formats modernes : WebP et AVIF avec une solution de secours

Le format décide de l’efficacité avec laquelle les pixels sont stockés. Pour les photos sur le web, les deux formats modernes donnent généralement des fichiers nettement plus légers que le JPEG à qualité visible égale :

• WebP — pris en charge par tous les grands navigateurs actuels, avec transparence et animation. Un choix sûr par défaut pour les photos et les graphiques.
• AVIF — souvent encore plus léger, surtout pour les petits fichiers, et pris en charge par les versions actuelles des grands navigateurs. L’encodage est plus long, ce qui se remarque sur les grands lots.
• JPEG — le format de secours qui fonctionne partout, y compris dans les anciens navigateurs, les e-mails et presque tous les logiciels.
• PNG — pour les captures d’écran, les graphiques d’interface et les images qui exigent des pixels exacts ou de la transparence ; trop lourd pour les photos.
• SVG — pour les logos et les icônes dessinés plutôt que photographiés : nets à toutes les tailles et généralement minuscules.

Avec l’élément HTML <picture>, le navigateur prend le premier format qu’il prend en charge : vous pouvez proposer AVIF et WebP et garder le JPEG comme filet de sécurité. Les forces et limites de chaque format sont comparées dans WebP, AVIF, JPEG, PNG : les différences.

Quelle compression pour les images d’un site ?

Les formats avec perte échangent un peu de détail invisible contre des fichiers beaucoup plus légers. Le bon réglage dépend de l’image : un paysage très détaillé demande une qualité plus élevée qu’un portrait sur fond flou (explications dans la compression d’image expliquée). Plutôt que de deviner une valeur, laissez l’outil mesurer. Compresser une image propose quatre modes :

• Automatique, avec les niveaux Légère, Recommandée ou Forte — l’outil cherche la qualité la plus basse qui atteint encore une ressemblance mesurée avec l’original pour le niveau choisi.
• Choisir la qualité — une valeur fixe de 1 à 100, si vous savez déjà ce qui convient à votre site.
• Taille de fichier cible — compresse jusqu’à ce que l’image respecte une limite et, si vous l’autorisez, réduit aussi ses dimensions.
• Sans perte uniquement — pour les captures d’écran et les graphiques qui doivent rester exacts au pixel près.

Si « Enregistrer en » est réglé sur « Le plus léger entre WebP, AVIF et JPEG », l’outil essaie ces formats et garde le résultat le plus léger ; le résultat n’est jamais plus lourd que l’original. Pour le vérifier, Comparer des images montre l’original et le résultat avec un curseur ou côte à côte, avec des mesures de ressemblance.

Supprimez ensuite ce que personne ne voit. Modèle d’appareil, numéros de série, coordonnées GPS, historique de retouche et aperçus intégrés ne servent à rien aux visiteurs. Supprimer les métadonnées les retire sans perte, sans réencoder les pixels ; Redimensionner, Compresser une image, Convertir le format et Optimiser pour le web ont aussi leur propre réglage des métadonnées. Ce que ces détails peuvent révéler est expliqué dans ce que révèlent vos photos.

Le HTML vous aide : srcset, width et height, chargement différé

Des fichiers optimisés, c’est la moitié du travail ; l’autre moitié, c’est la façon dont la page les charge — des pratiques web générales, valables pour tout système de site :

• `srcset` et `sizes` proposent la même image en plusieurs largeurs : un smartphone télécharge une petite version, un grand écran une grande.
• Les attributs `width` et `height` indiquent au navigateur les proportions de l’image avant son arrivée. Il réserve la place, et le texte en dessous ne saute pas quand l’image apparaît.
• `loading="lazy"` reporte le chargement des images plus bas dans la page jusqu’à ce que le visiteur s’en approche. Ne l’utilisez pas pour l’image principale en haut : celle-ci doit se charger tout de suite.
• Une grande image en haut, pas cinq. Le plus grand élément visible à l’ouverture de la page est ce que les visiteurs perçoivent comme « chargé ».

Ce dernier point porte un nom : Largest Contentful Paint (LCP), le temps nécessaire pour afficher la plus grande image ou le plus grand bloc de texte de la zone visible. Il est défini dans une spécification du W3C et fait partie des mesures couramment utilisées pour évaluer la vitesse d’une page. Une image d’en-tête légère, aux bonnes dimensions et sans chargement différé est l’un des moyens les plus directs de l’améliorer.

Optimiser les images de votre site avec SchweizerIMG

Chaque étape se déroule dans votre navigateur : les images sont traitées sur votre appareil et ne nous sont jamais envoyées, ce qui compte pour des images pas encore publiques (plus d’informations sur la page sécurité). Chaque outil traite un lot entier en un traitement, et un traitement correspond à une opération, quel que soit le nombre de fichiers.

1. 1

   Ramener à la taille d’affichage

   Ouvrez Redimensionner, ajoutez vos images et choisissez « Plus grand côté » ou « Adapter à un cadre » avec la largeur déterminée — le double de la largeur d’affichage pour les écrans haute densité.

2. 2

   Compresser ou convertir

   Utilisez Compresser une image avec « Le plus léger entre WebP, AVIF et JPEG », ou Convertir le format si vous avez besoin d’un format précis. Continuer avec un autre outil transmet les résultats sans les télécharger entre-temps — voir enchaîner les outils.

3. 3

   Supprimer les métadonnées

   Terminez avec Supprimer les métadonnées, ou réglez l’option des métadonnées de l’outil précédent sur « Retirer ».

4. 4

   Télécharger et publier

   Enregistrez les résultats juste après le traitement — ils n’existent que dans l’onglet ouvert — puis publiez-les comme d’habitude.

Pour votre propre site, Optimiser pour le web réunit ces étapes en un seul traitement : il crée plusieurs largeurs (par défaut de 480 à 2400 pixels, jamais plus grandes que l’original) en AVIF, WebP et JPEG, supprime les métadonnées par défaut et rédige un extrait <picture> prêt à coller avec srcset, sizes, width, height et un chargement différé ou immédiat, ainsi qu’un manifeste de tous les fichiers. Les plans qui incluent Optimiser pour le web sont indiqués sur la page des tarifs. Plus d’informations sur les lots : traiter plusieurs images à la fois.

Questions fréquentes

Quelle est la taille d’image idéale pour un site web ?

Il n’existe pas de chiffre unique : exportez chaque image à sa largeur d’affichage, et environ au double pour les écrans haute densité. Une image d’en-tête pleine largeur gagne à être proposée en plusieurs tailles avec srcset.

Faut-il utiliser WebP ou AVIF sur mon site ?

Les deux sont de bons choix. WebP est le choix sûr, largement pris en charge ; AVIF donne souvent des fichiers plus légers, mais l’encodage est plus long. En proposant les deux dans un élément <picture> avec un JPEG de secours, chaque navigateur reçoit le meilleur format qu’il sait afficher.

Faut-il différer le chargement de toutes les images ?

Non. Le chargement différé est utile pour les images situées plus bas dans la page. L’image principale visible en haut doit se charger immédiatement — la retarder rend la page plus lente en apparence, pas plus rapide.

Supprimer les métadonnées rend-il les images plus légères ?

En général un peu seulement : sur la plupart des photos, les métadonnées représentent une petite partie du fichier. Les aperçus intégrés, les grands profils de couleur ou les longs historiques de retouche peuvent peser davantage. La raison principale de les retirer des images web est la protection des données, plus que la taille.

Prêt pour des pages plus légères ? Ouvrez les outils d’optimisation, découvrez comment compresser et convertir des images, suivez la méthode pour les photos de produits d’une boutique ou créez un compte gratuit.