Comleweb - 1 Rue du Bazin - 57160 Rozerieulles - France06 63 87 02 56contact@comleweb.com
Contact info
Comleweb - 1 Rue du Bazin - 57160 Rozerieulles - France06 63 87 02 56contact@comleweb.com

Pour un site rapide, il faut mettre ses images aux bonnes dimensions, les compresser et les nommer

Une page internet qui met beaucoup de temps à apparaitre est une perte assurée de visiteurs ! Il est facile d’y remédier en prenant quelques bonnes habitudes dés le départ.

Ce sera bénéfique pour l’internaute et pour votre référencement.

Les moteurs regardent très favorablement les sites bien construits et rapides, c’est une commodité pour l’internaute et aussi un geste pour la nature, un site léger consommant moins d’énergie.

Les règles à adopter pour mettre des photos sur un site internet :

  • Réduire au maximum leurs dimensions.
  • Les compresser
  • Les nommer
  • Remplir la balise alt

 

Quelques chiffres pour prendre conscience que des photos trop lourdes peuvent allonger considérablement le temps de chargement d’une page internet.

 

◄ Cette photo(*), mise aux bonnes dimensions et compressée, fait 210 pixels de large et a un poids de 20 Ko

Si vous prenez une photo avec votre appareil, les dimensions de l’image sont en général de 2000 pixels de large, même parfois plus. Une photo de 2000 pixels de large fait un poids de 12000Ko (12 Mo). Si dans une page, vous mettez 5 photos de 2000 pixels, brutes, elles seront automatiquement redimensionnées mais leurs poids resteront identiques, vous aurez ainsi une page qui « pèsera » 60000 Ko (60Mo) rien que pour les photos, ce qui est énorme en temps de chargement et fera fuir n’importe quel internaute.

En mettant les photos aux bonnes dimensions et en les compressant, le poids de ces 5 photos ne pèsera plus que 100Ko, ce qui est nettement plus rapide !

(*) Photo sous licence cc by dalbera, illustrant la visite guidée des expositions temporaires à Paris,

 

1- Mettre ses photos aux bonnes dimensions

Vous pouvez réduire les dimensions de vos images avec des logiciels de traitement de photos comme photoshop, Corel, ou un logiciel gratuit comme Gimp2. La manipulation est simple, il suffit de trouver la commande « taille de l’image », de conserver les proportions et de changer la largeur à la dimension souhaitée.

 

Ci-dessous mini tutoriel photo pour réduire la taille des photos avec Photoshop ou Gimp2

 

Tutoriel pour réduire la taille des photos avec Photoshop

Au préalable, vous avez ouvert la photo à réduire avec votre logiciel Photoshop

 

  1. Cliquez dans l’onglet « Image »
  2. Cliquez sur le ligne « Taille de l’image », une nouvelle fenêtre s’ouvre
  3. Changez la largeur pour la dimension souhaitée
  4. La case « conserver les proportions » doit être cochée, puis OK et c’est fait !

Cliquez dans la photo pour l’agrandir

 

Tutoriel pour réduire taille photos avec logiciel Photoshop

Tutoriel pour réduire la taille des photos avec GIMP 2

Au préalable, vous avez ouvert la photo à réduire avec votre logiciel GIMP 2

 

  1. Cliquez dans l’onglet « Image »
  2. Cliquez sur le ligne « Echelle et taille de l’image », une nouvelle fenêtre s’ouvre
  3. Changez la largeur pour la dimension souhaitée, les proportions sont gardées
  4. Puis cliquez sur « Echelle » et c’est fait !

Cliquez dans la photo pour l’agrandir

 

Tutoriel pour réduire les dimensions des photos avec le logiciel GIMP 2

2- Compresser ses images

On peut compresser une image à l’aide de logiciels en ligne ou d’un logiciel de retouche photo (photoshop, Gimp2 etc..).

La marche à suivre :

Enregistrez votre photo avec la commande :
  • « Enregistrer pour le web ou les périphériques » : Photoshop
  • « Exporter » : GIMP2
  • « Enregistrer pour bureau » : Corel
Choisissez le format de la photo :

