La transparence et l'anti-aliasing
Voici un problème récurent ! Quand on utilise l'Anti-aliasing pour faire une forme au milieu d'un GIF transparent (ou PNG 8bits) on se confontre toujours au même problème :
Il y a des pixels à opacité variable et malheuresement le gif ne gère que la transparence binaire.
Si on désire juste placer notre image sur un fond qui ne changera jamais de couleur, la solution est simple :
- il suffit de mettre un calque en dessous avec la bonne couleur, on pourra alors sauver le fichier sans transparence.
- Ou alors choisir la couleur de fond en tant que couleur de détourage dans les outils d'optimisation de photoshop. Les pixels ni totalement transparents, ni totalement opaques seront transformés pour correspondre.
Mais si on désire que notre image soit viable sur n'importe quel couleur de fond c'est plus problématique !
Il y a alors trois choix :
- Supprimer l'anti-aliasing, c'est la solution la plus simple et c'est souvent la plus utilisée.
- Utiliser le format PNG 24bits qui permet de faire de la transparence non binaire. Ainsi, pour chaque pixel de l'image un pourcentage d'opacité/transparence est attribué. Ceci rend l'image beaucoup plus lourde, ce qui est peut être un problème surtout pour un site internet qui veut pouvoir se charger en un minimum de temps. Mais surtout, le format PNG 24bits est mal interprété par Internet Explorer et tout les pixels transparents se retrouvent colorés en fonction du thème de bureau de l'internaute. Internet explorer étant encore aujourdhui le navigateur de la majorité des utilisateurs, la solution devient tout de suite moins intéréssante. Des astuces sont néanmoins possibles, voici une liste de site abordant le sujet :
- Quand la luminosité est un peu pret équivalente pour toutes les couleurs de fond, il suffit d'utiliser un couleur de détourage en tons de gris. Le plus souvent, cela fonctionne. C'est d'ailleurs la technique que nous avons utilisée pour notre pack de smileys smooth qui est adapté à tout le fond de couleur claire.
