Il faut d’abord prévoir des images au format et j’ai totalement pack sachant qu’ensuite on pourra appliquer la propriété CSS opacity pour ajuster la transparence directement sur ces mêmes images. Ainsi plus besoin de prévoir différentes images format PSG en fonction des pages il suffira d’appliquer une règle CSS pour pouvoir changer l’opacité d’une image.
Ce qu’on fait avant tout c’est gagner du temps. Car au-delà de bien de temps on peut en plus faire varier le degré de transparence de façon extrêmement précises en jouant sur les états : hover, : focus, :active sans avoir à créer un bon nombre d’images, ce qui allège évidemment la page, et permet donc de gagner en chargement, en vitesse et donc en référencement de cette page. On sait que le référencement d’un page Google se fait sur ce critère et que l’optimisation du temps de chargement des images et primordiale.
Ainsi, il suffira d’appliquer l’image de base et avec les différents applicatifs ajustés avec opacity, le gain de temps est évident.
La condition pour que cela se voit, c’est évidement de travailler sur une image en png, car une image en jpeg, verra l’application de la règle CSS sur l’ensemble de l’image alors que le png n’aura pas de fond. Ce balisage fonctionne également pour le format gif.
Un conseil rapide cependant, préférer une exportation de votre image en png 24, la qualité en sera bien meilleure.