On peut enregistrer ses photos en plusieurs formats : Jpg – Png – Gif

Jpg est normalement le plus adapté pour un site internet, il altère légèrement la qualité mais réduit considérablement le poids de la photo. PNG est utile si vous voulez un fond transparent. Faites des essais en enregistrant vos photos et voyez quel format est le moins lourd et vous offre le meilleur rendu.

image en format Png

Image en format png fond transparent

poids : 11,5 Ko

image fond bleu, format jpg

Image en format jpg fond bleu

poids : 3 Ko

 

Choisissez la qualité :
  • De faible à maximum (ou de 0 à 100) pour photoshop
  • De o à 100 pour GIMP2 ou Corel

 

Ci-dessous mini tutoriel photo pour compresser des photos avec Photoshop ou Gimp2

 

Tutoriel pour compresser une image avec le logiciel PHOTOSHOP

Au préalable, vous avez ouvert la photo à compresser avec votre logiciel Photoshop

 

  1.  Cliquez sur l’onglet FICHIER
  2. Cliquez sur la ligne ENREGISTRER POUR LE WEB ET LES PERIPHERIQUES : Une nouvelle fenêtre s’ouvre
  3. Choisissez le format : JPG – PNG – GIF
  4. Choisissez la qualité : De FAIBLE à MAXIMUM
  5. Le poids de votre photo est affiché selon vos réglages
  6. Cliquez sur ENREGISTRER

Cliquez dans la photo pour l’agrandir

 Tutoriel photo pour compresser une photo à l'aide de Photoshop

Tutoriel pour compresser une photo avec le logiciel GIMP 2

Au préalable, vous avez ouvert la photo à compresser avec votre logiciel Gimp2

 

  1. Cliquez sur l’onglet FICHIER
  2. Cliquez sur la ligne EXPORTER : Une nouvelle fenêtre s’ouvre
  3. Donnez un nom à la photo
  4. Choisissez le format : JPG – PNG – GIF
  5. Cliquez sur EXPORTER : Une nouvelle fenêtre s’ouvre
  6. Choisissez la qualité (en général 60)
  7. Le poids de votre photo est affiché selon vos réglages
  8. Cliquez sur EXPORTER

Cliquez dans la photo pour l’agrandir

Tutoriel pour compresser une photo à l'aide de GIMP2

 

 

Le poids d’une photo que l’on met sur son site ne doit pas dépasser 100 Ko., 40-50 Ko étant généralement la norme.

Exemple de compression :

Photo non compressée, aux bonnes dimensions et enregistrée avec la commande "enregistrer sous". 96Ko

Photo non compressée, aux bonnes dimensions, enregistrée avec la commande « enregistrer sous ». 96Ko

Photo compressée aux bonnes dimensions avec légère réduction de la qualité. Poids : 15Ko

Photo compressée, aux bonnes dimensions, avec légère réduction de la qualité. Enregistrée avec la commande « enregistrer pour le web » Poids : 15Ko

 

Ces deux photos vous montrent que la compression n’affecte pas le visuel et on passe d’une photo de 96 Ko (non compressée) à 15 Ko (compressée)

3- Nommer les photos

Lorsque vous enregistrez votre photo (après l’avoir mise aux bonnes dimensions et compressée, voir ci-dessus), ne le faites pas avec un nom comme FU8740002.jpg mais plutôt avec un nom qui décrit l’image.
Exemple : mairie-de-metz.jpg.

Ce nom ne doit pas comporter d’accents et d’espaces.
Si vous laissez des accents, cela entrainera des conflits avec les navigateurs et les photos n’apparaitront pas, si vous laissez des espaces, ils seront remplacés par des % dans votre Url et ce sera difficile pour l’internaute ou vous de la reconnaitre.
Exemple :  salle à manger sera nommée : salle-a-manger.

Cela vous sera utile pour retrouver vos photos et un indicateur supplémentaire pour un bon référencement

 

4- Remplir la balise « alt » de chaque image ou photo

