u003cpu003eLes images sont un des éléments les plus volumineux sur un site internet. Plus elles sont grandes et plus le temps de chargement de votre site prendra du temps pour s’afficher. Si vous avez en tête d'utiliser de nombreuses photos sur les pages de votre site, vous avez intérêt à maîtriser les fondamentaux des images.u003c/pu003e
u003ch4u003eQuels sont les impacts si votre site prend trop de temps à se charger :u003c/h4u003enu003culu003enu003cliu003evos visiteurs quitteront votre site plus rapidement que vos photos se chargeront et il y aura peu de chances qu’ils reviennent ensuite.u003c/liu003enu003cliu003ele référencement de votre site dépend en partie de la vitesse de chargement de vos pages, les moteurs de recherche analysent et évaluent votre site et déclasseront votre positionnement dans les résultats de recherche si votre site et ses images ne sont pas optimisées.u003c/liu003enu003c/ulu003e
u003cpu003eSelon certaines études près de 60% des visiteurs quittent un site si il met plus de 3 secondes à se charger. Au-dela de cet aspect technique il faut également que vos images se comportent conformément à vos besoins. Voici donc quelques conseils avisés si vous voulez optimiser vos images et photos pour le web.u003c/pu003e
u003ch2u003eQue faut il vérifier ?u003c/h2u003e
u003cpu003eVoici déjà les points les plus essentiels à vérifier avant d'uploader vos images sur le web.u003c/pu003e
L'extension
u003cpu003eChaque format à ses spécificités.u003c/pu003e
Les dimensions
Adaptez la taille de vos images.r
Le cadrage
Supprimez le contenu superflu.r
La résolution
WEB ≠ PRINTr
L'espace colorimétrique
WEB ≠ PRINTr
La compression
Réduisez le poids de vos images.r
u003ch2u003eLes extensions de fichiersu003c/h2u003e
u003cpu003eChaque format à ses spécificités et chaque image à ses propres besoins. Et il n’y a donc pas de réponse universelle, mais il suffit de bien se comprendre les fonctions de chaque format pour faire le bon choix.u003c/pu003e
.jpg
C’est le format standard du web. Il s’agira de votre premier choix, il convient à la plupart des situations.r
.png
Vous choisirez plutôt ce format si vous avez besoin d’apporter de la transparence à vos images.r
.svg
C’est un format vectoriel pour le web. Ces fichiers conservent leur définition de façon permanente.r
.gif
Ce format est désuet pour des images fixes, il n’est à utiliser que pour des images animées.r
u003ch2u003eLes dimensionsu003c/h2u003e
u003cpu003eLes dimensions de vos images ont un impact direct sur leur poids et sur la vitesse de chargement de votre site.u003c/pu003enu003cpu003eSur un site internet il est important d’utiliser une taille parfaitement adaptée à son utilisation.u003cbr /u003e La largeur des images sur un site excédent rarement les 1000 pixels.u003c/pu003e
trop petites
Vous obtiendrez un effet de pixellisation avec une très forte dégradation de la qualité de limage.r
trop grandes
Le temps de chargement de votre page sera plus long et dans certains cas des images qui s’affichent au-delà du view port, de la fenêtre d’affichage de votre browser (chrome, firefox, safari…)r
u003ch2u003eLe cadrageu003c/h2u003e
u003cpu003eLe recadrage d’une image à plusieurs avantages bien trop souvent négligés.u003c/pu003enu003cpu003eTechniquement cela permet de réduire la taille d’une photo, de diminuer ses dimensions en élimant les parties superflues. Mais ça a également un impact positif sur le référencement (SEO) car plus une page est optimisée, mieux elle sera évaluée par les moteurs de recherche.u003c/pu003enu003cpu003eEn supprimant le contenu superflu vous mettrez le sujet ou l’objet de l’image plus en valeur, plus en avant et vous obtiendrez un résultat plus esthétique ou simplement plus efficace.u003cbr /u003e Vous pouvez également jouer avec la forme de votre image (rectangulaire ou carrée) et sur son orientation horizontale (mode paysage) ou vertical (mode portrait).u003cbr /u003e Finalement vous pourrez encore corriger l’éventuelle inclinaison de vos images.u003c/pu003e
u003ch2u003eLa résolutionu003c/h2u003e
u003cpu003eUne image est composée de pixels, qui ne sont rien d'autre que de petits points alignés les uns aux autres.u003cbr /u003e La valeur de la résolution représente le nombre de points alignés dans la composition d’une image. On pourrait encore mettre en parallèle la résolution d’une image et sa précision.u003c/pu003enu003cpu003ePlus il y a de pixels dans une image, plus elle est détaillée. La résolution des images est exprimée en dpi (dots per inch : points par pouce carré).u003c/pu003e
pour le web
72 dpir
pour le print
300 dpir
u003ch2u003eL'espace colorimétriqueu003c/h2u003e
u003cpu003eIl existe 2 modes principaux de colorimétrie. La colorimétrie standard pour le web qui est la trichromie RVB : rouge, vert et bleu. RGB en anglais pour red, green et blue. La quadrichromie CMJN : cyan, magenta, jaune et noir est principalement destinée à l’imprimerie. CMYK en anglais pour cyan, magenta, yellow et black.u003c/pu003e
Quadri pour le print
CMJNr
u003ch2u003eLa compressionu003c/h2u003e
u003cpu003eChaque image, en fonction de sa complexité et de son format peut être compressée afin de réduire son poids. Cette compression implique plus ou moins de perte de qualité.u003c/pu003enu003cpu003eAvec un logiciel comme photoshop ou gimp, choisissez l’option “enregistrer pour le web” afin de jouer sur le taux de compression de l’image. Il est également possible de gagner en légèreté en diminuant le nombre de couleur de vos images. Cette compression peut réduire le poids d’une image jusqu’à plus de 70%.u003c/pu003e
enregistrez vos photos pour le web
u003cpu003eNe compressez pas à plus de 80%u003c/pu003e
u003ch2u003eConclusionu003c/h2u003e
u003ch5u003e1. Utilisez le format le plus adapté à l’utilisation de vos images :u003c/h5u003enu003colu003enu003cliu003ephotos : jpgu003c/liu003enu003cliu003etransparence : pngu003c/liu003enu003cliu003eanimation : gifu003c/liu003enu003c/olu003enu003ch5u003e2. Limitez la taille de vos imagesu003c/h5u003enu003colu003enu003cliu003e1000 pixels de largeur suffisent généralementu003c/liu003enu003c/olu003enu003ch5u003e3. Recadrez vos images en supprimant le contenu superfluu003c/h5u003enu003ch5u003e4. Adaptez la résolution de vos imagesu003c/h5u003enu003colu003enu003cliu003eweb : 72 dpiu003c/liu003enu003cliu003eprint : 300 dpiu003c/liu003enu003c/olu003enu003ch5u003e5. Choisissez le bon espace colorimétriqueu003c/h5u003enu003colu003enu003cliu003eweb : RVBu003c/liu003enu003cliu003eprint : CMJNu003c/liu003enu003c/olu003enu003ch5u003e6. Compressez vos imagesu003c/h5u003enu003colu003enu003cliu003eenregistrer pour le webu003c/liu003enu003cliu003ene pas descendre sous une qualité de 80%u003c/liu003enu003c/olu003enu003ch5u003e7. Si vous le pouvez, faites du photomontage et ajustez l’ambiance de vos images.u003c/h5u003e
