Adapter les images
Vous voulez entrer de nouveaux produits dans votre boutique en ligne, publier des articles de blogues avec des images, ou remplacer la photo d’un de vos employés sur votre site Web réalisé par des professionnels ?
Avant de le faire, il y a quelques règles à respecter pour ne pas rendre la navigation sur votre site cauchemardesque pour vos visiteurs.
Pourquoi optimiser vos images ?
Il est important de comprendre que les images alourdissent vos pages et les rendent plus longues à charger. Le format pour le Web est différent du format pour l’impression parce qu’on peut se permettre de faire des compromis pour allier le design et l’ergonomie. Donc si vous avez suivi nos conseils précédents et choisi de magnifiques images pour être visuellement attractifs, personnaliser votre contenu et vous représenter, c’est parfait, mais une optimisation sera indispensable !
Quels sont les différents formats d’image ?
Faisons d’abord un survol rapide des principaux formats adaptés au Web et l’usage que l’on peut en faire.
Le format JPEG (ou JPG) : ce format est parfait pour les photographies et visuels colorés. C’est le format le plus utilisé sur le web et probablement celui que vous choisirez.
Le format PNG : il est idéal pour les images à fond transparent, les graphiques et les logos.
Après avoir évoqué ces deux formats, une parenthèse s’impose pour préciser un principe fondamental : une image ne PEUT PAS être agrandie, sans perdre en qualité et apparaître pixellisée. Donc quand vous voyez une image enlaidit par des petits carrés, c’est soit qu’elle est trop petite au départ, soit qu’elle a été mal optimisée.
Le format SVG : ce format est adapté aux logos et illustrations (images vectorielles). Sa particularité est qu’il peut être agrandi sans altérer la qualité. Vos arrière-plans peuvent contenir des SVG puisqu’ils s’adaptent aux différentes dimensions des écrans, du mobile à la télévision. Les conseils suivants ne s’appliquent donc pas à ce format spécifique.
Comment optimiser vos images ?
Vous pouvez faire les modifications sur Photoshop, si vous y avez accès, mais il est également possible d’utiliser Paint (sur PC) ou Aperçu (sur Mac).
Vérifier et changer la résolution
La résolution de l’image doit être entre 72 et 100 pixels par pouce (en comparaison, les images que vous voulez imprimer seront généralement à 300). Si vous êtes photographe, une entorse à cette règle est possible puisque les photos sont votre contenu donc la qualité d’image prime sur le reste.
Vérifier et changer la taille de l’image
Le choix de la taille de l’image va dépendre de l’endroit où vous voulez la mettre. En effet, votre photo dans votre page à propos n’aura pas besoin d’être aussi grande qu’une image qui prendra toute la largeur de l’écran.
Disons qu’une dimension entre 300 pixels de large pour des petites images et 1920 pixels de large pour les plus grandes est un bon compromis.
Comme une image ne peut pas être agrandie, il vaut mieux – dans la mesure du raisonnable – prévoir une image un peu plus grande si vous n’êtes pas sûrs de l’endroit où vous voulez la positionner et surtout ne pas supprimer votre image originale !
Il y a d’autres moyens d’optimiser des images en les compressant. Des sites comme https://tinypng.com/ peuvent y aider, toutefois la compression peut parfois un peu trop réduire la qualité de l’image donc il faudra l’utiliser au cas par cas.
Si malgré ces conseils vous ne vous sentez pas à l’aise et que vous avez besoin d’aide pour modifier le visuel de votre site Web ou l’optimiser, l’équipe du Cercle se fera un plaisir de vous aider.
