Bildmasken mit .png

**wahsaga** · 21.12.2009, 16:15

Es gibt einige Progrämmchen, die PNGs noch weiter „crunchen” können.

http://optipng.sourceforge.net/
http://www.gracepointafterfive.com/punypng
http://entropymine.com/jason/pngrewrite/
http://sourceforge.net/projects/npngquant/develop
http://en.wikipedia.org/wiki/Portabl...timizing_tools

Zitat von Quetschi Beitrag anzeigen

So komme ich auf "nur" 45KB für alle vier Teile zusammen, was mich schon wieder durchatmen lässt. Nur entstehen so im html sehr viel "dirty"-Notationen (4 statt nur 1) was mir bei mir auch ein gewisses Unwohlsein hinterlässt.

Könnte man analog zu „runden Ecken” per JS realisieren - das generiert dann die zusätzlich benötigten Elemente ins DOM rein. Ohne JS dann etwas weniger visueller Effekt - meistens vertretbar.

Natürlich könnt ich auch wieder hergehen und die Ränder einfach in ein fertiges .jpg reinmachen - bei späteren Designänderungen kann man dann allerdings die .jpg wieder wegschmeissen.

M.E. auch nicht so tragisch.
Kann man ggf. ja auch automatisieren, so dass aus neu hochgeladenen Bildern serverseitig die „gepimpte” Version erzeugt wird.

**onemorenerd** · 21.12.2009, 16:43

Wenn du für den Rahmen zunächst ein einziges PNG nehmen wolltest, dann bedeutet das ja, der Rahmen hat eine feste Größe. Manchmal ist das okay, aber sehr selten. Meistens will man doch - auch wenn es erstmal nur eine feste Größe gibt - die Designelemente so anlegen, dass sie flexibel und wiederverwendbar sind. Das geht mit einem einzigen PNG nicht. Bei solchen Anforderungen bieten sich CSS-Sprites an.

Im PHP-Code sollte von der genauen Umsetzung natürlich nichts mehr zu sehen sein. Da steht dann im Template sowas wie

Code:

{box theme="frayed"}{$content}{/box}

Die box-Funktion lädt das Stylesheet und fügt das Markup hinzu. Javascript ist nicht notwendig.
Der theme-Parameter sollte optional sein und nur gesetzt werden, wenn man ein anderes als das Standarddesign haben will.

**Quetschi** · 21.12.2009, 16:47

@wahsaga
danke - die Sachen guck ich mir an

@onemorenerd
Im konkreten Fall gibt das Layout dafür eine feste Größe vor - für andere Sachen ist dein Tipp aber sehr interessant

**piratos** · 21.12.2009, 17:22

Bei allen Überlegungen sollte man daran denken das nach einem Zerschnippeln mehr HTTP Request's hat als vorher.

Hier für das Forum bedeutet das pro Request 150ms im Schnitt x 4 = 600 ms, also ein Zeitverlust von 3 x 150 = 450 ms - andere Server sind da u.U. sehr viel langsamer.

In 450 ms könnte ich bei meiner Netzanbindung locker 1,6 MB übertragen, ja selbst bei einer erheblichen langsameren Anbindung könnten es 300 KB und mehr sein.

In dem Fall ist ein zerschnippeln absolut von Nachteil, man verliert erheblich mehr als es bringt.

**Quetschi** · 21.12.2009, 17:28

wg. Komprimier-Tools:
also im konkreten Fall macht mir optipng aus meiner 200KB-Datei bestenfalls eine 170KB-Datei - da fahre ich mit der vierteiligen Version doch noch um eine Hausnummer besser.

wg. cssSprites:
Achso - so nennt sich das - die Technik verwende ich eh, wenn es recht viel kleines Zeug wird, aber längst nicht immer, da sich manche Sachen für sich dann doch deutlich besser komprimieren lassen und dann ist der Effekt der eingesparten Request-Header auch gleich mal wieder dahin. Keep-alive ist sowieso an, also gibt es nicht gleich immer nen neuen Verbindungsaufbau.

Was viel praktischer wäre: Wenn ich für ein einzelnes Element 2 oder mehrere Hintergründe notieren lassen würden, die man entsprechend positionieren und übereinander legen könnte. Keine Ahnung - kommt sowas in neueren CSS-Spezifikation vielleicht mal? Oder leb ich diesbezüglich auch grad hinterm Mond?

