inline-favicon wie beim w3c Validator
Cyx23
- sonstiges
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
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
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
Wenn du etwas so klein wie möglich bekommen willst, dann sende es nicht via data-Schema.
Wieso?
Mathias
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
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
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
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
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
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
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
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
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
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>
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