La balise alt sert avant tout pour les malvoyants et les aveugles.
Les navigateurs (Internet Explorer, Chrome, Mozilla etc..) sont incapables de voir et de comprendre ce que représente une image et en remplissant cette balise avec une légende (par exemple « Entrée du musée de la cour d’or à Metz »), vous renseignez le navigateur et il peut transmettre l’information dans un langage parlé aux personnes qui en ont besoin. Vous pouvez voir ici la façon dont une personne déficiente visuelle se sert d’un ordinateur (source trouvée sur Alsacréations)

 

Pour le référencement, cette balise permet de figurer dans Google images sous les mots-clés désignés et vous donne une meilleure pertinence par rapport à vos textes.

A la création de votre site et dans les mois qui suivront, si vous ne faites pas un référencement actif, seul Google image vous amènera des visiteurs, à bichonner.

La balise alt et WordPress

Avec WordPress, on met le texte décrivant la photo (balise <alt>) dans « texte alternatif »

 

remplir la balise alt sous wordpress

 

Comment remplir la balise alt dans Prestashop

Avec Prestashop, on met le texte décrivant la photo (balise <alt>) dans « légende »

remplir la balise "alt" sous Prestashop

Edit du 24/10/2015

La balise alt et Prestashop version 1.6

La balise Alt pour l’image d’un produit dans Prestashop 1.6.

On va dans catalogue puis produits, on insère la balise dans « Légende »

où insérer la balise alt pour une image produit dans prestashop 1.6xxx

La balise Alt pour une image dans une page CMS Prestashop 1.6.

On va dans préférences puis cms, dans l’éditeur de texte, cliquer sur « insérer une image » la balise alt se remplit dans « description de l’image »

la-balise-alt-dans-cms-prestashop-version-1.6

La balise alt en langage HTML

<img alt="ceci est le texte de la balise alt" src="http://www.votresite/chemin/nom-de-mon-image.jpg" width="900" height="220" />

En HTML, il faut aussi mettre les dimensions des photos (width= »900″ height= »220″)

 

Ces articles pourraient vous intéresser :

Comleweb :

Création de site internet

Référencement internet

,

Cet article a été écrit par Comleweb

7 commentaires :

legrand Laetitia6 octobre 2016 de 9 h 57 minRépondre

Bonjour, merci pour cet article et votre grande aide de ce matin.

a bientot

Laetitia

edwidgeDm14 juillet 2015 de 6 h 45 minRépondre

Merci pour l’article. Très clair, bien vulgarisé … très utile …

lenazaire11 février 2015 de 11 h 35 minRépondre

merci pour ce tuto très facile à lire et très bien expliqué je comprend maintenant pourquoi ma page d’accueil ressemble un photocopieur

Muriel Pineau3 septembre 2014 de 14 h 09 minRépondre

Un bon article, bien présenté et très clair. Un billet qui se distingue de bien d’autres très pénibles à lire… Cet article mérite d’être lu attentivement pour bien comprendre l’effet contreproductif des photos lourdes et de trop grande taille publiées sur un site ou un blog… Il est important de maîtriser ces données notamment quand on anime un site catalogue ou bien un blog que l’on souhaite agrémenter de nombreuses photos. Ces informations valent aussi pour ceux qui souhaitent envoyer des photos par mail > toujours réduire le format et le poids de ses images.
site web

Philippe5 septembre 2013 de 14 h 09 minRépondre

Merci beaucoup pour cet article très complet!

Je sais maintenant pourquoi mon site est si long à s’afficher. Un long travail m’attend pour reprendre toutes mes photos, qui font 4000 pixels de large!

Salutations,

Philippe

Comleweb5 septembre 2013 de 16 h 07 minRépondre

Merci,

Vous pouvez tout automatiser avec Photoshop, c’est à dire appliquer le même traitement à un lot de photo. C’est un script à créer où vous définissez les dimensions, la compression que vous souhaitez et ce script s’applique à toutes les photos ouvertes. Très pratique pour gagner du temps…
Pour Gimp2, je crois aussi que c’est possible mais il faut chercher un tutoriel sur internet.

Cordialement

chaton19 août 2013 de 23 h 37 minRépondre

Merci pour cet article complet et simple d’accès !

Menu