Compresser un JPG pour le web

Sur une page de contenu typique, les images représentent la majorité des octets transférés, et la plus grande est souvent l'élément du Largest Contentful Paint — la métrique mesurée directement par les Core Web Vitals. Une image principale qui arrive une demi-seconde en retard décale le LCP d'une demi-seconde, et un LCP supérieur à 2,5 secondes est le seuil au-delà duquel une page cesse d'être considérée comme bonne.

L'erreur la plus courante est de servir le fichier directement issu de l'appareil photo ou du designer. Un JPEG de 4000px et 5 Mo affiché dans un conteneur de 1200px transfère environ vingt fois plus de données que ce que la mise en page peut afficher. Le navigateur le redimensionne à la réception, donc le visiteur attend pour du détail qui est sacrifié avant même d'être affiché.

La qualité 78 se situe juste en dessous du seuil où les artefacts JPEG deviennent perceptibles sur du contenu photographique, et 1920 pixels couvre l'affichage en pleine largeur sur l'immense majorité des écrans. Ensemble, ils réduisent généralement une image principale à moins de 300 Ko. Monter la qualité plus haut coûte de la fidélité visible pour relativement peu de poids ; augmenter les dimensions commence à paraître flou sur les écrans haute densité.

La compression n'est cependant qu'une partie de la solution, le reste relève du balisage. Définissez des attributs width et height explicites pour que le navigateur puisse réserver l'espace et éviter les décalages de mise en page, ajoutez loading="lazy" à tout ce qui est sous la vue initiale, et laissez la seule image qui constitue l'élément LCP se charger immédiatement. Servir un format moderne en complément du JPEG via un élément picture est souvent la prochaine amélioration la plus importante après cette étape.