Cyx23: inline-favicon wie beim w3c Validator

Hallo,

trotz Recherche über das Thema habe ich noch Fragen dazu:

<link rel="icon" href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%02%00%00%00%90%91h6%00%00%00%19IDAT(%91c  
%0C%DD%10%C5%40%0A%60%22I%F5%A8%86Q%0DCJ%03%00dy%01%7F%0C%9F0%7D  
%00%00%00%00IEND%AEB%60%82" type="image/png" />

Wie gelingt es, das PNG so klein zu bekommen, brauche ich ausser einer reduzierten Palette noch irgendwelche png-optimizer?
Ist das Percent-encoding für Seiten in utf-8 sinnvoll?

Grüsse

Cyx23

  1. trotz Recherche über das Thema habe ich noch Fragen dazu:

    <link rel="icon" href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%02%00%00%00%90%91h6%00%00%00%19IDAT(%91c

    %0C%DD%10%C5%40%0A%60%22I%F5%A8%86Q%0DCJ%03%00dy%01%7F%0C%9F0%7D
    %00%00%00%00IEND%AEB%60%82" type="image/png" />

    
    >   
    > Wie gelingt es, das PNG so klein zu bekommen, brauche ich ausser einer reduzierten Palette noch irgendwelche png-optimizer?  
    > Ist das Percent-encoding für Seiten in utf-8 sinnvoll?  
      
    Sollte dein data nicht im base-64-Format vorliegen?  
    Wenn du etwas so klein wie möglich bekommen willst, dann sende es nicht via data-Schema.  
      
    mfg Beat
    
    -- 
    
    ><o(((°>           ><o(((°>  
    
       <°)))o><                     ><o(((°>o  
    Der Valigator leibt diese Fische
    
    1. Hallo,

      Sollte dein data nicht im base-64-Format vorliegen?

      Ob es "Sollte" weiß ich nicht, aber so klappt es offenbar auch:

      href="data:image/png;base64,...

      Mit bearbeiteter (reduzierter) Farbtabelle ist es als base64 recht klein

      Wenn du etwas so klein wie möglich bekommen willst, dann sende es nicht via data-Schema.

      Du meinst als Datei? Das wären vielleicht 50 Zeichen weniger. Allerdings vermute ich, dass dafür zusätzliche Kommunikation engespart wird.

      Grüsse

      Cyx23

    2. Wenn du etwas so klein wie möglich bekommen willst, dann sende es nicht via data-Schema.

      Wieso?

      Mathias

      1. Wenn du etwas so klein wie möglich bekommen willst, dann sende es nicht via data-Schema.

        Wieso?

        Weil es nicht klein ist, sondern ein eingebaute Data innerhalb eines Dokuments. Es existiert quasi gar nicht im Browsercache.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Weil es nicht klein ist, sondern ein eingebaute Data innerhalb eines Dokuments. Es existiert quasi gar nicht im Browsercache.

          Ja, und? Wieso sollte es auch?
          Man will ein Bild klein kriegen, damit die Übertragung schnell geht. Wenns winzig und sogar im Dokument eingebunden ist, sodass kein weiterer HTTP-Request nötig ist, ist es doch ideal.

          Mathias

          1. Weil es nicht klein ist, sondern ein eingebaute Data innerhalb eines Dokuments. Es existiert quasi gar nicht im Browsercache.
            Ja, und? Wieso sollte es auch?
            Man will ein Bild klein kriegen, damit die Übertragung schnell geht. Wenns winzig und sogar im Dokument eingebunden ist, sodass kein weiterer HTTP-Request nötig ist, ist es doch ideal.

            Nur, wenn du mir garantieren kannst, dass du dieses Bild garantiert nie ausserhalb des Dokuments für den gleichen user ein zweites mal verwenden wirst, und dass das enthaltende Dokuemnt garantiert kein zweites mal vom server verlangt wird.

            Ansonsten rate ich zu Sprites via CSS. Da ist mehr Kompressionspotential vorhanden.

            mfg Beat

            --
            ><o(((°>           ><o(((°>
               <°)))o><                     ><o(((°>o
            Der Valigator leibt diese Fische
            1. Ansonsten rate ich zu Sprites via CSS. Da ist mehr Kompressionspotential vorhanden.

              Ja, sicher - aber jetzt reden wir über zwei verschiedene Techniken mit unterschiedlichen Anwendungsbereichen.
              Grafiken als Data-URIs eignen sich zur festen Einbindung ins Dokument und bleiben beim Speichern des Dokuments ohne externe Ressourcen erhalten. Außerdem kann man ein Favicon schlecht als CSS-Sprite einbinden.

              Mathias

  2. Wie gelingt es, das PNG so klein zu bekommen, brauche ich ausser einer reduzierten Palette noch irgendwelche png-optimizer?

    Hole alles raus, was bei der Palettenoptimierung geht und nutze dann pngcrush.

    Ist das Percent-encoding für Seiten in utf-8 sinnvoll?

    Ja, sonst hast du irgendwelche Steuerzeichen im HTML stehen.

    Mathias

    1. Hallo,

      Hole alles raus, was bei der Palettenoptimierung geht und nutze dann pngcrush.

      Alles klar.

      »» Ist das Percent-encoding für Seiten in utf-8 sinnvoll?

      Ja, sonst hast du irgendwelche Steuerzeichen im HTML stehen.

      Bislang gab es da Slashes und Gleichheitszeichen - wohl ohne Probleme.

      Falls ich da auf Nummer sicher gehen will, scheint urlencode (php) auch zu funktionieren.

      Grüsse

      Cyx23

      1. Hallo nochmal,

        »» Hole alles raus, was bei der Palettenoptimierung geht und nutze dann pngcrush.

        das brachte kaum etwas, vielleicht weil ich nicht alle Parameter ausgreizt habe.
        "pngout" entfernt schon per default igendwelche 'chunks' für Kommentar/Text, damit wird das Ergebnis kleiner.
        Ein Programm "optipng" gibt es offenbar auch, hab ich aber noch nicht versucht.

        »» Ja, sonst hast du irgendwelche Steuerzeichen im HTML stehen.

        Bislang gab es da Slashes und Gleichheitszeichen - wohl ohne Probleme.

        Dann könnte ich im Einzelfall doch base64 verwenden?

        Danke und Grüsse

        Cyx23

        1. das brachte kaum etwas, vielleicht weil ich nicht alle Parameter ausgreizt habe.

          Ja. Alles überflüssige löschen mit:
          -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem pHYs -rem iTXt -rem tEXt -rem zTXt -rem tIME -rem zTXt -rem hIST -brute

          "pngout" entfernt schon per default igendwelche 'chunks' für Kommentar/Text, damit wird das Ergebnis kleiner.

          Mit obigen Einstellungen ist pngcrush besser.

          Mathias

          1. Hallo,

            Ja. Alles überflüssige löschen mit:
            -rem gAMA -rem cHRM -rem iCCP -rem sRGB -rem pHYs -rem iTXt -rem tEXt -rem zTXt -rem tIME -rem zTXt -rem hIST -brute

            sieht gut aus, danke.

            Grüsse

            Cyx23

  3. Hello,

    <link rel="icon" href="data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%00%10%00%00%00%10%08%02%00%00%00%90%91h6%00%00%00%19IDAT(%91c

    %0C%DD%10%C5%40%0A%60%22I%F5%A8%86Q%0DCJ%03%00dy%01%7F%0C%9F0%7D
    %00%00%00%00IEND%AEB%60%82" type="image/png" />

      
    geht das bei den gängigen Browsern jetzt auch für normale Bilder im HTML-Kontext?  
      
      
      
      
    Liebe Grüße aus dem Cyberspace  
      
      
    Tom vom Berg  
    ![](http://selfhtml.bitworks.de/Virencheck.gif)  
      
    
    -- 
    Nur selber lernen macht schlau  
    <http://bergpost.annerschbarrich.de>
    
    1. Hallo,

      geht das bei den gängigen Browsern jetzt auch für normale Bilder im HTML-Kontext?

      Für den IE 6 wohl weniger.

      Grüsse

      Cyx23