Compresser vos images avant de les importer sur votre site est une étape cruciale pour préserver la vitesse de téléchargement de votre site internet. Selon le httparchive.org, plus de 50% du poids d’une page web provient des images seulement. Dans l’article qui suit, je vais vous montrer comment compresser vos images sans utiliser Photoshop.
Suivez le lien suivant pour savoir comment optimiser une image avec Photoshop.
Contenu de l’article
Pourquoi compresser vos images
Source : httparchive.org
Selon Google, 53% des mobinautes abandonnent une session si un site web prend plus que 3 secondes à charger.
50% des internautes s’attendent à ce qu’un site web ne prenne pas plus que 2 secondes à télécharger.
Tout le monde peut optimiser des images pour le web sans avoir accès à un logiciel payant comme Photoshop. Il s’agit d’une étape importante par laquelle vous devriez toujours passer afin que les navigateurs web et mobile téléchargent vos photos rapidement.
Certes la vitesse de téléchargement d’une image dépend de la connexion internet de l’internaute. Cependant, en tant que propriétaires de sites internet, nous avons la responsabilité d’effectuer toutes les améliorations nécessaires pour réduire ce temps de téléchargement de nos sites afin d’améliorer l’expérience utilisateur. Une étape importante de ces améliorations consiste à optimiser les images.
Compresser une image sans Photoshop
Dans la démonstration d’aujourd’hui, je vais vous montrer comment j’optimise mes images pour le web sans utiliser Photoshop. Je reprends les deux étapes pour réduire le poids d’une image :
- redimensionner ou rogner l’image
- la compresser
Ce dont vous avez besoin :
- une photo à optimiser
- le logiciel d’édition de photo installé par défaut sur votre ordinateur. Si vous êtes sur PC, vous allez utiliser un logiciel comme Paint ou Microsoft Photo Editor. Si vous êtes sur MAC, vous allez utiliser Preview.
Démonstration avec la compression d’un JPEG
L’objectif à atteindre
Pour le projet d’aujourd’hui, j’ai téléchargé une image de la banque d’images SplitShire. L’image de départ :
- pèse 19,5 Mo
- mesure 5 781 pixels de large pour 3 854 pixels de long.
Si on devait intégrer l’image originale, il faudrait attendre 23 secondes pour que cette image télécharge avec une connection 3G. C’est beaucoup trop long.
Nous allons optimiser cette photo pour lui donner une largeur de 1024px. La longueur sera calculée automatiquement en fonction du ratio largeur / longueur de la photo initiale. Notre objectif est d’arriver à une photo qui ne pèse pas plus de 200 Ko.
Démonstration
Le résultat final
Au final, nous avons réussi à réduire le poids de l’image original de plus de 99%. Alors qu’il fallait plus d’une heure pour télécharger l’image originale à très faible débit. Ca prendra maintenant moins d’une seconde pour télécharger l’image optimisée sur un réseau 3G. L’impact sur la qualité de l’image est très négligeable.
Pour ceux qui ont accès à Photoshop, vous pouvez lire le tutoriel pour savoir comment compresser une image avec Photoshop.
Bonjour,
Pour le redimensionnement de ta photo, tu fais 1024px, est-ce une taille standard à appliquer à toutes les photos ou cela dépend de l’utilisation finale de la photo ?
Merci de ton retour et bravo pour ton contenu que je découvre.
Amicalement,
Fabrice
Hello Fabrice,
En fait c’était un exemple, je te dirais qu’il n’existe pas de taille standard. Si tu utilises l’image pour le web, ça dépend vraiment du visuel que tu utilises. Cependant, en général, j’ai tendance à redimensionner pour une taille entre 960px et 1024px.
Je te recommande de faire quelques tests de dimensions pour ton site web et de voir quelle est la taille qui te donne le meilleur rapport poids d’image et qualité de l’image après compression.
Merci beaucoup de me lire et bonne soirée 🙂