Was ist die beste Methode für Layout-Grafiken und kleine Bilder?

Hallo Matthias,

es kommt darauf an, ob Du auch in der Bildersuche damit gefunden werden willst, da wäre Datei zu verwenden.
Vom Code her, wäre CSS-Sprite am Sparsamsten, auch die Request reduzieren sich.
Bei Dataurl wesentlich mehr Code, aber man spart etliches an Request.

Gruß
hansen

Hallo Matthias,

Wenn Bilder bums liefern sollen, dann doch am besten als img src\'s

Um die Seite nicht mit sinnlosem Schmückwerk wie "speichern" "senden" Grafik Buttons Seo-technisch zu verwässern, den ganzen Kram als Sprite.

Hallo Matthias

Ich habe zwar jetzt für Datei abgestimmt aber du hast ja auch speziell nach dem Bereich SEO gefragt.

Begründen würde ich das mit Besucher über die Bildersuche.

Das bedeutet aber nicht das ich die beiden anderen Methoden nicht einsetzen würde.

Dataurl würde ich nicht bei mehrmaligen Einbinden oder zu großer Dateigrösse einsetzen.

CSS Sprite ist im Grunde mehr dazu geeignet häufig eingesetzte Bilder zu verwenden von kleineren Icons mal abgesehen.

Gruß
Jörg

also wenn ich die Frage richtig lese geht es um "Layout-Grafik". Also Beispielsweise der Klassiker mit abgerundete Ecken über Grafiken gelöst, wenn einem die Möglichkeiten mit border-radius etc nicht ausreichen.
in diesem Fall empfehle ich auf jeden Fall die Image-Sprites als sauberste Lösung hinsichtlich der der vermeidung der ganzen unnötigen HTTP-Requeste, die bereits von hansen hier angesprochen wurden.

Unter "kleine Bilder" verstehe ich jetzt mal icons für Menüs usw. und keine Themenrelevanten Fotos von Produkten (diese wären wohl auch nicht als "klein" bezeichnet worden). Auch hier würde ich auf jeden Fall Image-Sprites empfehlen.

Solange es sich um Icons handelt, ist somit auch die Bildersuche der Suchmaschinen nicht von Bedeutung.

Gruß

Icons sollte man heute als Font und nicht als Bild wiedergeben.
Diese lassen sich einfach mit Font CSS Paramentern in der Größe oder Farbei anpassen und sehen selbst auf Grund ihrer Vektorbasierender Form auf Mobilen Geräten nicht verpixelt aus.
Generell viele läßt sich heute mit css3 abbilden, wie z.b. Pfeile (da ich sie gerade hier im Breadcrumb sehen

fortawesome.github.com/Font-Awesome/

abikSolutions schrieb:

Icons sollte man heute als Font und nicht als Bild wiedergeben.
Diese lassen sich einfach mit Font CSS Paramentern in der Größe oder Farbei anpassen und sehen selbst auf Grund ihrer Vektorbasierender Form auf Mobilen Geräten nicht verpixelt aus.
Generell viele läßt sich heute mit css3 abbilden, wie z.b. Pfeile (da ich sie gerade hier im Breadcrumb sehen

fortawesome.github.com/Font-Awesome/

Hallo

Okay nette Idee und dann kommt das berüchtigte Aber.

Darstellung in unterschiedlichen Browser abhängig vom verwendeten Zeichensatz.

Ist mit Sicherheit ein gangbarer Weg wenn das entsprechende Unicode Zeichen ohne größere Unterschiede vorhanden ist.

Hatte ich persönlich mal mit den Unicode Zeichen der Sternzeichen in einer SVG Datei eingesetzt. Da gab es schon Unterschiede in verschiedenen Browsern.

Der Weg der auf der Seite angedacht ist basiert auf keinem Standardzeichensatz.
Also wird dafür auch ein Datentransfer benötigt zur einwandfreien Darstellung.

Den Download mit 1,4mb mache ich jetzt nicht um mir dann anzuschauen wieviel Daten da für ein einzelnes Zeichen benötigt werden.

Sicher wäre eine Möglichkeit aus der Navigation eine Liste zu machen und die mit [css]#navigation li:not(:first-child):before{content:\'\\25BA\';}[/css] zu designen.

Keine Ahnung ob der Befehl jetzt 100% sicher war wahrscheinlich nicht weil der IE8 da wegen dem not schon schlapp macht.

Also erst mal alle Stylen und für das erste Kind das zurücknehmen.

Statt dem Unicode Wert kann man auch das entsprechende Zeichen in der CSS Datei einsetzen.

Der betreffende Pfeil ist eh in der CSS Sprite und Semantische Elemente ist nicht für jeden der ausschlagende Punkt weil Design halt eben dann den Hauptausschlag gibt.

Und da es auch noch Leute gibt die den IE6 in ihre Betrachtungen einbeziehen fällt da jede Argumentation auf den Bauch neue Techniken einzusetzen.

Ja ich gebe den Weg selbst das ich Unicode Zeichen in Standard Zeichensätzen verwende. Einen speziellen Zeichensatz dafür einzusetzen halte ich für sowas von übertrieben und würde dann eher eine Grafik einsetzen.

Ja es hat Vorteile das man auf diesem Weg Semantik mit Design bei entsprechenden Ladezeiten verbinden kann.

Gruß
Jörg

Dank euch für die Antworten.

Ich habe jetzt einige Projekte mit der Variante DataURL umgesetzt, weil ich denke, dass das am effektivsten ist.

Zwar ist der Base64 Code grösser als die entsprechenden PNG Dateien, was aber durch die komprimierte Ãœbertragung von HTML und CSS wieder ausgeglichen wird.

Beispiel:
CSS mit DataURL = 19 kB

CSS mit Sprite = 12 kB + PNG mit den Bildern = 10 kB macht 22 kB.

Soweit zum Layout.

Anders ist es bei der DataURL im HTML. Hier verschlechtert sich das Verhältnis Content/Quelltext, und ob das so gut ist, bzw, ob die bessere Ladezeit das ausgleicht, muss sich noch zeigen.

Gruß Matthias

Hallo Matthias,

Content Delivery Network (CDN) wäre in Deinem Fall auch noch eine Ãœberlegung wert.

Gruß
hansen