Pourquoi l'optimisation des images améliore un site Web
Les images représentent généralement une partie importante des données téléchargées par une page. Un fichier volumineux retarde l’apparition du contenu, consomme plus de données mobiles et peut dégrader l’expérience du visiteur. L'optimisation combine trois décisions : les dimensions, le format et le niveau de compression.
Il n'existe pas de limite parfaite pour toutes les images. Une vignette devrait peser beaucoup moins qu’une photo qui occupe tout l’écran. L'objectif est de fournir suffisamment de pixels et de qualité pour l'espace réel, sans obliger le navigateur à télécharger des informations qu'il n'utilisera pas.
Déroulement recommandé étape par étape
- Identifie la largeur maximale à laquelle l'image apparaîtra dans la mise en page.
- Recadrez le cadre avant de compresser pour éviter de conserver les zones qui seront éliminées.
- Choisir le format en fonction du contenu et du besoin de transparence.
- Ouvrir le fichier dans le compresseur d'images et essayez une qualité moyenne-élevée.
- Comparez les poids et examinez le texte, les bords, les faces et les dégradés.
- Publiez le résultat et consultez la page sur mobile et ordinateur.
Dimensions : évitez de télécharger plus de pixels que nécessaire
Si une carte affiche une image de 600 pixels de large, télécharger une photo de 5 000 pixels est généralement un gaspillage. Le navigateur le réduira visuellement, mais il devra d'abord télécharger l'intégralité du fichier. Préparez une version proche de la taille maximale requise par la conception.
Pour les écrans haute densité, il peut être utile de fournir une version environ deux fois plus grande, mais idéalement, le site devrait utiliser des images réactives avec jeu de clés y tailles. De cette façon, chaque appareil télécharge une variante appropriée au lieu du même fichier géant.
Quel format choisir
- JPG : Mode bonne compatibilité et taille raisonnable pour les photos non transparentes.
- WebP : utile pour les photos et les graphiques Web ; peut préserver la transparence et proposer des fichiers compacts.
- PNG : adapté à la transparence, aux captures d'écran avec du texte clair et des graphiques simples ; Cela peut peser lourd sur les photographies.
- SVG : idéal pour les logos et icônes vectoriels lorsque le fichier est sécurisé et que le design a été créé en tant que vecteur.
La conversion à partir du format ne garantit pas un fichier plus petit. Comparez toujours le résultat et conservez le format d’origine lorsque c’est l’option la plus efficace. Consultez le comparaison entre JPG, PNG et WebP si vous ne savez pas lequel choisir.
Comment choisir la qualité de compression
Commencez par un paramètre axé sur l'apparence et progressez vers le bas. Les photos tolèrent mieux la compression que les captures d’écran de l’interface, les diagrammes et les petits textes. Si des halos, des blocs ou des bords flous apparaissent, augmentez la qualité ou essayez un autre format.
Évaluez le fichier dans la page, pas seulement dans une vue développée. Une petite différence visible à 300 % peut ne pas être perceptible à une taille normale ; Cependant, une écriture manuscrite illisible sur une carte constitue un réel problème.
La compression ne remplace pas une bonne implémentation
En plus d'optimiser le fichier, réserver de l'espace avec des attributs largeur y hauteur pour éviter les sauts de contenu. Utilisez le chargement paresseux sur les images qui se trouvent en dehors du premier bloc visible, mais ne retardez pas l'image principale si cela est nécessaire pour comprendre la page.
C'est également une bonne idée de définir un long cache pour les fichiers avec des noms versionnés et d'éviter de charger la même image dans plusieurs résolutions à l'aide de CSS. Ces décisions nécessitent des modifications du site, mais complètent les économies réalisées lors de la compression.
Erreurs courantes
Compresser avant de décider de la taille
Un redimensionnement ultérieur force le traitement du fichier deux fois et peut accumuler des pertes. Décidez d’abord du cadrage et des dimensions ; compresser à la fin.
Convertir les captures d'écran en JPG de faible qualité
Les lettres et lignes fines peuvent provoquer des bavures. Essayez PNG ou WebP avec une qualité supérieure et comparez le poids.
Utiliser une petite image comme en-tête
Le développer ne récupère pas les détails. Il part d'une source suffisamment grande et génère des variantes plus petites à partir de cette version.
Questions fréquemment posées
Quel doit être le poids d'une image Web ?
Cela dépend de ses dimensions, de son importance et de sa complexité. Utiliser comme critère le poids le plus bas qui maintient une qualité acceptable dans sa taille finale, au lieu de rechercher un chiffre universel.
Dois-je convertir toutes les images en WebP ?
Pas nécessairement. WebP est utile, mais un simple PNG ou un fichier déjà optimisé peut ne pas s'améliorer. Convertissez un échantillon, mesurez et conservez les originaux.
La compression des images seule améliore-t-elle le positionnement ?
Cela améliore l'expérience et les performances, mais le classement dépend également du contenu utile, de l'exploration, des liens, de l'intention de recherche et de nombreux autres signaux. La compression est une partie d'un site Web bien préparé.
Préparer une image plus claire
Ajustez la qualité ou définissez une taille cible, comparez le résultat et téléchargez la version qui correspond le mieux à votre page.
Compresser l'image pour le Web