Comment compresser une photo jpeg [vidéo]

Wébinaire gratuit sur la méthode pour créer un site web
Comment compresser une photo jpeg

Mettre une photo sur internet peut-être pour les débutants un vrai parcours du combattant : compresser une photo est pourtant très simple à faire. Je vous explique comment dans cette courte vidéo.

La vidéo ne commence qu’après 30 secondes d’introduction, si vous entendez ma voix et que vous voyez le titre, c’est que tout fonctionne bien!

 

Afficher la transcription de la vidéo « Compresser une photo jpeg pour le web »

Version écrite de la vidéo:

Comment compresser une photo jpeg [vidéo] | creation de site web Même si on ne veut pas la modifier, il est déconseiller de publier une photo «telle quelle». En effet, les photos qu’on réalise avec les appareils photos actuels contiennent des millions de pixel ! Cela se traduit par une haute qualité mais également un poids élevé. Avant d’être utilisée sur Internet, votre photo doit donc subir une petite préparation.

Pourquoi doit-on compresser les photos ?

Les millions de pixels que contienne votre photo lui donnent une très grande taille. Vous ne vous en rendez pas compte sur l’ordinateur car elles sont automatiquement rétrécies pour «rentrer» dans l’écran. Elles n’en sont pas moins très grandes et je vais vous le prouver.

Voici un mail que j’ai reçu contenant une photo en pièce jointe. Pour l’afficher en grand, je peux cliquez sur sur «Afficher» ou directement sur la photo. Vous voyez qu’elle s’ouvre en grand dans une nouvelle page, et qu’elle remplit parfaitement l’espace disponible. Ce n’est pas un hasard, c’est parce que mon navigateur internet l’a automatiquement ajustée. Le symbole de la souris indique une loupe avec un + à l’intérieur : cela indique qu’elle a été rétrécie, et si je clique sur l’image, elle prendra sa vrai taille.

Là, on se rend bien compte qu’une photo numérique est immense : chaque pixel est affiché, et évidemment, des millions de pixels, ça prend beaucoup de place ! Chaque pixel a un poids, ce qui rend la photo très lourde, souvent trop lourde pour être affichée «telle quelle» sur internet. Même quand mon navigateur la rétrécie automatiquement, elle fait le même poids, parce qu’elle est rétrécie mais elle n’est pas compressée. Nous allons voir pourquoi compresser une photo jpeg diminue son poids.

Une petite exception quand même, certains sites très populaires (comme facebook) compressent les photos automatiquement quand on les envoie sur notre profil, mais ça reste une pratique assez exceptionnelle.

Pour compresser une photo, nous avons besoin d’un logiciel spécialisé dans l’édition des images. Il en existe plusieurs, les plus connus sont Photofiltre, Photoshop et Gimp. Vous trouverez sous cette vidéo les liens pour les télécharger. Je vais utiliser ici Photofiltre car les deux autres sont plus complexes à utiliser et sont un peu trop puissant pour la simple manipulation que nous voulons faire ici. Ceci dit, les manœuvres et le nom des outils que l’on va utiliser sont à peu près les mêmes, donc vous pouvez en utilisez un autre si vous en avez déjà un.

1ère étape : réduire la taille de l’image.

Lancez Photofiltre et ouvrez votre photo. Allez dans le menu «Images», vous cliquez, et vous choisissez «Taille de l’image». On voit ici la taille, 4000 pixel sur 3536. La majorité de personnes qui naviguent sur internet le font avec un écran de 1024 pixels de large, c’est vraiment inutile que votre image soit plus grande. Donc je vous conseille de la réduire directement à 1000 pixel de large. N’oubliez pas de laisser coché «conserver les proportions» pour ne pas déformer l’image.

Voilà qui est fait, on ne s’en rend pas compte car ici, photofiltre ajuste la photo à la taille de l’écran, mais elle est bien plus petite que tout à l’heure.

2ème étape : réduire le poids de l’image

Pour cela, il faut la compresser. C’est très simple à faire, il suffit de l’enregistrer sous un format spécial, et c’est ce format qui va déterminer le niveau de compression et donc son poids.