So behelf ich mir immer damit, dass z.B. eine div-box ein sehr langes Element enthält das unten den Abschluss enthält und der background auf bottom gesetzt wird und der h1, h2... der eh obligatorisch in der Box als erstes kommt, bekommt praktisch den Kopf dafür als background verpasst.

@piratos
ich denke da mehr an die sehr vielen User, die immer noch über keine breitbandige Anbindung ans Netz verfügen. Da verkehrt sich dann die Rechnung doch schnell ins Gegenteil.

**onemorenerd** · 21.12.2009, 17:35

Zitat von Quetschi Beitrag anzeigen

Wenn ich für ein einzelnes Element 2 oder mehrere Hintergründe notieren lassen würden, die man entsprechend positionieren und übereinander legen könnte. Keine Ahnung - kommt sowas in neueren CSS-Spezifikation vielleicht mal?

It's just around the corner ... CSS Backgrounds and Borders Module Level 3

**wahsaga** · 21.12.2009, 17:37

Zitat von Quetschi Beitrag anzeigen

Was viel praktischer wäre: Wenn ich für ein einzelnes Element 2 oder mehrere Hintergründe notieren lassen würden, die man entsprechend positionieren und übereinander legen könnte. Keine Ahnung - kommt sowas in neueren CSS-Spezifikation vielleicht mal?

CSS Backgrounds and Borders Module Level 3 - 3.1 Layering multiple background images

**unset** · 21.12.2009, 17:39

@Quetschi: Lustige Signatur …*du weißt also das man Beiträge bearbeiten kann. Mach das bitte in Zukunft auch.

(Im Übrigen würde ich dich außerhalb meiner Funktion als Moderator bitten, deine Signatur zu ändern. Es sieht leider wirklich viel zu sehr nach einem wirklichen Edit aus

)

**Quetschi** · 21.12.2009, 17:48

@unset
wg. Signatur:
Weil du es bist

wg. edit vs. neupost:
In der Vergangenheit ging es mir sehr oft so, dass während ich noch am editieren war zwischenzeitlich jemand anderes gepostet hat. Mein Edit fiel dann meinem follower nicht auf - dann musste ich wieder in nem weiteren Post auf mein Edit hinweisen. Deshalb hab ich es mir eigentlich in allen Foren so angewöhnt, dass ich ein neues Post verfasse anstatt das vorige zu editieren. Ich kann es gerne so wie hier gewünscht machen, kein Thema - aber irgendwie fehlt mir das "handfeste" Argument pro Edit.

**piratos** · 21.12.2009, 18:11

Zitat von Quetschi Beitrag anzeigen

@piratos
ich denke da mehr an die sehr vielen User, die immer noch über keine breitbandige Anbindung ans Netz verfügen. Da verkehrt sich dann die Rechnung doch schnell ins Gegenteil.

Verstehe das sehr gut , aber die sind die absolute Minderheit - 82% nutzen schnelle Breitbandverbindungen.
Nur 16% nutzen Modem - ISDN mit stark fallender Tendenz.

Und - die Verluste über die HTTP Request's treffen alle völlig unabhängig von der Art der Anbindung - das darf man auch nicht vergessen.

Breitbandnutzer neigen allerdings eher dazu zu zappen, wenn eine Website dahergeschlichen kommt, das sollte man auch im Auge behalten, da könnte man sich u.U. selbst in den Hintern treten.

Ich persönlich nehme keinerlei Rücksicht mehr auf Modem und ISDN Nutzer - deren Ärger wegen der langsamen Verbindung kann ich sehr wohl nachempfinden - konnte ich doch auch erst vor mehr als einem Jahr meine ISDN Karte in den Müll werfen, aber dennoch die langsamen sind so etwas von out und jeden Monat mehr.

Auf der anderen Seite hat Google seinen Großversuch gestartet um die Geschwindigkeiten von Web's zu ermitteln.

Die tragen sich mit dem Gedanken die Power eines Web's 2010 mit in die Bildung des Rankings für Suchergebnisse einzubeziehen.

Ob und wann das kommen wird ist noch fraglich, aber wenn dann zählen die Millisekunden.

**Quetschi** · 21.12.2009, 20:55

@piratos

