template responsive
Hebergement site internet
formation joomla

Retoucher ses photos pour optimiser son site Internet

Vous sortez des photos de votre appareil, elles font par exemple, 3000 pixels de large par 2000 pixels de haut en 300 DPI, le poids avoisine les 3 MO. C'est parfait pour les imprimer. En revanche pour afficher votre site Web, c'est injouable... voici quelques conseils pour vous aider à afficher des visuels à la bonne taille.

photo Villa Les Roches Brunes - Dinard 35

Retouche photo - Optimisation de site Web

Si vous souhaitez voir à quoi ressemblerait votre photo affichée dans ses réelles dimensions, cliquez sur ce lien : Plage de l'écluse Dinard.

Comme vous avez pu le constater, il ne sert à rien d'insérer ce type de photos non retouchées, sinon de ralentir considérablement le temps de chargement de la page, je vous laisse imaginer le désastre si votre page contient une quinzaine de visuels de ce genre...

La seule solution est de donc de mettre vos images aux dimensions les plus proches de celles qui vont servir de référence pour leur affichage et convertir vos visuels dans une résolution suffisante pour le Web. La résolution est le nombre de pixels affiché par point : DPI (Dots Per Inch en anglais) ou PPP (Point par pouce en français). Une conversion en 72 DPI est bien souvent largement suffisante pour afficher une image sur un écran. Pour travailler sur les dimensions et la résolution de vos photos, l'idéal est de prendre en main un logiciel spécialisé en retouche photo. En version gratuite, vous pouvez essayer Gimp, les professionnels travaillent sur Photoshop, logiciel de référence en matière de manipulation d'images.

Pour info, l'image se trouvant à gauche de ce paragraphe est la Villa "Les Roches Brunes". Cette superbe maison fut construite à partir de 1893 pour le couturier parisien Poussineau. Située sur la pointe de la Malouine avec Saint-Malo en arrière plan, la bâtisse est devenue l'emblème de Dinard.

photo de la plage de l'écluse - Dinard

La plage de l'écluse - Dinard


Photo Dinard

Mettre les photos à la bonne dimension

Prenons pour exemple un site Web classique faisant 1000 pixels de large (c'est le cas le plus courant depuis quelques années, ce site fait très exactement 990 pixels de largeur). Si l'on utilise une colonne à gauche et/ou à droite pour afficher liens de menu ou divers modules, la zone dédiée à l'article ne fera plus que 800 pixels ou moins (ici, la colonne de gauche étant assez importante, il ne reste que 700 pixels pour la rédaction d'articles et donc également pour l'affichage de visuels). Restons sur cet exemple d'un affichage de 700 pixels de large.

Souvenez-vous, la photo sortie de votre appareil photo fait 3000 pixels de large. Elle est déjà donc 4 fois trop large, de plus sa résolution en 300 DPI améliore sa qualité mais alourdi son poids.

Si vous souhaitez créer une image faisant la totalité de la largeur comme c'est le cas pour la photo se trouvant au dessus représentant la plage de l'écluse à Dinard ou le diaporama ci-dessous, ouvrez votre logiciel de retouche d'image et convertissez votre photo avec une largeur de 700 pixels de large (vous y trouverez un petit cadenas pour que la hauteur soit calculée de manière proportionnelle automatiquement et indiquez comme résolution 72 DPI.

De cette façon, votre photo sera vraiment optimisée pour un affichage rapide. Vous aurez aussi la possibilité de régler un curseur "qualité d'image", faites des essais... attention en choisissant une valeur trop basse, vous allez dégrader votre visuel de façon significative. Pour les images présentées sur cette page, c'est la valeur de 90% qui a été choisie dans le logiciel Photoshop.

Vous pouvez aussi décider d'améliorer la qualité de votre photo en choisissant des dimensions et/ou une résolution légèrement supérieures, vous indiquerez ensuite en insérant l'image dans votre article dans quelles dimensions cette image doit réellement être affichée. Cette photo mettra un petit peu plus de temps à se charger, à vous de voir si cela en vaut la peine.

Sauvegardez votre photo au format .jpg (d'autres formats sont possibles, comme le .gif ou .png mais généralement peu utilisables pour des photos).

Attention : il est important que vos images soient correctement nommées. Le nom du fichier ne doit contenir que des caractères alphanumériques et pas d'espace. Evitez également les majuscules et caractères accentués.

Cliquer sur une vignette pour afficher la photo en grand (en pop-up)

Vous avez peut-être remarqué que les deux vignettes (la villa Les Roches Brunes et la photo des Iles Cézembre et Harbour), possèdent une icône loupe. En fait, en cliquant sur l'image vous avez la possibilité d'agrandir l'image et celle-ci peut ainsi s'afficher sur toute la largeur du site, soit environ 1000 pixels.

Cette technique est très intéressante, car elle permet :

- D'égayer les articles avec de petits visuels peu envahissants.
- Optimiser la rapidité d'affichage de la page (ces vignettes, font entre 300 et 450 pixels de large).
- De permettre à l'internaute de voir une image en grand s'il le souhaite.

L'éditeur de texte JCE pour Joomla par exemple, permet de réaliser ces pop-up très facilement.