Vous avez sûrement entendu parler des formats d’images : png, jpeg, gif, bitmap… on reconnait le format grâce à l’extension. Mon image est en jpeg ou jpg (c’est la même chose), c’est généralement le format qu’on obtient quand on importe une photo depuis un appareil photo numérique.

Comment choisir le bon format pour votre image ?

Ce n’est pas compliqué, il n’y en a que deux à retenir : jpeg et png. Utilisez jpeg pour les images qui contiennent des millions de couleurs, en particulier des dégradés très précis, très fin, typiquement, ce sont les photos. Et utilisez png pour les image qui contiennent quelques couleurs seulement, souvent des couleurs pleines et bien délimitées. On l’utilise typiquement pour les logos, par exemple.

Vous voyez, deux formats, deux utilisations bien séparées : ce n’est pas compliqué de choisir.

Enregistrons la photo. On vous demande ici de choisir le taux de compression. Vous pouvez sans crainte descendre à 75 sans altérer la qualité. Et vous validez !

Vous venez de compresser une photo jpeg !

Allons vérifier son poids dans le poste de travail. Ici l’originale, et son poids : 7 méga-octets (Mo). C’est très lourd ! Et la nouvelle, seulement 450 kilo-octet (ko), c’est beaucoup mieux. Ça reste assez élevé pour une image web. Mais c’est raisonnable si vous l’utilisez dans un site de partage de photo en ligne, comme picasa ou facebook (vous pouvez même aller jusqu’à 500ko sans problème).

Par contre, si vous voulez illustrer un article sur un blog, et que vous comptez afficher plusieurs photos sur la même page, alors vous ne devriez pas dépasser 100ko, soit 20 à 30ko par photo. Pour cela, vous pouvez diminuer la taille et si ça ne suffit pas, augmenter la compression lors de l’enregistrement.

Travaillez toujours sur une copie de votre photo. En effet, si vous l’enregistrez avec un trop fort taux de compression, elle va perdre en qualité et vous ne pourrez plus revenir en arrière !

Au début de cet article, je vous ai parlé des emails. Il est vrai qu’il est possible d’envoyer une image très lourde de cette façon, mais vous ne pourrez pas en mettre beaucoup ! Compresser une photo pour un envoi par mail est donc une bonne habitude à prendre. Il existe des logiciels pour compresser simultanément plusieurs photos… je vous en parlerais plus tard si ça vous intéresse: laissez moi un commentaire pour me le dire!

Fin de la transcription

Télécharger gratuitement les outils mentionnés dans la vidéo : PhotoFiltre ou Gimp

  • 1/ Télécharger PhotoFiltre en Français (gratuit – conseillé aux débutants)
  • 2/ Télécharger Gimp en Français (gratuit)

compresser une photo | compresser photo | 

Comment compresser une photo jpeg [vidéo] | creation de site web

A propos de MarieEve

Développeure et formatrice Web, Internet est mon métier et ma passion. Vous gérez votre site professionnel vous-même ? Formez-vous ici grâce à une information claire et accessible.

Lire l'article de la veille ou du lendemain

