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

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

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

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

2- Compresser ses images

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

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

Exemple de compression :

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é. 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.

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)

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

Ces articles pourraient vous intéresser :

• Les outils gratuits pour modifier un site statique écrit en HTML
• La balise <title>, première indication pour l’internaute et le référencement

• Structurez et aérez vos pages pour un site agréable à lire et un référencement naturel optimal

Comleweb :

Création de site internet

Référencement internet

image, Réduire poids page

6 commentaires :

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 !