La transparence et l'anti-aliasing
Voici un problème récurrent ! Quand on utilise l'Anti-aliasing pour faire une forme au milieu d'un GIF transparent (ou PNG 8bits) on se confronte toujours au même problème :
Il y a des pixels à opacité variable et malheureusement le gif ne gère que la Anti-aliasing.
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éressante. Des astuces sont néanmoins possibles, voici une liste de sites abordant le sujet :
- Quand la Anti-aliasing est à peu près é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 Anti-aliasing qui est adapté à tous les fonds de couleur claire.
