5 conseils pour intégrer des photos dans votre site

Dans ce billet, pas question de parler prise de vue, retouche, balance des blancs et autres notions photographiques. L’idée est simplement d’aborder quelques règles simples à mettre en oeuvre pour optimiser le rendu de vos photos lorsque vous les intégrez sur le web.

1. Quel poids maximum ?

Il est difficile d’établir une règle universelle, mais dans 99,9% des cas, il est possible de se limiter à des photos dont la taille ne dépasse pas les 300 Ko.

Et dans 90% des cas, on peut facilement descendre en dessous de 200 Ko. Si la photo que vous souhaitez mettre en ligne dépasse allègrement le méga-octet (Mo), vous devriez vérifier qu’elle utilise un format de fichier adéquat, et que sa résolution n’est pas trop importante au regard de l’utilisation que vous souhaitez en faire.

2. Quel format de fichier utiliser ?

Par format, on entend ici la méthode d’encodage utilisée pour convertir votre photo en fichier informatique. Il existe de nombreux formats, certains non-compressés (RAW, DNG, TIFF…) et d’autres compressés (JPEG, PNG…).

Mais fort heureusement, dans notre cas, la règle est simple : pour des photos en couleur, c’est le format JPEG qui prévaut. Et ça tombe très bien, car la quasi totalité des appareils photo (et des smartphones) du marché vous permettent de récupérer des photos dans ce format.

3. Quelle résolution pour mes photos ?

La résolution d’une photo numérique correspond au nombre de pixels (l’unité de mesure en imagerie numérique) utilisés pour afficher la photo. Lorsque vous prenez une photo avec un appareil 10 megapixels, votre prise de vue numérique est composée d’environ 10 millions de pixels.

10 millions, ça fait déjà un sacré paquet de pixels, surtout quand on sait que l’écran d’un internaute moyen ne peut en afficher que 1,5 à 2 millions.

Face à cet excédent de pixels, un choix s’impose :

  • Soit vous laissez la photo dans sa taille originale, et dans votre page web vous indiquez la taille d’affichage souhaitée dans votre balise <img> grâce aux attributs width et height :
  • <img src="10-millions-de-pixels-rien-que-pour-mon-geranium.jpg" width="800" height="600" />
  • Ou alors vous redimensionnez votre photo au préalable afin qu’elle ait une dimension plus proche de celle que vous utilisez sur votre page web (en l’occurrence 800×600 = 480 000 pixels, soit environ 0,5 megapixels) :
  • <img src="mon-geranium-on-ze-web.jpg" width="800" height="600" />

Dans le premier cas, un internaute visitant votre page web va télécharger votre photo en taille originale : 10 megapixels « pèsent » au moins 2 Mo, il faudra donc compter entre quelques secondes et quelques dizaines de secondes pour afficher l’image complète.

Dans le deuxième cas, l’internaute récupère votre image réduite à 0,5 megapixels : elle pèse 20 fois moins lourd, l’affichage est quasi-instantané, l’internaute est heureux et en plus il n’a pas explosé son forfait smartphone en consultant votre site.

Bref, vous l’aurez compris : il faut redimensionner vos photos avant de les publier sur votre site. A savoir : si vous publiez vos photos sur un réseau social tel que Facebook, Twitter ou Google+, ce dernier les redimensionnera pour vous. Certains outils en ligne tels que WordPress ou Hôtentic (oui, il s’agit bien d’une pub  à peine dissimulée) vous permettent également de le faire automatiquement.

4. Au final, comment procéder ?

Les traitements évoqués ci-dessus « enlèvent » de l’information à vos photos et sont donc irréversibles. Il est important de les exécuter dans l’ordre qui cause le moins de dégâts, tout en gardant systématiquement une copie des originaux.

On pourra retenir les points suivants :

  • Si votre photo est initialement au format JPEG, évitez de lui ré-appliquer une nouvelle compression JPEG. Jouez plutôt sur sa résolution pour réduire son poids.
  • Lorsque vos photos sont dans un format non compressé (TIFF, RAW, DNG…), la compression au format JPEG doit arriver en dernière étape, après les éventuelles retouches et le redimensionnement.
  • Si par contre votre photo est à la base au format JPEG, alors votre dernière étape sera son redimensionnement, après les traitements que vous souhaiterez lui appliquer.

5. Et le 5ème conseil ?

Un 5ème conseil ? Ah, à cause du titre ?

Hm, en effet.

Et bien, pour conclure, il est a-bso-lu-ment capital de *OH MON DIEU DERRIERE VOUS C’EST AFFREUX*

 

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>