46 Commentaires pour Comment compresser une photo jpeg [vidéo]

  1. Merci Marie-Eve,

    Cette information va me servir lorsque je serai prête à mettre des photos dans mes articles.
    Bravo aussi pour la vidéo! J’espère pouvoir en faire une très prochainement.
    Longue vie à ton blog!

    • Merci Sco! Je te conseille de ne pas attendre trop pour mettre des photos dans tes articles, ça ne te prendra pas beaucoup de temps et ça égaye beaucoup. Tu peux en trouver sur http://www.freedigitalphotos.net gratuitement (il faut mettre le lien « crédit photo » vers l’auteur sur la même page que la photo).
      J’aime la fraicheur de ta plume, de belles images lui feraient hommage.

      A bientôt!

      • Merci Marie-Eve de tes encouragements au sujet de ma plume! J’avance lentement, mais sûrement.
        J’ai visité le site freedigitalphotos.net.
        Les images sont vraiment magnifiques. Merci de la suggestion. J’ai déjà téléchargé plusieurs photos. Il me reste à appliquer ta méthode pour les placer dans mes articles dans le bon format. Cependant, je ne vois pas les liens sous cette vidéo, comme tu le mentionnes, pour télécharger Photofiltre et GIMP. Je ne sais pas sur lequel des liens cliquer car sous ces deux noms, il y a plusieurs liens dans Google!

        S.V.P. peux-tu nous donner ces liens pour le bénéfice de tous!
        Merci et continue ton excellent travail. Je suis heureuse de voir qu’une femme se débrouille en informatique. Je t’admire!
        Merci!
        Sco!

  2. Bonjour Marie-Eve

    Comme toi je suis dans la formation d’Aurélien et je constate que nos thématiques sont proches. Super ta première vidéo et surtout très utile la compression d’images… c’est un point important auquel on ne pense pas au prime abord.

    à bientôt
    Olivier

    • Merci pour tes encouragements Olivier! En effet, nos thématiques sont proches. Bien pensée la vidéo sur la modification du fichier index.php après l’achat du nom de domaine. J’avais oublié, mais quand j’ai fait mon tout premier site web (en 2007), ça avait été le cauchemar! Je ne comprenais rien au concept de « la racine du site », j’étais complètement perdue. A l’époque, il n’y avait pas de blog, mais heureusement, il y avait déjà les forums. Je pense que ton tuto en aidera plus d’un.
      Bonne continuation!

  3. Bonjour Marie-Eve,

    Bravo pour t’être lancer.

    Peux-tu dire la même chose en moins de temps et parler plus fort en faisant attention au ton afin de captiver l’intérêt de celui qui écoute?
    C’est mon ressenti et j’espère que ma remarque n’est pas trop désobligeante.

    • Merci Pierre-Antoine pour ta remarque constructive. Tu as raison, les trois critères que tu soulèves sont en effet des points à améliorer. Je note donc pour mon prochain screencast: plus fort, plus court et une voix plus entraînante.
      A bientôt!

  4. Très bon article Marie-Ève,

    J’ai appris quelque chose sur ces manipulations de photos et je trouve que ton blog est un bon complément à la formation d’Aurélien.

    Je pense que nous n’exploitons pas assez ce créneau dans nos articles. L’adage « une image vaut mille mots » s’applique vraiment avec l’internet alors que les gens passe souvent rapidement sur nos articles.

    Si nous sommes en mesure de les garder captifs un peu plus longtemps grâce à une image, nous gagnerons en efficacité!

    À bientôt

    • Je te rejoins totalement sur ce sujet. D’ailleurs, je vais bientôt faire un article sur les sites qui proposent des images gratuites et comment s’y retrouver avec les droits d’auteurs. Reste à l’écoute!
      A bientôt :)

  5. Pingback: Comment compresser une image jpg avec GIMPen 8 clics | Les 3 A

  6. Salut Jérémie,
    Merci de l’info, je ne connaissais pas ce service! Malheureusement, je ne trouve cet outil très efficace (ou je l’utilise mal ?).
    Je viens de l’essayer sur l’image de l’article. J’ai d’abord passé mon image compressé (31ko) et Smush.it en a fait une image à 30ko. Pas terrible comme perte…
    Je me suis dit que ce service était sûrement fait pour optimiser des images qui ne sont pas déjà compressées…mais avec l’originale (86ko), le résultat est de 76ko.
    J’ai encore essayé avec une photo HD mais l’image est trop lourde pour être chargée.Du coup, je vais en rester à une compression manuelle, je crois!
    Ceci dit, ça peut intéresser ceux qui ne veulent pas se casser la tête avec un logiciel comme Photofiltre! Merci pour eux!
    A bientôt

    • Je ne connais pas l’algo utilisé par Smush.it car en effet, les résultats sont très variables selon le type d’image de base, les zones de blanc présentes,… Et il ne dispense évidemment pas de tout le travail en amont à effectuer sur Photoshop pour la compression. C’est juste à la toute fin, une habitude que j’ai prise, pour gagner encore quelques ko (sur mon dernier projet, 50ko réparti sur l’ensemble des images après nouvelle compression, entre autre parce que cet outil supprime les meta-données des images telles que les informations sur sa colorimétrie,…).

  7. Yep, je vais te faire confiance Marie Eve, pas la peine que je perde du temps à faire des essais, tes résultats sont parlants d’eux-mêmes.
    @+ Olivier

  8. Merci beaucoup Marie-Eve de cette vidéo très concrète et didactique.
    Apprenti blogueur chez bloguer&gagner, je vais utiliser tes conseils pour les photos des articles.
    Bonnes pensées.
    Jean

  9. Bonjour Marie-Eve,

    Très bonne explication sur l’utilisation des images. Moi-aussi débutant blogueur, je teste pour mes articles l’utilisation des images et à la lecture de ta vidéo, je me demande si celles qui agrémentent mes articles, ne sont en fait, pas trop ‘lourdes » .
    (je vais voir ça!)

    En effet, je n’ai pas appliquer les conseils et précautions que tu délivres avant de les charger sur mon site?

    Tes conseils via ton site, sont de bons compléments à la formation d’Aurélien et je reviendrai pour y « piocher » tes infos judicieuses en plus de mon inscription à ta newsletter

    Bravo pour ton initiative et bon succès à toi.

    Salutations et à très bientôt.

    Jean-Lou

    P.S: Une question: ton site est en 1, 2 ou trois colonnes?
    Cette question, car sur mon écran en 19 pouces et réglé sur 100 %: ta page est « plein cadre » avec ton texte décalé sur la gauche et donc un espace « libre » sur la droite?

    De plus, les photos des visiteurs viennent se placer parfois sur le texte de leur témoignages (?)

    (petites remarques amicales & constructives!)

    • Bonsoir Jean-Lou,
      Merci pour tes encouragements, j’espère que tu trouveras mes conseils utiles :)
      Mon site est en deux colonnes, centrés au milieu de ton écran. Parfois quand un article est très long, la colonne de droite est trop courte et on a l’impression que le design est décalé.
      Si tu penses que mon site est mal rendu sur ton écran, peux-tu s’il te plait m’envoyer une capture d’écran par mail à marieeve[arobase]lesdoigtsdanslenet[point]com ainsi que le type d’ordinateur que tu utilises (window xp, mac etc) ? Si tu as besoin d’aide, envoie moi un mail, ce sera plus simple pour discuter que via les commentaires ;)
      A bientôt et merci pour tes remarques!

  10. Bonsoir Marie-Eve,

    Bien malgré moi le temps m’a fait défaut et je n’ai pas répondu à ton message. Sorry!!

    Toutefois je vois que tout est rentré dans l’ordre, les petits soucis que j’avais noté ne sont plus là.
    Soit cela venait de mon matériel à ce moment là ou bien tu as réglé le problème! (??)

    Pour info, j’utilise windows xp sur pc.

    Ta thématique sans être proche de la mienne, répond par bien des côtés à une recherche d’entraide bienveillante, cher aussi à mon projet/blog.

    Tout comme j’apprécie ton approche pédagogique adaptée aux débutants que nous sommes voire même à destination des plus qualifiés…

    ..sans aucun doute, ton site et les conseils qu’il contient pourrait intéresser mes visiteurs !

    Dans ce sens, si cela peut correspondre à ta vision des choses…nous pourrions faire un échange de liens réciproques pour le bénéfice des internautes sensibles à nos thématiques??

    Quelque soit ta réponse, ce sera un plaisir de revenir sur ton blog pour apprendre à devenir un infopreneur digne de ce nom, ceci, grâce à la complémentarité de tes « formations » avec Bloguer- Gagner.

    Très bonne année 2012 par chez toi.

    • Avec plaisir Jean-Lou! Nos thématiques sont assez éloignées mais ça ne me pose pas de problème, tu as l’air motivé et c’est important de se soutenir.
      Je vais t’envoyer un mail cet après-midi avec le détails de mon lien. A tout à l’heure et merci pour ta proposition!

  11. Pingback: Les Doigts dans le Web #3 - Les Doigts dans le Net

  12. Pingback: Votre site web de location saisonnière en 15 minutes - Les Doigts dans le Net

  13. Pingback: Les 5 commandements du webmaster débutant - Les Doigts dans le Net

  14. Bonjour Marie-Eve,
    Je reviens sur cet article par le biais des mails d’aide que tu avais envoyé. J’ai pas mal de photos sur mon blog que je rétrécie systématiquement à 1000 pixel grand max mais je ne savais pas que l’on pouvait aussi compresser l’image. Je trouve que mon bloh manque de vitesse alors j’essaye de mettre en pratique tout ce qui peut être utile. J’ai déjà pas de photos sur mon blog : est-ce trop tard pour les compresser ?!! Je suppose que oui car il fallait le faire avant arff !! Me conseilles-tu de le faire pour toutes les photos à partir d’aujourd’hui ? Connais-tu une solution de masse pour compresser celles qui sont déjà sur le blog stp ?

    PS : je ne sais pas si c’est chez moi mais pas moyen de faire fonctionner le commentluv « Error. Parsing JSON Request failed. error! not authorized b61a7144eb » O_o

    • Salut Michaela,
      Il me semble que c’est aléatoire. Moi même, sur des blogs qui je commente souvent, parfois le commentLuv donne cette erreur…va savoir pourquoi!

      Pour ton problème de photo, tu peux les compresser mais il te faudra les re-télécharger sur ton serveur (long et fastidieux comme travail, mais si tu en as le courage…)

      Sinon, j’utilise FileMinimizer Picture comme logiciel qui compresse un ensemble de photos en une fois. (pas toujours très performant, ça dépend de la photo). Sur WP, tu as un plugin « SmushIt » qui compresse les photos automatiquement quand tu les uploades. Mais perso, je le trouve très peu performant. Tu gagneras quelques ko au mieux…le jeu en vaut-il la chandelle ?

      Le mieux pour l’avenir, c’est de le faire manuellement pour chaque photo.

      Bon courage!

  15. Bonjour,

    Je ne comprends pas votre raisonnement en disant « Utilisez jpeg pour les images qui contiennent des millions de couleurs, en particulier des dégradés très précis, très fin, typiquement, ce sont les photos. Et utilisez png pour les image qui contiennent quelques couleurs seulement, souvent des couleurs pleines et bien délimitées. On l’utilise typiquement pour les logos, par exemple. »

    Le PNG 24 supporte une palette de 16 777 216 couleurs ! Il est en plus un format sans perte, contrairement au JPG, son seul problème est la taille du fichier. Perso, je trouve que le choix pourrait se faire selon l’utilisation (si on a besoin d’une image de bonne qualité peu importe la taille, on se penche sur le PNG, dans le cas contraire sur le JPG).

    • Bonjour,
      Dans ma description je parle du PNG8 et non du PNG24. Le 8 n’est vraiment approprié pour les millions de couleurs. Je le montre en image dans mon article « Les 5 commandements du webmaster débutant ».

      Quand a utiliser tout le temps png24, ça parait une bonne idée mais en fait c’est un format très lourd comparé au jpeg. Donc on ne l’utilise que pour des images de petites dimensions comme … les logos et les icônes! ;)

  16. Bonjour et bravo,

    Très belle prestation.

    Je m’intéresse depuis pas mal de temps à tout ce qui tourne autour de la construction de sites et au blogging.

    Jusqu’à présent je ne voyais pas bien justement la différence entre le poids et la taille. Je ne voyais pas l’incidence bien de l’un ou/de l’autre. Je ne comprenais pas si c’était la taille seule qui faisait le poids. Personne ne m’as jamais répondu pensant sans doute que c’était une question bête.
    .
    C’est la première fois que je vois une explication aussi claire, bien faite et de façon plus que sympathique sur ce sujet.
    Très bonne diction, bon son, intonation excellente et jolie voix.

    Je n’avais jamais trouvé que des explications parcellaires, incomplètes et mal faites par des personnes qui s’imaginent que l’on va comprendre à 100% ce qu’ils ont beaucoup de mal à nous faire passer.

    Je commençais à désespérer.
    C’est chose résolue instantanément pour toujours grâce à vous
    Nous avons besoin de vos talents de pédagogue.
    Encore merci

    Phil

    • Bonjour Philippe,

      Un grand merci pour votre commentaire! :) Je suis ravie que mes explications vous soient si utiles.

      Vous devriez jeter un oeil aux autres tutoriels vidéos, celle que vous venez de regarder est ma toute première, j’ai fait pas mal de progrès depuis ;)

      A bientôt!

  17. Bonjour MarieEve!

    Wouah, je suis gâté en ce lendemain de Noël :)
    Gérer la taille des photos a toujours été un casse-tête pour moi et là, j’ai plusieurs réponses dans un seul article C’est cool.
    J’ai un nom de programme pour les modifier, un site pour les télécharger, une explication sur le choix des extensions, une taille maxi à ne pas dépasser pour un article.
    Et cerise sur le gâteau, un blog qui va m’aider dans mon apprentissage du blogging.
    Merci MarieEve pour cette superbe initiative qui va en aider plus d’un, j’en suis sûr.
    Bien amicalement.
    Maxime

    • Bonjour,

      Le but de la manip est justement de trouver un compromis entre compression et qualité. Car au final, il n’y a pas vraiment le choix: les images doivent être compressées, sinon adieu les visiteurs à cause d’un temps de chargement bien trop élevé!

  18. bonjour Marie.
    merci, merci, j’ai 62 ans, et il n’y a pas longtemps que j’ai un PC .je voulez envoyé une photo sur une annonce de vente, sans y arrivé, grâce à votre site, j’ai tout compris, et cella m’a bien aidé.
    c’est clair, et bien expliqué
    merci beaucoup encore,et vous souhaite une bonne journée
    PS continuez, les novices comme moi, ont besoin de vous.
    RICHARD

  19. Le 04/07/2013

    Merci pour ce tuto.
    J’ai réduit une photo de 2,8 Mega octets à 144.K
    Elle fait maintenant 610 pixels sur 458.

    Comment l’alléger encore jusqu’à 20 ko, mais sans réduire sa taille encore plus?

    Merci de ta réponse

    • Bonjour
      Si c’est une .jpeg vous pouvez l’enregistrer à nouveau en augmentant encore la compression. Trouvez la juste mesure pour ne pas trop perdre en qualité.

      Si c’est une .png elle est trop grande. Ce format est adapté pour de petites images. Enregistrez la en .jpeg.

      Bonne continuation :)

  20. Bonsoir Marie-Eve,
    Je déterre ce sujet après avoir constaté que mon site était lent à charger à cause d’images non compressées… dixit PageSpeed Insights de Google. Du coup, je viens d’essayer PhotoFiltre, mais le taux de compression sur mes jpeg est faible : de 45 à 40 Ko, ou de 25 à 22… Par contre sur les png c’est nickel : ma bannière est passée de 36 à 13 Ko ! Quand on sait qu’elle est chargée sur toutes les pages (je n’ai pas de système de cache).
    Merci pour cette vidéo.
    Je vais quand même chercher un autre logiciel de compression pour mes jpeg ;-)
    A bientôt,
    Jérémie

  21. Et réalité, j’ai parlé un peu vite dans mon dernier message… ^^
    Il suffisait de bien gérer les réglages de compression : pour tous les jpg de mon blog (plus de 100, je viens d’y passer presque 2h, mais je vois déjà l’accélération du temps de chargement !), j’ai divisé par 2, 3 ou 4 le poids en réglant la compression sur 80, le format sur progressif et en ne gardant pas les informations liées à l’image. Et certains png se sont révélés beaucoup moins lourds en jpg. Et aucune perte visible de qualité !
    Merci encore ;-)

  22. Pingback: Les statistiques du blog en Septembre 2012 - Les Doigts dans le Net

  23. je tente de faire de la photo de mes voyages et votre article va peut être bien m’éveiller à la compression et à la publication si je réussis à passer à l’application de vos conseils pourtant très précis Merci pour votre aide
    De la part d’un nul en informatique mais le vieux tente de se soigner

A votre tour de vous exprimer!

  • Utilisez votre prénom/nom/pseudo afin de conserver le lien vers votre site.
  • Ecrivez un commentaire intéressant pour attirer du trafic sur votre site (les liens sont dofollow).
  • Les mots-clefs seront remplacés par [mot-clef modéré] et le backlink sera supprimé.
  • Merci de m'aider à faire de ce blog un espace d'échange constructif, dans l'intérêt de tous.

*


A bientôt! Marie-Eve