Öhm - also bei breitbandigen Anschlüssen werden meine Seiten ohne merkliche Verzögerungen geladen, vo "dahergeschlichen kommen" kann beim besten Willen keine Rede sein. Bei langsameren Verbindungen profitieren meine Seiten dagegen davon, dass jedes Element das fertig geladen ist auch gleich angezeigt wird - so ist für einen User erkennbar, dass das Laden noch von statten geht. Ich hab jetzt keine Ahnung wie es sich bei einem Sprite verhält, aber ich vermute doch, dass hier die Elemente erst angezeigt werden, sobald die komplette Datei geladen ist - werd das aber bei Gelegenheit nochmal prüfen.

Letzendes bin ich dann auch noch immer KB-Spar-fetischist - alles in eine 500KB-Datei zu packen ginge mir einfach gegen den Strich, wenn ich es auch mit meinetwegen 5 x 20KB erledigen kann weil sich die einzelnen Dateien einfach viel gezielter komprimieren lassen. Es macht natürlich aber bei diversen Sachen (der Klassiker: Grafiken für Hover-Effekte) schon Sinn - gar keine Frage.

Wie gesagt - Keep-Alive ist eh an und wird von den meisten Clients auch genutzt somit ist da nichts mit ständig Verbindungen auf- und abbauen bzw. zu vielen parallelen Verbindungen und damit erforderlichen Httpd-Prozessen die den Server belasten könnten und die paar Byte für die Request-Response-Header sind ja wirklich geschenkt im Vergleich 500KB zu 5 x 20KB.

Dazu noch vernünftige Header für das Caching von sich nicht ständig ändernden Dateien und der Server hat eh erstmal Ruhe wenn Hintergründe und Co. mal geladen sind. Komischerweise hackt es da bei doch immer wieder bei diversen Webseiten, weil die Header dafür nicht passen und sich so der Client genötigt fühlt sich jedesmal für zig Grafikdateien und (was fast noch schlimmer ist weil da manche Frameworks gleich ganze Armeen an Dateien nachladen) Javascript-Dateien seinen 304er abzuholen wenn man sich durch die Seite klickt - das kann eine Seite echt zäh wirken lassen - ich hab das in nem anderem Forum dem Admin gefühlte 20x runterbeten müssen, bis er die Expires endlich halbwegs tauglich eingestellt hat weil bei jedem Klick die immer gleichen 50 Dateien aufs Neue angefragt wurden.

Trotzdem - vielleicht komm ich über die Feiertage mal dazu das etwas genauer auszuloten was in der Hinsicht noch an Optimierung drin ist.

@onemorenerd & wahsaga
Ist schön und gut, aber hinsichtlich der Css3-Unterstützung (gerade in Sachen multiple Hintergründe) von den Browsern, die in meinen Logs dominieren, ist das momentan noch keine Alternative.

**piratos** · 21.12.2009, 22:03

"dahergeschlichen kommen"

Das war allgemein gesprochen (diene Site kenne ich nicht) - ich kenne Websites die haben technisch (Server) des Beste und haben es versaut, weil die Anzahl der Request's zu hoch sind.
Man muss heute weniger in Imagegrößen rechnen sondern in Anzahl von Request's - da werden so manche noch etwas brauchen um dahinter zu kommen.
Das sind übrigens im wesentlichen die Ansätze von Google Pagespeed und Yahoo Yslow.

Ich hab jetzt keine Ahnung wie es sich bei einem Sprite verhält, ....

Ich setze Sprite in meiner Site (powercms.org) ein - optimal, kann ich nur empfehlen.

Das optimalste Werkzeug zur Optimierung ist m.E. Google Chrome und davon der Developerteil. Da kann man sehr schön an der Timeline erkennen was Sache ist und optimieren.

Zum Test kann man da auch ruhig mehrere Lösungsansätze gleichzeitig laden und dann beurteilen was für einen ok ist.

**onemorenerd** · 21.12.2009, 22:07

Zitat von Quetschi Beitrag anzeigen

Bei langsameren Verbindungen profitieren meine Seiten dagegen davon, dass jedes Element das fertig geladen ist auch gleich angezeigt wird

Hier geht es um den Rahmen einer Box. Dessen Teile will man alle auf einmal angezeigt haben, nicht erst links, dann unten, dann die rechte ober Ecke usw.

so ist für einen User erkennbar, dass das Laden noch von statten geht

Dafür hat jeder Browser einen Ladebalken.

Trotzdem - vielleicht komm ich über die Feiertage mal dazu das etwas genauer auszuloten was in der Hinsicht noch an Optimierung drin ist.

Tools wie Y!Slow helfen dabei sehr.

Bildmasken mit .png