Préparer ses images pour le web

site trocoolEn faisant des recherches régulières d’images sur internet, j’apprécie de pouvoir avoir des images de bonne qualité afin de pouvoir zoomer ou m’en servir comme modèles de dessin.
Par contre, je doute que bien souvent ce choix du webmaster de mettre en aussi grand format des images soit un parti pris, c’est bien plus souvent un webmaster qui ne sait pas comment optimiser ses images pour internet.
La forte progression des abonnés au haut débit ne doit pas occulter le fait qu’il est important d’avoir des sites conçus intelligement en terme de rapidité.

Quel est l’intérêt d’optimiser ses images ?
Il y en a plusieurs, et les intérêts sont valables aussi bien pour les webmasters que pour les internautes.
Pour le webmaster : de grandes images mettent plus de temps à apparaître sur une page html, et l’on sait bien que l’internaute déteste attendre. S’il doit patienter pour voir des photos ou des dessins, il ira vite voir ailleurs.
D’autre part, le risque pour le détenteur du site est de se voir piller ses visuels par des internautes peu scrupuleux (et il y en a bien plus qu’on ne l’imagine).
Pour l’internaute, un site affichant des images optimisées est très satisfaisant : les images s’affichent instantanément et il ne perd pas de temps à surfer sur le site.

Egalement, le nombres de personnes consultant internet de plus en plus régulièrement sur des Smartphones est en hausse continue (iPhone, Blackberry & co), ces petites merveilles n’ont pas forcément de grands écrans pour apprécier de grands visuels, et leurs débits n’égalent pas encore ceux de l’ADSL.


Comment préparer les images pour le web
La première étape est de connaître la taille à laquelle le visuel doit s’afficher. S’agit-il d’une grande photo, d’une vignette, d’un picto ? La photo va-t-elle venir sur un fond de couleur, y a-t-il de la transparence à prendre en considération ?

La taille de l’image
D’une manière générale, une grande image va être lourde à charger, il vaut donc mieux calmer les ambitions et favoriser des images de taille raisonnable. D’une part les internautes n’ont pas forcément tous des écrans gigantesques (quoi que l’on constate une évolution du taux d’équipement de moniteurs qui va dans ce sens), d’autre part de grandes images sont inconfortables à visualiser si l’on n’a pas un minimum de recul par rapport à son écran.

Le mode colorimétrique
Contrairement à l’impression qui doit être en mode CMJN (Cyan Magenta Jaune Noir), les images dédiées à l’affichage sur moniteur doivent être en mode RVB (Rouge Vert Bleu), que ce soit pour le web, les CD Rom, la TV, etc…

La résolution
Les 3 résolutions moyennes constatées sont 304 dpi – 180 dpi et 72 dpi. Les deux premières sont optimisées pour l’impression, mais pour un affichage sur écran, il faut passer les visuels en 72 dpi. Ainsi le poids sera nettement plus léger et amplement suffisant pour un affichage de qualité.

Pour les chanceux dont les graphistes professionnels qui sont équipés de Photoshop, une option permet encore de gagner énormément de poids pour les images. La fonction est on ne peut plus claire : « enregistrer les images pour le web ». Différents modes de compression sont proposés « gif, jpg et png », avec beaucoup de paramètres qui permettent de gagner du poids.
Attention, il est important de garder en tête que bien souvent « gain de poids » = « dégradation de l’image ». Des choix sont donc à prendre en compte : des visuels d’importance moindre peuvent être allégés drastiquement et être un peu altérés en termes de qualité, en revanche il serait dommage de sacrifier la qualité d’un beau visuel au détriment de l’optimisation.

Les types de formats (gif, jpg, png)
Ce sont les 3 formats standards d’enregistrements de visuels, chacun correspond à des besoins spécifiques pour le net.
.gif utilisé essentiellement pour des images ayant peu de dégradés, surtout des aplats de couleurs (parfait pour des logos ou des pictos). Le gif prend en considération la transparence, et surtout l’animation (les gifs animés).

.jpg permet de réduire très fortement le poids d’une image de type photographique. Les nuances sont bien conservées si on reste dans des taux de compression raisonnables.

.png est similaire au gif, à savoir le traitement optimal de la transparence, en revanche on ne peut pas faire d’animations dans ce fichier.

Share
Cette entrée a été publiée dans Graphisme, Informatique, Webdesign, avec comme mot(s)-clef(s) , , , . Vous pouvez la mettre en favoris avec ce permalien.

Une réponse à Préparer ses images pour le web

  1. Ping : La meilleure compression pour un gif animé « Le Maniac du Mac

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>