We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 18219
    • 826 Posts
    Bonjour à tous,

    Pour ceux qui ne connaisse pas, le format png peut être généré par les outils graphiques : Fireworks, Illustrator, PhotoShop, ...
    Ce format a la particularité d’être natif et donc fournit un rendu plus agréable par contre il est plus lourd que les traditionnels formats jpeg et gif.
    Je ne suis pas un spécialiste de la question, je laisse donc à chacun d’expliquer les apports de chaque format.

    Par contre, l’usage de ce format png n’est pas interprété par IE (et oui toujours le même qui ne respecte pas les standards). Pour palier à ce problème, il existe un petit fichier pngfix.js qui traite ce problème. Placer le dans le répertoire /assets/js/

    Pour activer ce fichier, voici un code qu’il faut intégrer dans votre gabarit (template) dans les balises <HEAD>:
    	<!--[if gte IE 5.5000]>
    	<script type="text/javascript" src="assets/js/pngfix.js"></script>
    	<![endif]-->
    
      Marc
      I&#39;m French... Sorry for my bad English, I use &#39; Google Translator&#39; or other... but that remains that tools wink
      • 34162
      • 1 Posts
      merci pour l’info! j’avais ce problème efectivement.
        • 18219
        • 826 Posts
        J’oubliais :

        Ce petit fichier n’est valable uniquement pour les images gérées par le CSS (background-image: url("image.png")...) ou le gabarit (template).

        Je n’ai pas encore trouvé comment utiliser les images au format png directement dans les documents de MODx.
        Je cherche. Je publirai le résultat mais si quelqu’un a une idée je suis preneur.
          Marc
          I&#39;m French... Sorry for my bad English, I use &#39; Google Translator&#39; or other... but that remains that tools wink
          • 18219
          • 826 Posts
          Bonjour à tous,

          J’ai le p’tit pb des images png qui comporte des zones transparentes : ces images s’affichent correctement sous FF mais présente une petite croix rouge sous IE.

          Avez-vous une idée pour résoudre ce problème ?

          J’ai regardé le plugin pngalpha4msie mais j’avoue ne pas comprendre la méthode. Si quelqu’un a compris, peut-il éclairer mes idées ?

          Merci de votre contribution
            Marc
            I&#39;m French... Sorry for my bad English, I use &#39; Google Translator&#39; or other... but that remains that tools wink
            • 14863
            • 19 Posts
            Le PNG existe en deux modèle, un à couche 8bits ne gérant que deux niveau de transparence, et un à couche 24bits gérant se que l’on nomme plus courament la transaprence alpha (à plusieurs niveau). IE étant une plaie pour tout le monde, il ne gère bien évidement pas le les couches alpha de PNG24, il faut donc avoir recours à un hack dans la feuille de style... PNG full CSS

            Au delà de ça, je pense que pour l’instant, il vaut mieux éviter l’utilisation du PNG24 : IE7 devrait normalement le gérer mais cela n’enlevera pas le fait qu’IE6 restera utilisé. Il faudra donc garder les instructions de hack dans la CSS, ce qui l’alourdira considérablement et à terme, demandera des modifications.

            Il est clair que les possibilités données par la transparence alpha ajoute un plus dans le design, mais le PNG24 est plus lourd et nécéssite ces fameux hack. Si le site est légé ça va, mais quand ta css commence à devenir imposante ça devient vite une galère à gérer.

            PS : c’est pour moi la façon la plus élégante de gérer le PNG24, pas de recours à javascript (parce que s’il est désactivé...) wink
              Graou or Not...
              Miscischia[dot]Com
              • 18219
              • 826 Posts
              Merci JpWalker wink Je vais prendre en compte ce principe.
                Marc
                I&#39;m French... Sorry for my bad English, I use &#39; Google Translator&#39; or other... but that remains that tools wink
                • 21101
                • 169 Posts
                Quote from: jpwalker at May 23, 2006, 09:51 AM

                Le PNG existe en deux modèle, un à couche 8bits ne gérant que deux niveau de transparence, et un à couche 24bits gérant se que l’on nomme plus courament la transaprence alpha (à plusieurs niveau). IE étant une plaie pour tout le monde, il ne gère bien évidement pas le les couches alpha de PNG24, il faut donc avoir recours à un hack dans la feuille de style... PNG full CSS

                Au delà de ça, je pense que pour l’instant, il vaut mieux éviter l’utilisation du PNG24 : IE7 devrait normalement le gérer mais cela n’enlevera pas le fait qu’IE6 restera utilisé. Il faudra donc garder les instructions de hack dans la CSS, ce qui l’alourdira considérablement et à terme, demandera des modifications.

                Il est clair que les possibilités données par la transparence alpha ajoute un plus dans le design, mais le PNG24 est plus lourd et nécéssite ces fameux hack. Si le site est légé ça va, mais quand ta css commence à devenir imposante ça devient vite une galère à gérer.

                PS : c’est pour moi la façon la plus élégante de gérer le PNG24, pas de recours à javascript (parce que s’il est désactivé...) wink

                tiens je connaissais pas les hacks PNG pour IE huh
                dis donc y’en a dans tous les domaines grin

                au départ j’avais fait mon design en PNG 8 (avec Photoshop), mais la couleur #808080 dans photoshop n’était pas la meme que la #808080 dans IE >:( alors que sous FF c’était pareil... je suis donc passé au gif qui est plus lourd que le PNG 8
                je suis un "pro-png" grin vivement que les navigateurs le supporte
                  Play no games
                  • 14863
                  • 19 Posts
                  Essaye de rajouter le plugin SuperPNG pour photoshop, ça résoud pas mal de truc notamment une meilleur compression de l’image smiley

                  Super PNG Plugin

                  ou sinon un autre petit outils qui corrige les problème d’enregistrement de photoshop (celui que j’utilise le plus). Tu enregistres en GIF et tu le passe dans PNG Optimizer qui te le recompresse et retransforme en PNG ! Magique non ?

                  PNGOptimizer

                  PS : le tout est gratuit et fonctionne à merveille wink
                    Graou or Not...
                    Miscischia[dot]Com
                    • 21101
                    • 169 Posts
                    merci je connaissais pas wink
                      Play no games