Optimisation d'image
Ce qu'est l'optimisation d'image, son effet sur les performances web et les erreurs à éviter.
L'optimisation d'image réduit le nombre d'octets nécessaires pour diffuser une image, tout en conservant la qualité que le cas d'usage exige. Elle combine plusieurs étapes : choisir un format adapté, redimensionner à la taille affichée, compresser, supprimer les métadonnées inutiles et ne charger les images que lorsqu'elles sont nécessaires.
Sur le web, l'optimisation couvre aussi la diffusion. Le balisage d'image adaptatif (les attributs srcset et sizes) permet au navigateur de choisir un fichier adapté à l'écran. Le chargement différé reporte les images situées hors de l'écran, et un CDN diffuse les fichiers depuis un emplacement proche.
Le résultat se mesure en taille de fichier et en indicateurs de vitesse de page, comme le Largest Contentful Paint, l'une des Core Web Vitals de Google.
Convertir les formats d'image
Un changement de format offre souvent le gain le plus important. Image Converter convertit entre PNG, JPG et WebP dans le navigateur.
Pourquoi l'optimisation compte
Les images constituent souvent la plus grande partie d'une page web. Des images trop lourdes ralentissent le chargement sur les réseaux mobiles, consomment le forfait de données des visiteurs et peuvent faire baisser les scores de vitesse. Des fichiers plus légers facilitent aussi la gestion des dépôts de documentation, des pièces jointes d'e-mail et des exports PDF.
Techniques d'optimisation
- Redimensionner à la plus grande taille affichée, par exemple 2 fois la largeur CSS pour les écrans à haute densité.
- Choisir le format selon le contenu : PNG pour les interfaces aux aplats, JPG ou WebP pour les photos.
- Régler une qualité avec perte autour de 75 à 85 et comparer des recadrages agrandis.
- Supprimer les métadonnées inutiles, mais conserver le profil colorimétrique quand les couleurs comptent.
- Charger en différé les images situées sous la ligne de flottaison.
Optimisation des captures d'écran
Une capture Retina d'une fenêtre de 1440 pixels de large fait 2880 pixels de large. Si une page de documentation l'affiche sur 720 pixels CSS, un fichier de 1440 pixels couvre les écrans à densité 2 et représente un quart du nombre de pixels.
Dans Temposhot, choisissez JPG Export (Adjustable Quality) avec une qualité de 1 à 100 (valeur par défaut 85) pour le partage, et conservez PNG Export (Lossless) pour les originaux. Website Capture enregistre directement en JPEG, PNG ou WebP.
Erreurs courantes
- Téléverser des captures Retina complètes pour de petites vignettes.
- Compresser si fortement des captures de texte que les lettres se brouillent.
- Convertir toutes les images dans un seul format, quel que soit leur contenu.
- Optimiser la seule copie disponible et perdre l'original.
Une image à corriger tout de suite ?
Réduisez la taille du fichier avec Image Compressor, et vérifiez d'abord la taille en pixels avec Screenshot Resolution Checker.
Questions fréquentes
Faut-il utiliser le WebP pour les captures d'écran de mon site ?
Le WebP donne en général des fichiers plus légers que le PNG ou le JPG à qualité comparable, et les navigateurs actuels le prennent en charge.
Quelle taille doit avoir une capture pour la documentation ?
Environ deux fois sa largeur CSS affichée couvre les écrans à haute densité sans gaspiller d'octets.
Sources
Ressources associées
- Formats d'export : options PNG, JPG et WebP.
- Chargement différé : reporter le chargement des images hors écran.
Vous prenez toujours les mêmes captures d'écran ?
Temposhot capture un écran, une fenêtre ou une zone à intervalles programmés et exporte l'ensemble en PDF, en images, en ZIP ou en MP4. Les outils gratuits du navigateur ne permettent de traiter qu'une image à la fois.
Ressources associées
Termes associés
- Compression d'imageCe qu'est la compression d'image, la différence entre compression avec perte et sans perte, et les erreurs courantes lors de la compression de captures d'écran.
- Redimensionnement d'imageCe qu'est le redimensionnement d'image, en quoi il diffère du recadrage et les erreurs à éviter lors de la mise à l'échelle des captures d'écran.
- Chargement différéFonctionnement du chargement différé, son effet sur les captures d'écran et techniques pour détecter et gérer le contenu chargé en différé.
- Format d'imageVue d'ensemble des formats d'image courants (PNG, JPG, WebP, AVIF) et de leurs usages respectifs.
- Compression sans perteCe qu'est la compression sans perte, quels formats d'image la prennent en charge et quand la préservation exacte des pixels compte.