Comment j'ai reduit la taille de mes images de 80 % sans que personne ne s'en apercoive
Des exemples concrets avant-apres montrant comment une compression agressive d'images peut economiser des megaoctets sans sacrifier la qualite visible. Reglages specifiques inclus.
Je gere un site web. Chaque image qui s'y trouvait etait, a un moment donne, comiquement surdimensionnee. Des images hero de douze megaoctets. Des captures d'ecran de cinq megaoctets. Un logo qui pesait plus lourd que toute la page HTML sur laquelle il se trouvait.
Quand j'ai enfin effectue un audit de performance, les resultats etaient brutaux. Ma page d'accueil faisait 23 Mo. La majorite etait des images. La plupart des visiteurs attendaient plusieurs secondes pour des photos qu'ils regardaient a peine.
Alors j'ai commence a compresser. Agressivement. Et voici ce qui est surprenant : personne n'a rien remarque.
J'ai montre a vingt personnes une comparaison cote a cote -- image originale a 5,2 Mo contre compressee a 1,1 Mo -- et je leur ai demande de reperer la difference. Dix-neuf n'ont pas pu. La seule personne qui pensait voir une difference a change d'avis quand j'ai echange les positions.
Cette experience a change ma facon de penser la qualite d'image. Nous accumulons tous des pixels dont nous n'avons pas besoin.
Pourquoi les images sont gonflees
Votre appareil photo ou telephone enregistre les images en qualite maximale par defaut. Un appareil photo de smartphone moderne produit des images de 4000 a 6000 pixels de large. Pour une utilisation web, la plupart des images sont affichees a 1200-2000 pixels de large. Vous conservez quatre fois plus de pixels que necessaire, et chacun prend de la place.
La compression fonctionne en supprimant les informations redondantes. La compression JPEG est particulierement bonne pour cela -- elle elimine les donnees de couleur que l'oeil humain a du mal a remarquer. L'astuce consiste a trouver le point ideal ou le fichier diminue considerablement mais la difference visible est imperceptible.
Mes reglages exacts
Voici exactement ce que je fais, et cela fonctionne pour 90 % des images :
- Ouvrir Image Compress. Il gere le JPEG et le PNG. Pas d'installation, pas de compte.
- Regler la qualite a 70-80 %. C'est la plage magique pour le JPEG. En dessous de 60 %, les artefacts commencent a apparaitre. Au-dessus de 85 %, la taille du fichier diminue a peine. 75 % est ma valeur par defaut. Je n'ai jamais eu de plainte.
- Redimensionner si necessaire. Pour les images qui seront affichees en moins que plein ecran, je redimensionne le bord le plus long a 2000 px. Cela seul reduit la taille du fichier de 60 a 70 % avant meme que la compression n'entre en jeu.
- Verifier l'apercu. L'outil montre l'avant et l'apres. Zoomez. Si vous ne voyez pas d'artefacts a 100 % de zoom, vos visiteurs non plus.
Voici des chiffres reels de mon dernier lot :
- Photo hero : 8,1 Mo a 1,3 Mo (84 % de reduction)
- Capture d'ecran : 3,4 Mo a 512 Ko (85 % de reduction)
- Image produit : 5,7 Mo a 894 Ko (84 % de reduction)
- Logo (PNG) : 1,2 Mo a 187 Ko (84 % de reduction, converti en JPEG)
Ma page d'accueil est passee de 23 Mo a 4,1 Mo. Le temps de chargement est passe de 4,2 secondes a 0,9 seconde. Et encore une fois : personne n'a rien remarque. Pas un seul visiteur ne m'a envoye un email disant "hey, vos images ont l'air un peu moins nettes."
La lecon est simple : vous conservez trop de pixels. Laissez-en partir certains. Vos visiteurs vous remercieront avec des temps de chargement plus rapides, et ils ne remarqueront rien.